update.Three.jsのShaderMaterialを使って、自分で書いたシェーダを適用させたときのメモ。wgld.org」を参考にさせていただきました。ちなみに今回のサンプルはjsdo.it(Three.jsでトゥーンシェーダの実装の実験)に上げてあります。レンダリング結果ShaderMaterialThree.jsではいわゆる普通のマテリアルに関してはすぐに使えるように準備がしてあります。THREE.MeshPhongMaterial)これはThree.js側でシェーダのコード断片を組み合わせて自動でシェーダを生成してくれる仕組みです。簡単なものであればこれらのマテリアルを使うだけである程度のことはできると思います。今回の例のようなトゥーンシェーダや、もっと複雑な質感を表そうとするともともと準備されているものでは実現できません。そこで使用するのがShaderMaterialです。これは、自分で書いたシェーダをマテリアルとしてgeometryに適用させる手段です。vertexShaderTHREE.ShaderMaterialはいくつかのパラメータを受け取ります。fragmentShaderとvertexShaderは言わずもがなで、それぞれのシェーダとして使用するソースコードを文字列で渡します。(今回の例ではscriptタグの中身をそのまま適用しています)attributes今回は使用していませんが、attribute変数に渡す値を設定します。uniformsシェーダのuniform変数に値を渡すために使用します。シェーダ内のuniform変数で使用している変数名をプロパティに指定し、値としてtypeとvalueをセットにしたオブジェクトを渡します。typeに関してはuniform変数で定義しているのに合った型を指定します。(指定できるtypeについては「Three.jsでWebGLを触ってみる」にリスト化しているので参照ください)トゥーンシェーダ今回の例では冒頭のサイトで紹介されているコードを元に、Three.js向けに書いてみたものです。シェーダ自体の解説はそちらの記事を参照ください。Three.jsで背面のレンダリングここはまだ曖昧な部分ではあるんですが、今回ハマったポイントなので備忘録として残しておきます。上記記事ではレンダリングする面の設定をgl.cullFace(gl.FRONT);で背面をレンダリングさせていますが、Three.jsでは内部的にスイッチしているのかこれでは背面がレンダリングされません。**でレンダリング面の設定はmaterial側で行うようです。material.sideにはTHREE.DoubleSide、THREE.FrontSide、THREE.BackSideという3つの定数が用意されていて、これを設定することでレンダリングされる面が決定するようです。material);のように生成しますが、ここで指定したmaterialはmesh.materialを通じてアクセスすることができます。実はこれ、Mesh生成時に渡したmaterialそのものの参照でしかなく、このmaterialを使った別のMeshを生成しても、同じ値が参照されます。レンダリング時にmaterialの値を書き換えるだけで今回のトゥーンシェーダを実現しています。camera);本当はもっとスマートなやり方があると思いますが、とりあえず今の段階で実現できたことをメモっています。新しく「シェーダの切り替え」ボタンを追加したのでメモ。r59のDocumentを見ると、Meshクラスには「setMaterial」というメソッドがあるみたいだったのだけど、なぜか未定義。otherMaterial;と直接参照を切り替えてあげればレンダリング結果も変更された。ARのコンテンツ制作をしています。趣味でWebGL/WebXRもいじってます。http://edom18.hateblo.jp/FollowUnityゲーム開発者ギルド趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。upLoginユーザーは見つかりませんでした。