はてなブックマーク

人生初アドベントカレンダーです。よろしくおねがいします。 概要 Three.jsユーザーの皆さん、「Blender」、使っていますでしょうか？ BlenderはThree.jsと同じくオープンソースで開発されている**統合型3DCGツールです。**モデリングからコンポジットまで、CG作りはこれ一本で事足ります！ 今年の夏頃v2.8の大型アップデートがリリースされ、glTFのインポート/エクスポートがデフォルトでできるようになったりと、Web業界でも非常に熱いツールになってきたのではないかと思います。 ただ、Blender、統合型ツールということもあり、機能がいっぱいでこれから始める方には少しとっつきにくいところもあると思います。 というわけで今回はThree.jsユーザー目線でBlenderのおおまかな使い方を紹介したいと思います。 最低限の操作ができる、 モデルを配置することができる モ

#概要 WebGLには拡張機能でインスタンシングなるものがあります。GPUに一つだけ3Dモデルのデータをロードし、GPU側でまとめて描画させることで高速に大量のモデルを描画する手法です。 Three.jsにはそれをラップしたInstancedBufferGeometryがあるのでそちらの使用法を解説したいと思います。 #作るもの Gitはこちらです。 デモはこちらです。 #どうやって作るの？ 手順は以下のようになります。 ベースとなるモデルのジオメトリを生成 InstancedBufferGeometryを用意 InstancedBufferGeometryに全てのモデルに共通のAttribute（頂点座標やノーマル、インデックスなど）を設定 モデルごとで異なる値のAttributeを生成、InstancedBufferGeometryに設定 シェーダーを作成。 メッシュ（ラインなどでも）

概要 デモはこちら Gitはこちら Three.jsでラーメンを作ります。 ラーメンの主な成分はGPU Trailですが、こちらは前の記事でベースを作ったのでそちらも参照してください。だいたい同じ内容です。 Three.jsでGPU Trails 今回はこいつにメッシュを貼って食べ応えのあるラーメンに仕上げていきたいと思います。 GPUComputationRendererの初期化 GPUComputationRendererを初期化します。 initComputeRenderer(){ this.computeRenderer = new GPUComputationRenderer(this.length,this.num,this.renderer); let initPositionTex = this.computeRenderer.createTexture(); let in