JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
![HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/cb7d7a5f5dda357bb999a3a9222c8a834d816988/height=288;version=1;width=512/https%3A%2F%2Fclockmaker.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F01%2F120215_webgl.jpg)