2022-07-01
一般財団法人高専人会が発足。ロゴマークの公募が始まりました!今年60周年を迎える高専、現役高専生や元高専生が互いにつながり、創造が加速する新しいプラットフォームです。

「高専人会 ロゴマーク募集」
src on GitHub
ご応募、お待ちしています!

GitHubで、ウェブサイトやシステムを一緒に作る仲間も募集中!
高専オープンデータや、世界中のオープンソース、オープンデータ、ステキな技術を使って、高専らしい表現、どんどんチャレンジしていきましょう!


「WebGL wind simulation」
src on GitHub
WebGLを使った高速描画サンプルを探して見つけた、100万の点を使った世界中の風のスムーズな見える化「webgl-wind」をforkし、今風JavaScriptにリライト。M1 MacBook Proでは120fpsで、なめらか動いてくれます。

変更点
- Node.jsでコンパイルしていたものをブラウザネイティブのESモジュールに書き換え
- GLSLもfetchする形にしたので即書き換えOK
- XMLHttpRequestとcallbackを使ったものをfetchとawait/asyncでスッキリ
- サポートが終了したdat.guiに代えて、lil-guiのES版に変更
- 2021年データへのプルリクを反映
- varやfunction表記を今風に書き換え

Natural Earth - Free vector and raster map data at 1:10m, 1:50m, and 1:110m scales」による海岸線オープンデータや、風オープンデータの使った、GLSLによるプログラムが参考になりますね!

プログラムはそんな大きくないので、あれこれ気軽にいじって遊んでみましょう!

リポジトリをダウンロードかクローンして、手元のウェブサーバーを立てて動かすだけで、いじれます。ウェブサーバーを持ってないなら、Denoをインストールして、demoディレクトリ内で、下記を実行するだけでOK!

deno run --allow-net --allow-read https://taisukef.github.io/liveserver/liveserver.js

あっと驚くサイトづくりの参考にどうぞ!(GoogleのAI、MediaPipeもWebGL活用例)

ウェブアプリ開発の技を磨きたい高専生へ
jigインターン」参加受付中!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS