シェーダでの3Dパーティクルアニメーション実装に便利なライブラリ THREE.BAS
背景昨年、弊社採用サイトをリニューアルしました。トップページは 3D のパーティクルアニメーションとなっており、 WebGL で実装しています。実装するにあたって使用するライブラリには PixiJS 等も検討しましたが、今回は 3D ということで three.js を選びました。 始めは一つ一つのパーティクルを THREE.Mesh で生成していましたが、特にテキスト側の画面はパーティクルの数が多くかなり重くなってしまいました。 改善するために別の実装方法を探したところ、 Takumi Hasegawa さんの記事を見つけ、どうやらシェーダを使うと大量のパーティクルでも重くならずに描画できると書いてあったので試すことにしました。 シェーダで実装してみた上記の記事を参考にシェーダで実装してみたところ軽くはなりましたが、パーティクルが画面から出ていって消えた後に反対側から再び表示させるという処
CSS3D！まるでWebGLのような3Dを超気軽に実装するCSS技
CSSでWebGLライクな3D表現は可能か？ご覧ください、 可能 です。 ただし、できない(苦手とする)こともあります。 See the Pen OnlyCSS: Cube 3D Twister by Yusuke Nakaya (@YusukeNakaya) on CodePen. やったことこの記事の 3D表現 とは、単純に perspective + transform プロパティで「1つの要素を立体的に表示する」だけではなく、 「立方体を描画して、回転などの表現を加える」 事を目指しています。 立方体のコントロールについて、CSSだけでどこまで可能か、研究してみました。 立方体を描画する親要素に transform-style: preserve-3d; を指定すると、 親要素の3D変形を継承して子要素の3D変形も有効 になります。 これは言葉では説明しにくいので、下のサンプルをご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
