面白い！

@sunag私たちはこのようなものに非常に興味があります。 手伝いましょうか？ 少なくともStandardのサポートを追加できます。

中間ノードも入力を受け取るように、かなり任意のグラフを作成することに興味があります。 したがって、次のようなグラフを作成できます。

テクスチャ（tex1、uv1）
Bテクスチャ（tex2、uv2）
Cブレンド（A、B、モード）
Dノイズ（param1、param2）
Eブレンド（C、D、モード）

そして、その最後のノードEをマテリアルへの入力として使用します。

したがって、テクスチャだけでなく、非常に恣意的です。

私の目標は、可能であれば来週かそこらであなたと協力して、次の数週間でこれを作成するのを手伝うことです。 https://github.com/mrdoob/three.js/issues/7339のshadergraphライブラリを介してこれを行うことを検討していましたが、ThreeJS内で直接作成していることがわかりました。 柔軟性があり、機能する限り、実際にはどのソリューションでも問題ありません。

私はあなたのコードを読んでいます、それは非常にうまく設計されています。 最初のフィードバックがあります。 あなたのコードをベースとしてPRを開始し、コラボレーションを開始できますか？

（1）資料に参照を解決してもらいます。 基本的に、参照には、資料に解決を依頼する名前が付けられ、資料は、そのデータにアクセスする方法に関するコードの断片を返します。 これにより、マテリアルはノードで使用されている変数（均一/変化）を知ることができるため、適切に最適化できます。 これにより、異なるマテリアルが参照を異なる方法で解決できるため、特にフラグメントと頂点の実装に違いがある場合に、マテリアルの実装方法を知る必要がなく、ノードの移植性が向上します。

（2）ライトリファクタリングで作成したGeometryContextオブジェクトを使用しようとしています。これにより、必要な多くのローカル変数に一貫してアクセスできます。 しかしもちろん、それは資料自体によって解決することができます。

（3）私はUVをもう一つの参照として持っていますが、それは材料によって解決されます。 そして、NodeTextureが実際にノード入力を受け取る必要があるため、手続き型で生成されたUVが可能になります。

（4）Three.JSの残りの部分と一貫性を保つために、NodeCube、NodeTextureCubeを呼び出します。 そして、実際にレイキャストを実行する方法に関するロジックを削除します。 しかし、私は標準のキューブマップのアイデアが好きなので、実際には鏡面反射光または拡散反射光の環境クエリをノードに配置しませんが、ベースフォンマテリアルに配置します。クエリに使用される法線、またはキューブマップの結果自体（したがって、手続き的に決定された色にすることができます）。それは意味がありますか？ したがって、通常のプラグインをマテリアルに、キューブテクスチャをプラグイン可能にします（方向とバイアス/ロッドでクエリ可能で、色を返します）。 したがって、1つは放射照度マップに立方体テクスチャを提供し、もう1つは鏡面反射マップに提供できます。 単なるノードスワップとして、 @ tschwのcubeToUV2関数を

（5）NodeOpへの追加として、パラメーターを使用して任意の関数を呼び出すことができるNodeFunctionを追加しようと思います（または、何らかの方法でマージすることもできます）。

（6）冗長なNodeNormal、NodeTransform、NormalMapなどの個々のクラスをすべて取り除き、必要に応じてマテリアルによって解決される名前でNodeReferenceを作成するいくつかの単純なコンストラクターを用意します。 NodeReferenceは、シェーダーで計算された値だけでなく、ユニフォーム、変化も解決できます。

（7）NodeEnvironmentとNodeCubeの違いがわかりません。 NodeEnvironmentが不完全かもしれないと思いますか？

（8）NodePhongがNodeMaterialから派生していないと混乱します。 NodeMaterialはShaderMaterialから派生しているようですが。 ShaderMaterial、GraphMaterial（またはNodeGraphMaterial）から直接派生したものを、より意味のあるものと呼んでいるのではないでしょうか。ノードがすべて一緒になってグラフを形成し、個々のノードではなく、グラフがマテリアルになります。

（9）多分もっと多様な用語を提案したいと思います。 ルートノードをMaterialNodeと呼び、そこからPhongMaterialNodeを派生させることができます。 ValueNodeから派生したVector3Node、FloatNodeなどがあります。必ずしも定数ではなく、値だけです。 したがって、3つのFloatNodeをVector3Nodeにパイプすることができます。 現在の10行程度ではなく、1行程度の宣言を行うヘルパーがいると思います。

（10）「ノード」という名前をクラス名の先頭から後ろに移動します。これは、ThreeJSプロジェクトの残りの部分にあるためです。

（11）新しいMaterialNodeクラスを作成し、ユニフォームとバリエーションのリストで初期化します。 デフォルトでは、これを解決し、解決したものを追跡できるため、必要な機能を追跡できます。 したがって、派生したPhongMaterialNodeで限定的な解決を行うことができます。これにより、特殊なケースが解決され、基になるクラスに依存して単純なもの（さまざまなもの、ユニフォーム）が実行されます。

（12）NodePhongとNodePhongMaterialの違いについて少し混乱しています。 今まで両方あることに気づかなかった。

（13）次のようなコードがあります：

THREE.NodeGLPosition.prototype = Object.create( THREE.Node.prototype );
THREE.NodeGLPosition.prototype.constructor = THREE.NodeGLPosition;

THREE.NodeGL.prototype.generate = function( material, shader ) {

しかし、このスニペットの上では、すでにgenerateに対してNodeGLを定義しており、 NodeGLPositionに対しては定義していません。したがって、これはコピー-貼り付け-編集エラーだと思います。

（14）NodeReflectUVWとNodeRefractVectorを削除し、代わりに、参照解決を介してマテリアルから要求できるものにします。 反射ベクトルの計算は簡単です。 マージされていない実験的なThreeJSブランチのGeometryContextに追加しました。

（15）反射と屈折を実装する方法は、マテリアルのカラー入力としてそれらを使用することです。 変数を解決する簡単な方法でRefect、ReflectLOD、およびRefract、RefractLODを解決し、それらを同等のテクスチャキューブ（手続き型またはsamplerCubeベース）に渡してから、結果の色をMaterialに渡します。 それはあなたがそれをやっていた方法ですか？

（16）ライト入力について混乱しています。通常、ライトをプラグインすることはできません。ライトパラメータはライトクラスで完全に定義されています。 この追加の柔軟性が必要だと思いますか？ どのようにそれを想像しますか。

@bhouston woow 、フィードバックありがとうございます。
私は答えるためにいくつかの投稿が必要になります:)

中間ノードも入力を受け取るように、かなり任意のグラフを作成することに興味があります。 したがって、次のようなグラフを作成できます。
テクスチャ（tex1、uv1）
Bテクスチャ（tex2、uv2）
Cブレンド（A、B、モード）
Dノイズ（param1、param2）
Eブレンド（C、D、モード）

現在、このような構文です。 Uv1オフセットアニメーションの例：
NodeMaterialからMaterialNodeとTHREE.PhongMaterialNodeへの方が良いと思います。

var uv2 = false;
var uv_offset = new THREE.NodeFloat(0);     
var uv = new THREE.NodeOperator( '+', new THREE.NodeUV( uv2 ), uv_offset);
var texture = new THREE.NodeTexture( imgTexture, uv );

nodematerial.color = t;

// onUpdate
uv_offset.number += .01;

私はあなたの提案が（モード、A、B）から（A、B、モード）に良くなるという順序を逆にすると思います。 反射マップ、キューブマップなどを作成中です...

環境とキューブマップは不完全です。

現在、フォーマットコンバーターがまだ完成していないため、バグがさらに発生する可能性があります。 これは、ベクトル変換が原因です。 たとえば、vec3からvec4またはvec4。

https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L365

たとえば、Blendの「テクスチャ」:(このコードはテストしていません）
THREE.NodeOperatorと同じように実装できます

https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L1105

THREE.NodeBlend = function( a, b, mode ) {

    THREE.NodeInput.call( this, 'blend' );

    this.mode = mode;
    this.a = a;
    this.b = b;

};

THREE.NodeBlend.prototype = Object.create( THREE.NodeInput.prototype );
THREE.NodeBlend.prototype.constructor = THREE.NodeBlend;

THREE.NodeBlend.prototype.generate = function( material, shader, output ) {

    var a = this.a.build( material, shader, output );
    var b = this.b.build( material, shader, output );

    switch(this.mode)
    {
        case 'multiply':

            return this.format( '(' + a + '*' + b + ')', this.a.type, output);

            break;
    }

    return a;

};

.generate（）は、コードジェネレーターを担当します。 パフォーマンスを損なうことなく複数の入力で使用する場合、計算コードはキャッシュに保存されます。

それでも私は最適化のためにポインタや定数を設定していません...

コンパイルは、頂点コードとフラグメントコードのbuild（）での伝播によって行われます。

私はあなたをコラボレーターとして置くことができますか？ なんらかの方法でコードを編集したい場合は、私もそれに取り組んでいきます。

私はあなたをコラボレーターとして置くことができますか？ なんらかの方法でコードを編集したい場合は、私もそれに取り組んでいきます。

ありがとう！ あなたが変更を承認できるように、私はあなたにPRを行います。

さまざまなレンダリング間で転送可能な再利用可能なノードとマテリアル定義のセットを定義しようとしている私のサイドプロジェクトに、あなた（および@ mrdoob 、 @ WestLangley 、@ tschw）を追加しました。 作成したこのシェーダーグラフシステムにマッピングできます。

アクセスしたくない場合は、アクセスを許可したリポジトリに注意を払う必要はないと思います。 これに加えて、私が実装したいと思っていることです。

（2）ライトリファクタリングで作成したGeometryContextオブジェクトを使用しようとしています。これにより、必要な多くのローカル変数に一貫してアクセスできます。 しかしもちろん、それは資料自体によって解決することができます。

ライトが1つのLightNodeであることを望みます。 私の懸念は、Three.JS用にすでに開発されたコードを利用することです。

（3）私はUVをもう一つの参照として持っていますが、それは材料によって解決されます。 そして、NodeTextureが実際にノード入力を受け取る必要があるため、手続き型で生成されたUVが可能になります。

UVをvec2に置き換えることができますか？

（5）NodeOpへの追加として、パラメーターを使用して任意の関数を呼び出すことができるNodeFunctionを追加しようと思います（または、何らかの方法でマージすることもできます）。

これは素晴らしいことです。 主にBlendNode用です。

（6）冗長なNodeNormal、NodeTransform、NormalMapなどの個々のクラスをすべて取り除き、必要に応じてマテリアルによって解決される名前でNodeReferenceを作成するいくつかの単純なコンストラクターを用意します。 NodeReferenceは、シェーダーで計算された値だけでなく、ユニフォーム、変化も解決できます。

この考え方では、MaterialNodeはPhongおよびPhysicalマテリアルのベースになる可能性があると思います。

（7）NodeEnvironmentとNodeCubeの違いがわかりません。 NodeEnvironmentが不完全かもしれないと思いますか？

私はまだこれらのノードを終了できません。

（8）NodePhongがNodeMaterialから派生していないと混乱します。 NodeMaterialはShaderMaterialから派生しているようですが。 ShaderMaterial、GraphMaterial（またはNodeGraphMaterial）から直接派生したものを、より意味のあるものと呼んでいるのではないでしょうか。ノードがすべて一緒になってグラフを形成し、個々のノードではなく、グラフがマテリアルになります。

NodeMaterialはルートノードマテリアルになります。頂点とフラグメントにはノードを使用する必要があります。 NodePhongはハイブリッドであり、NodePhongMaterialはプロキシクラスにすぎません。 その後、これをマージできます。

（9）多分もっと多様な用語を提案したいと思います。 ルートノードをMaterialNodeと呼び、そこからPhongMaterialNodeを派生させることができます。 ValueNodeから派生したVector3Node、FloatNodeなどがあります。必ずしも定数ではなく、値だけです。 したがって、3つのFloatNodeをVector3Nodeにパイプすることができます。 現在の10行程度ではなく、1行程度の宣言を行うヘルパーがいると思います。

いいですね。

（16）ライト入力について混乱しています。通常、ライトをプラグインすることはできません。ライトパラメータはライトクラスで完全に定義されています。 この追加の柔軟性が必要だと思いますか？ どのようにそれを想像しますか。

これは、ライトマップまたは可能なLightNode用です。

これは、ライトマップまたは可能なLightNode用です。

プラグ可能なライトマップのアイデアは、UVを明示的に定義できるので気に入っています。 :)

@bhoustonこのファイルの今日のいくつかの修正を修正します：しかし、まだやるべきことがたくさんあります。
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/three.node.js

これは私が作成している遊び場です：art：テクスチャとボタンはドラッグアンドドロップで、Chromeでのみ機能します

http://sea3d.poonya.com/flow/

すごい、もの！ 聖なるがらくた！ それは美しいです。

私も貢献できる方法でコードを共有することは可能でしょうか？ 広報か何かとして？

ここでSea3Dプロジェクトに取り組んでいますよね？

https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial

だから私はそれをフォークして貢献を始めることができますか？ PRを受け入れますか？ どうすれば効果的にコラボレーションできますか。

私は尋ねていませんが、 @ mrdoobはおそらく（？）これをThreeJSプロジェクト自体の中に入れたいと思っています。

間違いなく！

だから私はそれをフォークして貢献を始めることができますか？ PRを受け入れますか？ どうすれば効果的にコラボレーションできますか。

もちろん、あなたの助けは素晴らしいと思います。 あなたが提案したように、飽和、ノイズなどの他のノードタイプも持ってくる必要があります。

ここでSea3Dプロジェクトに取り組んでいますよね？

例を挙げてThree.JSのPRを作成することで、これがすべて定義されると思います。

@mrdoobマテリアル名THREE.MaterialNodeまたはTHREE.NodeMaterialについてどう思いますか？

これは一種の素材なので、 THREE.NodeMaterialである必要があります。

上。 私はPRに近いと思いますか？
https://github.com/sunag/sea3d/commit/55cf70aea38b2b72110abf96f7b96924dad81c54

このキューブマップをプレイグラウンドやその他のテスト用テクスチャにドラッグします
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png

http://sea3d.poonya.com/flow/

リムシェーダーの例

エリア反射の例

これはとても素晴らしい@sunagです！

@bhoustonありがとう！ R74への変換は難しいと思いますか？

とても印象的な作品です！ シェーダーフォージを思い出させます。

これまでのところ非常に良い仕事です！

@sunag少し手間がかかりますが、手助けしたいと思います

@GGAlanSmitheeこれもUE4の機能と非常によく似ています： https ： //docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/ExpressionReference/index.html

美しい男に見えて、遊ぶのが楽しいです：私はインスピレーションBlender3Dノードエディターを提供するかもしれません。 私はそれが非常に効率的だと思います。Blenderのノードシステムを介したPBRにはいくつかのすばらしいビデオがあり、PBRを最初から作成するために作成するのに最も役立つノードは次のとおりです。

https://www.youtube.com/playlist?list=PLlH00768JwqG4__RRtKACofTztc0Owys8

少し手間がかかりますが、お手伝いしたいと思います。R74シェーダーコードの大きな構造変更のほとんどは私のせいです。 :)

@bhoustonうわー。 新しいr74の変更により、はるかにクリーンになりました。 StandardMaterialがまだない最初の部分を終了しました。 私がここに投稿する問題:)ありがとう
https://github.com/sunag/sea3d/commit/d544ad7993272348f8bbea2337cdceb52159a6a8

私たちがまだ欠けているもう一つのことは屈折です。 キューブマップRTTの代わりにレンダリングバッファをデフォルトとして使用するのが本当に好きです。 それははるかに効率的です。

@GGAlanSmithee私は大ファンであるShaderFXのいくつかの参照があります。 Shader ForgeとUE4も、主に優れたリファレンスです。

@richardanaya素晴らしいビデオ。 Thks！

@mrdoobこれらのファイルをどのフォルダに置くことをお勧めしますか？ three.jsルート（src / Materials / node）または例では？
https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial/node

これを「MaterialGraph」または逆ThreeJSスタイルの「GraphMaterial」と呼ぶことをお勧めします。 または、「ノード」という用語の使用を主張する場合は、「NodeBasedMaterial」と呼びます。 これらの名前は両方とも、マテリアルがノード自体ではなく、ノードを

これを「MaterialGraph」または逆ThreeJSスタイルの「GraphMaterial」と呼ぶことをお勧めします。 または、「ノード」という用語の使用を主張する場合は、「NodeBasedMaterial」と呼びます。 これらの名前は両方とも、マテリアルがノード自体ではなく、ノードを含むことを明確にしています。

私にとってはどちらもよさそうだ。 決定は@mrdoobに任せます。どう思いますか？

ところで@sunag可能であれば、屈折用のキューブマップを使用します。より簡単で正確です。 それは他のほとんどの人がやっていることだと思います。正確な反射のためにもRTTのものが必要です。 128 ^ 2または256 ^ 2での高速レンダリングが必要だと思います。

ところで@sunag可能であれば、屈折用のキューブマップを使用します。より簡単で正確です。 それは他のほとんどの人がやっていることだと思います。正確な反射のためにもRTTのものが必要です。 128 ^ 2または256 ^ 2での高速レンダリングが必要だと思います。

はい、両方を許可できます。 パフォーマンスと精度の間の議論になります。 それでも平面屈折（ガラス、水）の場合は、CubeMapの代わりにバッファーをお勧めします（ほとんどの場合）。

分析するNodeStandardは、CubeMapをドラッグする必要があります。
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png
http://sea3d.poonya.com/flow/

ソース：
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/node/NodeStandard.js

@mrdoobこれらのファイルをどのフォルダに置くことをお勧めしますか？ three.jsルート（src / Materials / node）または例では？

そもそも例に入れておきます。 明確に定義されたら、後でsrcに移動できます😊

これを「MaterialGraph」または逆ThreeJSスタイルの「GraphMaterial」と呼ぶことをお勧めします。 または、「ノード」という用語の使用を主張する場合は、「NodeBasedMaterial」と呼びます。

私にとってはどちらもよさそうだ。 決定は@mrdoobに任せます。どう思いますか？

私NodeMaterialすでにNodesMaterial ？ NodeGraphMaterial ？ @WestLangley何か提案はありますか？

ただし、現在のノードの名前を変更します... NodeColor 、 NodeFloat 、 NodeTexture 、...からColorNode 、 FloatNode 、 TextureNode

http://sea3d.poonya.dev/flow/

これをロードできません😐

そもそも例に入れておきます。 明確に定義されたら、後でsrc：blush：に移動できます。

@mrdoobそれは素晴らしいでしょう。

ただし、現在のノードの名前を変更します... NodeColor、NodeFloat、NodeTexture、...をColorNode、FloatNode、TextureNodeに変更します

それでは転送します。

これはローカルURLです：blush ：、これを試してください：
http://sea3d.poonya.com/flow/

@WestLangley何か提案はありますか？

THREE.FlowMaterialをお勧めします。

私の2番目の選択肢はTHREE.CustomMaterialです。

完全にランダムな傍観者として。 NodeMaterialは私には非常に直感的に聞こえます。なぜなら、それがBlender3Dで呼ばれているからです。

@mrdoobがNodeMaterialを気に入っている場合は、それを使い続けることができます。 :)

NodeMaterialそれなら😁

このプロジェクトは素晴らしいです！ Twitterでデモを見ただけで、とても印象的です。

ノードはスリーコアに入るものであるべきかどうか疑問に思います。 それらは非常に実装固有です。 私もShaderFrog.com用のThree.jsシェーダーグラフエディター（まだリリースされていません）を構築しています。私が持っている解決策は、GLSLコードとユニフォーム名などの必要なすべてのメタデータを小さなJSONファイルにエクスポートしてロードすることです。外部ランタイムライブラリを使用

このグラフエディタは、ソースコードを分析することでフルシェーダーを操作できます。つまり、特定のシェーダーノードタイプは必要ありません。 このNodeMaterialタイプは、Threeのコアの外部でも完全に処理できますか？ 実際に出力する必要があるのは、誰かが自分のプロジェクトで使用するためのRawShaderMaterialだけです。

このNodeMaterialタイプは、Threeのコアの外部でも完全に処理できますか？ 実際に出力する必要があるのは、誰かが自分のプロジェクトで使用するためのRawShaderMaterialだけです。

@DelvarWorldこんにちは。 理論的にはそうですが、生から良いシェーダーを作るのは非常に早いです。 当時は初期インターフェースの方が良いです。 また、Three.JSのSkin / Morphおよびその他のネイティブコンポーネントとの互換性を維持するのにも役立ちます。

私はマイナーな問題に注意しようと思いました：
「フロー」では、ノードを相互にドラッグしても、コネクタがトップレベルにポップしません。
たぶん、この問題はまだレイヤーか何かを待っています。

両方のアプローチを統合する方法があるのだろうか？ 多層シェーダーに興味があります。そのためには、最終結果に寄与する複数のBSDFが必要です。 これは、シェーディングモデルをさらに分離する必要があることを意味します。現在、 @ sunagの現在の設計ではかなり緊密に結合されています。 標準またはフォンの素材を指定する必要がない方向に向かうべきだと思います。 @ DelvarWorldのように生である可能性があります。 ただし、段階的に移動できると思うので、 @ sunagが持っているものは良いスタートです。

これは具体的な答えではありませんが、少し前に、ユニフォーム名、タイプ、Three.jsでのタイプなどのメタデータを含むポータブルシェーダー形式の大まかな提案を作成しました。https：//github.com / DelvarWorld / ShaderFrog-ランタイム/blob/master/THREE_SHADER_FORMAT.md

実際の環境で実際に実行する必要があるシェーダーは、生のシェーダーソースコード（GPUがコンパイルするため）と、便宜上、ユーザーがどの値でどのユニフォームを設定できるかだけです。 この大まかな提案には、プログラムでシェーダーを構築するという概念は含まれていません。これは、GLSLとメタデータの単純な配信にすぎません。 最終的にRawShaderMaterialに入れるだけなので、Three.jsと互換性があります。

現在、Three.jsでシェーダーを移植したり、アプリケーションからエクスポートしたりする方法はありません。そのため、標準を提案することができました。外部アプリケーションを構築しているため、両方の問題を解決できると思います。結局、あらかじめ決められた材料を吐き出します。 また、グラフの特定の組み合わせをコンパイルする実装の詳細は、Three.jsではなくアプリケーションに任されていることも意味します。

この提案されたシェーダー標準はThreeに位置付けられていますか？ 何も思いつきません。 今のところ、Threeは独自のシェーダーを独自の方法で構築しているため、Threeのコアよりもおそらく私にとっては便利です。

@DelvarWorldこのプロジェクトは、標準化されたシェーダーグラフノードのセットを作成する方法で開始しました。

https://github.com/OpenMaterialGraph/OpenMaterialGraph

ここでのノード仕様：

https://github.com/OpenMaterialGraph/OpenMaterialGraph/tree/master/spec/nodes

ミニマリストBSDFの仕様はこちら：

https://github.com/OpenMaterialGraph/OpenMaterialGraph/tree/master/spec/bsdfs

ただし、これは物理ベースのレンダリングを対象としています。

私の感じでは、ThreeJSのシェーダーのシェルは、生のシェーダーよりもレベルが高く、フォンシェーダーよりもレベルが低い必要があります。 基本的に、デフォルトのシェーダーはモーフターゲット、ボーンなどを実行できます。次に、これらすべての特定のライティングスキームシェーダー（Basic、Lambert、Phong、Standard）はそのテンプレートを使用します。 現在、暗黙のテンプレートシェーダーがあります（各シェーダーに同じものが含まれています）-しかし、どこにプラグインするかをより明確にすることができると思います。 照明スキーム（フォン、ランバート、ベーシック、またはマルチレイヤー）をプラグインでき、一般的なノードであるこれらの照明スキームにプロパティをプラグインできます。

@bhoustonああ、いいですね。重複する要件、別名デフォルト値、表示名、人間が読める形式の説明などがたくさんあるようです。将来がどうなるかはわかりませんが、使用するのは適度に簡単な変更です。あなたが提案するものにもっと似たフォーマット。

正式なシェーダー形式は非常に理にかなっています。 ただし、libと一緒に使用すると、より簡単に進化できるようになります。 three.jsを初めて使用する人にとって、そのようなものがまだ存在しない特別な理由はありますか？ 他に何もないとしても、編集者にとって興味深いはずです。

*編集他のレンダリングパイプによって消費されることを意図している場合、three.jsに仕様があるとその目的が損なわれる可能性があります。

今のところ、Threeは独自のシェーダーを独自の方法で構築しているため、Threeのコアよりもおそらく私にとっては便利です。

NodeMaterial（* Flow）が視覚言語になったら、 THREE.NodeGL.prototype.generate内で変更を加えると、他の言語で同じマテリアルを生成できます。 NodeBuilderはそれへの扉になることができます。 現在、ノード間のデータの仲介です。

NodeMaterialの「raw」の例をクリーンアップしました。それでもいくつかのバグが発生する可能性があります。
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/index.html#L179
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/node/NodeMaterial.js#L9

パーティクルで作成されたルートノードでこれを進めると思います。 マルチパス用のNodePassとPR後のNodeMaterialD数日で何をすればよいですか。

ランタイムシェーダーの代わりにTHREE.ShaderFrogLoaderを提案しました。

「フロー」では、ノードを相互にドラッグしても、コネクタがトップレベルにポップしません。

@MasterJamesありがとうございます！ 私はそれを見ます。

：+1：

私は例を作り始めました。 今週を終えたいと思います。 ：sweat_smile：
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

考え？

@sunag +1

+1！

これはとても素晴らしいです。 曇りのような変位ではなく、デフォルトで植物と壁のテクスチャを使用します。 :)それはただ美しいです。

曇りのような変位ではなく、デフォルトで植物と壁のテクスチャを使用します。

'layers'の例を参照しますか？ それでも私は私たちのためにもっと多くの例を投稿します

GPUソフトボディ

別のアプローチと比較するために、Shader Frogグラフエディターが稼働しており、「タイヤを蹴る」フェーズにあります。 Three.jsコアに変更を加える必要がないことを強調したいと思います。

ShaderFrogは現在、従来のノードエディタよりも強力です。 シェーダーを解析して理解できるため、使用できるノードタイプは無限です。 たとえば、オブジェクトのエッジにのみ反射を適用するには、グローシェーダーを使用します。これは、フラグメントと頂点シェーダーを備えた完全にスタンドアロンのシェーダーです。

...そしてそれを反射シェーダーで乗算します..。

...シェーダーグラフを使用して...

そしてタダ！ 反射リムシェーダー。

たとえば、他のシェーダーを使用して2つのシェーダーをマスクすることもできます。

このプロセスに必要な「ノードタイプ」は、GLSLからほぼ完全に独立している乗算ノード（ShaderFrogには他にもあります）のみであることに注意してください。 ShaderFrogは、任意のシェーダーで機能するため、ノードタイプは無限です。 この高度なテクノロジーアプローチにより、Three.jsの変更とは無関係にこの操作が可能になります。

ShaderFrogは、Three.jsへのファーストクラスのエクスポートを無料でサポートしています。 Three.jsソースコードを変更せずにすべて。 Sea3Dは、ShaderFrogなどのサードパーティ製品です。 サードパーティの製品メカニズムをThreeのコアに組み込むことは不公平な利点のように思われ、私はそれを政治的に理解していません。

@DelvarWorldノードベースのシェーダー構築の抽象化をサードパーティ固有のテクノロジーとは実際には見ていません。 どちらかといえば、それにより、より多くの競合他社がノードベースのシェーダー技術に関与し、お互いの作業のさらなる利点（より多くのノード、最適化された構造など）からすべての利益を得ることができます。

（Blender 3Dのようなツールから）高レベルでシェーダーを理解しているが、低レベルでは理解していない私のようなグラフィックプログラマーとして、ノードベースの抽象化は、3Dモデリングの知識を使用してプログラムでシェーダーと対話するための優れた方法のようです。 たとえば、PBRのノード設定は理解していますが、GLSLで記述したい場合は、神が助けてくれます。

@DelvarWorldすごい。 私は新しいエディターが大好きです。

@DelvarWorld +1とてもいいです！ ：-）

ありがとう！ :)

ノードベースのシェーダー構築の抽象化をサードパーティ固有のテクノロジーとは実際には見ていません。

たとえば、PBRのノード設定を理解しています

ここでの私の反例の一部は、Three.jsとは関係なく、これらの両方を無料で入手できることです。 すべてのShaderFrogシェーダーはオープンソースであるため、PBR実装の一部となるノードは、時間の経過とともに学習、編集、および改善することもできます（また、Three.jsコアのサブセットだけでなく、他のシェーダーで構成することもできます）。 私にとって、これらすべてが3つの変更なしで達成できるという事実は、それが不要であることを意味し、Three.jsがwebglラッパーAPIであり、実装固有の機能を推進することの間の境界線を曖昧にします。 シェーダーノードデータの保存はアプリ固有のものであり、私が知る限り、現在、どのソフトウェアにも共通のノードエディターの標準形式はありませんか？ 1つを強制すると、他の実装に害を及ぼす可能性があります。

@DelvarWorldこの変更を理解しているので、ShaderFrogは引き続き機能し、必要に応じてGraphMaterialを超えることができます。 GraphMaterialのサンプルソースコードを見て、サードパーティのソリューション/エディターについて考えることなく、その動作の単純さを理解することができました。 グラフィック開発者として、私はプログラムで印象的な素材をすばやく作成する方法に関心があり、これらはThreeJSの適切な関心事であると感じています。

NodeMaterialとFlowには2つの異なる焦点があると思います。 FlowとShaderFrogはどちらも、現在クローズドソースにあるビジュアルエディターのサードパーティソリューションです（私は主にこのためのアーティストだと思います）。一方、NodeMaterialは、Three.JSに対して行われるプログラマー向けのオープンソースシェーダーエディターです。 ShaderFrogが必要に応じてNodeMaterialを超えることができるという意味で、 @ richardanayaに同意します。 私が思うように、Flowは単なるマテリアルエディタである必要はありません。 今後もいつものようにShaderFrogが大きく改善されることを願っています。

wip：苛性ボロノイ
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

@sunag私は今夜​​あなたのソースコードを

• 遅かれ早かれPRを見たいです。 私は助けることができる。 :)
• 標準の属性（uv、uv2、normal、positionなど）だけでなく、任意の属性を許可するのはクールかもしれません。多くのシェーダーが、2つのuvだけでなく、複数の色の接線vec4の恩恵を受けることができることを知っています。属性。 したがって、needsPositionをrequestedAttributes配列などに一般化します。
• ノードをメインのNodeMaterial、BRDF（Phong、Standardなど）、テクスチャノード（NodeCubeTexture、NodeTexture）、アクセサー（？）ノード（NodePosition、NodeNormal）、数学ノード（NodeOperatorなど）に編成することをお勧めします。 ）、ユーティリティノード（NodeSwitch、...）、および追加（？）（NodeVelocity、...）これは大いに役立つと思います。
• Projection、View、およびWorldマトリックス用のマトリックスアクセサーがあると便利です。
• いくつかの演算子がありません： % ^ & << >> ~ |
• クラスが非常に小さい場合にNodePhongMaterialに値が表示されるかどうかはわかりませんが、NodePhongノードをNodeMaterialと組み合わせて使用​​して作成する必要があります（まだその名前は好きではありませんが、GraphMaterialは非常に感じます私にはもっと自然がありますが、私はそれと一緒に暮らすことができます。）
• NodeTimer-> NodeTime ...と呼びますが、やはり個人的な好みです。
• NodeMath＃、NodeOperatorで行ったように、多くの可変ノードを1つに結合する方法があるのではないかと思います。 これらは非常に似ているようです：NodeViewPosition、NodeWorldPosition、NodeViewNormal、NodeTransformedNormal、NodeTransformedPosition、NodeProjectPosition ...
• NodeMath＃、NodeOperatorのオプションの引数のセットをリストにできる形式にして、ドロップダウンボックスに簡単に入力できるようにしたいと思います。 今のところ、彼らはクラスを利用したばかりのメンバーであるため、それらを識別するのは少し難しいです。 コーディングにまだ便利な良い解決策がわかりません。 たぶん、クラスのメンバーとして定義された後、それらをリストに集めるだけなので、それらのリストを追加するだけですか？
• NodeTransformedNormal、NodeTransformedPositionは、コードを見ずにそれらが何であるかを理解するのは困難です。 それらは世界空間、ビュー空間、オブジェクト空間にありますか？ 「変換された」は非常に一般的な用語であり、単に行列を掛けることを意味します。 今からそれらのコードを見ていきます。
• NodeUVとNodeColorが、それぞれ2チャネルと1チャネルに制限されるのではなく、インデックスを取得できるようにします。 繰り返しになりますが、これらが汎用化されていることを確認したいと思います。実際には、特定のチャネルのセットにハードコーディングするのではなく、文字列またはいくつかのプリセットの1つを渡します。 一部の変数に専用のコードパスを設定することはできますが、特殊なケースの処理では認識されない名前の一般的なものにフォールバックします。

その他のフィードバック：

• 複数のBRDF、基本的には2つの標準BRDFを含むグラフを作成し、それらの間でエネルギー保存を行いたいと思います。 PRを取得したら、この機能を追加したいと思います。 それはシステムをより一般的でより強力にするでしょう。

@bhoustonうわー！ ありがとうございました！

リクエスト属性、フォルダーの編成、NodeTime、NodePosition、NodeNormal、NodeViewが改訂されました。 +3の例も追加しました。

演算子と行列では、 integerおよびmatrix変換との互換性を追加する必要があります。 これは、float / vector＃のように自動的に実行されます。 次のアップデートのために十分な作業があります。：sweat_smile：

明日はPRをします。 私はまだいくつかのことを検討する必要があります。

@sunag ：

これはバグだと思います：

addGui( 'metalnessA', roughnessA.number, function( val ) {

                        roughnessA.number = val;

                    }, false, 0, 1 );

これはバグだと思います：

ありがとう！

サンプルページに移動して、PBRノードグラフが3未満であることがわかりました。

<3
最終改訂の変更
https://github.com/sunag/sea3d/commit/a2e3813b53902331e91dbc0f6bae0136a384ad0c

NodeMaterial rev 4 + NodePass

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_postprocessing_nodes.html

ニース！

後処理にノードを使用することを提案するつもりでしたが、最初の部分が完了するのを待っていました。 くそー、それは美しいです！

NodeMaterial rev 5 + LightNode

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

肌

トゥーンシェーディング

++ color-adjustmentおよびplush例。

Niiice！

subsurface scattering ：sweat_smile：

これは、将来のアップデートで機能する一種のシェーダーです。

http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

😮！

素晴らしいNodeMaterialをありがとう！

私はいくつかのコメント/バグがあります：

• 末尾の空白は関数ノードを壊します

var n1 = new THREE.FunctionNode(" float mul_2_float(float x) { return x*2.0; }"); // problem
var n2 = new THREE.FunctionNode("float mul_2_float(float x) { return x*2.0; }"); // ok

• 関数ノードのintパラメーターに問題があります

floatパラメーターを使用した作業例：

var floatFuncNode= new THREE.FunctionNode("float mul_2_float(float x) { return x*2.0; }");

var funcCallNode = new THREE.FunctionCallNode(floatFuncNode);
funcCallNode.inputs.x = new THREE.FloatNode(0.2);

var colorResNode = new THREE.OperatorNode(new THREE.ColorNode(0x00ff00),
    funcCallNode, THREE.OperatorNode.MUL);

var mat = new THREE.PhongNodeMaterial();
mat.color = colorResNode;

intパラメーターを使用した壊れた例：

var intFuncNode= new THREE.FunctionNode("float mul_2_int(int x) { return float(x)*2.0; }");

var funcCallNode = new THREE.FunctionCallNode(intFuncNode);
funcCallNode.inputs.x = new THREE.IntNode(1);

var colorResNode = new THREE.OperatorNode(new THREE.ColorNode(0x00ff00),
    funcCallNode, THREE.OperatorNode.MUL);

var mat = new THREE.PhongNodeMaterial();
mat.color = colorResNode;

• 提案：FunctionCallNodeコンストラクターで関数パラメーターを渡す

//current:
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode);
funcCallNode.inputs.param1 = new THREE.FloatNode(1);
funcCallNode.inputs.param2 = new THREE.ColorNode(0x0f0f0f);

// proposed:
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode, 
    { param1: new THREE.FloatNode(1), param2: new THREE.ColorNode(0x0f0f0f) } );

// and, i think suitable in some cases: 
var funcCallNode = new THREE.FunctionCallNode(floatFuncNode, 
    [ new THREE.FloatNode(1), new THREE.ColorNode(0x0f0f0f) ] );

• PhongNodeMaterialはバンプマップと互換性がありますか？

さらにいくつかのメモ：

• 「生の」NodeMaterialのフラグメントシェーダーのPositionNode.LOCALの問題：

var material = new THREE.NodeMaterial(
        new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.PROJECTION ) ),
        new THREE.RawNode( new THREE.PositionNode( THREE.PositionNode.LOCAL ) )
    );

結果のシェーダー：

varying vec3 vPosition;
void main(){
gl_Position = (projectionMatrix * modelViewMatrix * vec4( position, 1.0 ));
vPosition = transformed;
}

varying vec3 vPosition;
void main(){
gl_FragColor = vec4(vPosition,0.0);
}

おそらく「変換された」機能は、Phong / StandartノードマテリアルからNodeMaterialに移動する必要があります

• ConstNodeの使用法

    var material = new THREE.NodeMaterial(
        new THREE.RawNode( 
            new THREE.OperatorNode(
                new THREE.PositionNode( THREE.PositionNode.PROJECTION ),
                new THREE.ConstNode("float TWO = 2.0;"),
                THREE.OperatorNode.MUL)
            ),
        new THREE.RawNode( new THREE.ColorNode( 0xff0000 ) )
    );

その場合、結果シェーダーには次のものが含まれます。
gl_Position =（（projectionMatrix * modelViewMatrix * vec4（position、1.0））* TWO）;
ただし、TWO定数は宣言されていません。 それは私の間違いですか、それともバグですか？
また、ConstNodeはセミコロンに敏感であるため、「float TWO = 2.0」は解析されません。

ありがとう@dimarudol ！ できるだけ早くメモをお気軽にご希望の場合は、新しい改訂を行います。

ただし、TWO定数は宣言されていません。 それは私の間違いですか、それともバグですか？

この使用方法と、たとえばmaterial.include( node )などの資料で検討します。

その時点で、グローバル定数を試してください。

var TWO = new THREE.ConstNode("float TWO = 2.0;");
THREE.NodeLib.add( TWO ); // global

 var material = new THREE.NodeMaterial(
        new THREE.RawNode( 
            new THREE.OperatorNode(
                new THREE.PositionNode( THREE.PositionNode.PROJECTION ),
                TWO,
                THREE.OperatorNode.MUL)
            ),
        new THREE.RawNode( new THREE.ColorNode( 0xff0000 ) )
    );

こんにちは@sunag 、私はSea3d Flowで遊んでいます、そしてそれはかなりクールに見えます。 どこかに公式のレポがあるかどうか尋ねたかっただけです。
よろしく。

こんにちは@rraallvv 、まだ、それはすでに準備ができています。 できるだけ早くニュースを投稿します。

@sunagに感謝し

こんにちは@sunag ！ あなたは本当に良い仕事をしました！
質問があります：私のプロジェクトでは、ノード構造を使用するのは素晴らしいことですが、頂点ごとの色（および頂点ごとのカスタムフロート値）が必要ですが、ノードシステムでは、メッシュ全体に適用されるのはcolorNodeとfloatNodeだけです.. bufferColorNodeのようなものを（THREE.BufferAttributeを使用して）簡単に実装する方法があると思いますか？

たとえば、私はこのシーンを持っています：

各頂点には独自の色があります。 THREE.BufferAttributeとTHREE.ShaderMaterialで可能ですが、コードに同等のものはありません。

私は次のようなものが必要になります：
`let material = new THREE.StandardNodeMaterial（）;
let texColorMap = new THREE.TextureNode（new THREE.TextureLoader（）。load（ "colorMap.jpg"））;
customData = new THREE.BufferFloatNode（new Float32Array（...）、 "data"）; // 2番目のパラメータは属性の名前です

colorMap = new THREE.FunctionNode（[
"vec3 colorMap（sampler2D texColorMap、float data）{"、
"return vec3（texture2D（texColorMap、customFunc（data）））;"、// customFuncは、データに応じてvec2を返します
"}"
] .join（ "n"））;

colorMapCall = new THREE.FunctionCallNode（colorMap）;とします。
colorMapCall.inputs.texColorMap = texColorMap;

material.color = colorMapCall;
material.build（）; `

ちなみに、FunctionNodeにはsampler2Dパラメータが使えないようです...

私は何かが足りないのですか？
私は必要に応じて助けることができると思います:)

@martinRenouありがとう！ うーん、多分今のようなもの：

bufferGeometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );
...
colorMapCall.inputs.data = new THREE.ColorsNode(); // send color.x to float slot

動的ジオメトリ属性をノードに割り当てることについては、まだ考えていませんでした。 しかし、これは良い考えだと思います...多分THREE.BufferAttributeNodeようなもの...

@sunagあなたの答えに感謝します:)
やってみます。 よろしければ、THREE.BufferAttributeNodeの作業を開始します。今のところ、まだコードを読んでいて、構造を理解しようとしています。

1. THREE.FunctionNodeに関しては、前述したように、colorMapとして使用されるため、パラメーターにsampler2Dを設定する必要があります。ピクセルの色はtexture2D（）で計算され、texture2D（）の2番目のパラメーターはカスタムデータを使用して計算されます。 （これは、たとえば温度です）。
   vec3パラメーターを使用するというアイデアは、ユーザーにわかりやすくするためのものだったと理解していますが、FunctionNodeはsampler2Dパラメーターもサポートできますね。
2. さらに、THREE.FunctionNodeはフラグメントシェーダーにのみ書き込むことができますが、頂点シェーダーにも書き込むことができると便利ではないでしょうか。

これは私の使用例であり、IsoColorと呼ばれます。これは、色がデータ（温度、圧力など）に対応しているためです。赤->高温、青->低温：

1. THREE.IsoColorNode（ダイアグラムのFunctionNodeを置き換える）、および科学的視覚化にとって非常に興味深い他のノードを作成することを考えています。 あなたはそれに興味がありますか？ @mrdoobあなたも興味がありますか？

THREE.FunctionNodeに関しては、前述したように、colorMapとして使用されるため、パラメーターにsampler2Dを設定する必要があります。ピクセルの色はtexture2D（）で計算され、texture2D（）の2番目のパラメーターはカスタムデータを使用して計算されます。 （これは、たとえば温度です）。 vec3パラメーターを使用するというアイデアは、ユーザーにわかりやすくするためのものだったと理解していますが、FunctionNodeはsampler2Dパラメーターもサポートできますね。

私はあなたの必要性を今理解しています！ @dimarudolのこれと他のメモのPRを作成します...

さらに、THREE.FunctionNodeはフラグメントシェーダーにのみ書き込むことができますが、頂点シェーダーにも書き込むことができると便利ではないでしょうか。

私はこれをテストしていませんが、そうだと思います。

さらに2つの例を追加しました。

• sampler2Dはtriangle-blur例にあります
• カスタムBufferAttributeはcustom-attribute例にあります

それは機能していますが、私はまだ洗練されたコードを提供します...

https://github.com/mrdoob/three.js/pull/9636

わお ！ あなたは本当に良い仕事をしました、それは私のためにも働いています：smile：

お疲れ様でした！

こんにちは@sunag 、

今のところ、パラメータ（color、alpha ...）としてマテリアルに送信する必要があるため、「void」タイプのFunctionNodeを使用することはできません。 たとえば、クリッププレーンFunctionNodeを実装する場合、実行したいのは次のようなシェーダーパーツをライトすることだけです。

void clipPlane(vec4 plane){
 if(dot(position, plane.xyz) > plane.w) discard;
}

しかし、それを材料に与えることは不可能です...解決策は、アルファ運河であるフロートを返すことですが、それはクリーンで最適化されていません。 そのようなマテリアルにいくつかのvoid関数を追加するのはクールだと思いませんか？

var clipPlane = new FunctionNode([
"void clipPlane(vec 4 plane){",
" if (dot(position, plane.xyz) > plane.w) discard;",
"}"].join("\n"));
var clipPlaneCall = new FunctionCallNode(clipPlane);
clipPlaneCall.inputs.plane = myVec4Node;

var threshold = new FunctionNode([
"void threshold(float upperBound, float lowerBound, float data){",
" if(data < lowerBound) discard;",
" if(data > upperBound) discard;",
"}"].join("\n"));
var thresholdCall = new FunctionCallNode(threshold);
thresholdCall.inputs.upperBound = myFloatNode1;
thresholdCall.inputs.lowerBound = myFloatNode2;
thresholdCall.inputs.data = myAttributeNode;

var myMaterial = new StandardNodeMaterial();
myMaterial.color = ...
myMaterial.alpha = ...

// voidFunctions is not a good name I'm not inspired...
myMaterial.voidFunctions = [clipPlaneCall, thresholdCall];

より「デザイン」の例として、このテクスチャでティーポットに穴を開けたい場合は、次のようにします。

私はそのようなことをしたいと思います：

var holes = new FunctionNode([
"void holes(vec3 texColor){",
" if (/*texColor too much dark*/) discard;",
"}"].join("\n"));
var holesCall = new FunctionCallNode(holes);
holesCall.inputs.texColor = new TextureNode(LoadTexture("holes-text.jpg"));

var myMaterial = new StandardNodeMaterial();
myMaterial.voidFunctions = [holesCall];
myMaterial.side = THREE.DoubleSide;

もう1つは、シェーダーの関数の順序を制御できないことです。 可換ではない関数がある場合、結果を制御できません...

この例を見てみましょう：

var transparencyPlane = new FunctionNode([
"float transparencyPlane(vec 4 plane){",
" if (dot(position, plane.xyz) > plane.w) return 0.5.;",
" return 1.;",
"}"].join("\n"));
var transparencyPlaneCall = new FunctionCallNode(transparencyPlane);
transparencyPlaneCall.inputs.plane = myVec4Node;

var displacement = new FunctionNode([
"vec3 displacement(vec3 vector){",
" return position + vector;",
"}"].join("\n"));
var displacementCall = new FunctionCallNode(displacement);
displacementCall.inputs.vector = myVec3Node;

var myMaterial = new StandardNodeMaterial();
myMaterial.transform = displacementCall;
myMaterial.alpha = transparencyPlaneCall;

ポイントが透明面の後ろにあり、変位のために超えている場合、「transparencyPlaneCall」が「displacementCall」alpha = 1の前に呼び出された場合、およびalpha = 0.5の後に呼び出された場合。
では、関数呼び出しの順序を設定したいと思います...意味がわかりますか？

こんにちは@martinRenou

うーん、約void関数はスロットで使用するためにおそらくProxyNodeです。これは順序に従うか、コードの開始時または終了時に初期化する必要があるためです。おそらくfunctionsStartまたはfunctionsEndスロット...

alphaが0の場合にalphaスロットを使用すると、自動的に破棄されます。
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L180

そこで、関数呼び出しの順序を設定したいと思います...

シーケンスが存在します。ここを参照してください。
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L122

関数の順序は、単純なdependenciesアルゴリズムを使用して自動的に実行され、前のスロットにcolor FunctionCallを配置する必要があります。たとえば、 colorが最初にspecularが2番目になります。

この例は、 fragmentからtransparencyPlaneCallとvertexからdisplacementCall 2つの異なるシェーダーコードです。

変数（ varyingとローカル）を使用して入力ではなく展開し、constのみが非常に興味深いと思います。 多分VarNode ..。

完了r6- https：//github.com/mrdoob/three.js/pull/9636

アルファが0の場合にアルファスロットを使用すると、自動的に破棄されます。

申し訳ありませんが、表示されませんでした。

関数の順序は、単純な依存関係アルゴリズムを使用して自動的に実行されます。たとえば、FunctionCallを前のスロットに配置する必要があります。たとえば、色は最初に鏡面反射で、次に鏡面反射です。

実際、ピクセルを破棄する関数が最初に呼び出されることを確認したかっただけです。 関数の直後にアルファを破棄する場合は、アルファを使用するのが良いと思います：smiley：

この例は、2つの異なるシェーダーコードです。フラグメントからtransparencyPlaneCall、頂点からdisplacementCallです。

右 ！ ですから、それは良い例ではありませんでした。 私の間違い。

完了r6-＃9636

いいね ！ あなたの答えをありがとう。

変数（変数とローカル）を使用して入力ではなく展開し、constのみを使用することは非常に興味深いと思います。 多分VarNode..。

良さそうですが、頂点シェーダーで関数を明示的に記述し、varNodeを使用して、フラグメントシェーダーの関数で使用できるのは興味深いことです。 思いませんか？

@sunag
頂点シェーダーでFunctionNodeとともにAttributeNodeを使用することに問題があると思います。

私がこのようなコードを持っている場合：

var customData = new THREE.AttributeNode("data", "float");

var myFunc = new THREE.FunctionNode([
 "vec3 myFunc(float data){",
 " return vec3(data, 0., 0.);"
 "}"].join("\n"));
var myFuncCall = new THREE.FunctionCallNode(myFunc);
myFuncCall.inputs.data = customData;

material.transform = myFuncCall;

シェーダーは次の順序で記述されます。

...
varying float nVdata;
attribute float data;
...
float myFunc(float data){
 return return vec3(data, 0., 0.);
}

void main(){
...
transformed = myFunc(nVdata); // We use nVdata but it is not initialized
...
nVdata = data;
...
}

簡単な修正は、nVdataをデータに初期化することです。

良さそうですが、頂点シェーダーで関数を明示的に記述し、varNodeを使用して、フラグメントシェーダーの関数で使用できるのは興味深いことです。 思いませんか？

うん！ アイデアは、 varyingをVarNodeとして使用する頂点/フラグメントシェーダーとのより良い通信です。 これは、 keywords機能に最適です。

最小限のvarying例を作成しましたが、 void functionに対する解決策はまだありません。

頂点シェーダーでFunctionNodeとともにAttributeNodeを使用することに問題があると思います。

修正済み-https：//github.com/mrdoob/three.js/pull/9681

こんにちは@sunag 、私はあなたの変化する例を見ました、そしてあなたがしたように変化をmtl.transformに入れることは私には奇妙に聞こえます...多分あなたはvoid関数を作成することが可能になるときにこれを変更しますか？
ただし、キーワードには：smiley：が含まれていることをお勧めします。

実際、これらの変数をmtl.varyings （mtl.varyingsは配列）に次のように配置することをお勧めします： mtl.varyings.push(myVar) 。 同じアイデアを使用して、次のような頂点シェーダーとフラグメントシェーダーに関数を配置できます： mtl.vertexFunctions.push(myVertexFunctionCall) 、 mtl.fragmentFunctionsと同じ方法。

このようにして、これらの変動に対して多くの計算を実行し、それらを効果に使用することができます。 それらの関数はvoid関数になります。

NodeMaterialLoader https://github.com/mrdoob/three.js/pull/13070

ノードが視覚的に接続されている上記のスクリーンショットのように、このAPIを使用してこれを精神的に再作成するにはどうすればよいですか？ コンストラクターが他のノードを受け入れることがわかります。 これは、あるノードからの出力（コンストラクターに渡される）が別のノードに入力される（コンストラクターでノードを受け取る）方法ですか？ ノードには最大で1つの出力がありますか？ コンストラクターを介して別のノードに入力できるノードの数はいくつですか、それとも制限されていますか？

@trusktrもちろん、これがビルド時のCPUと実行時のGPUを消費するノードの数にfloatからvec2またはvec3への変換は自動的に行われ、最適化のために複数回使用される場合はキャッシュに保存されます。 （ TempNode ）。

スクリーンショットでは、各ノードはクラスです。例：表示されているPositionNodeは次のとおりです。
https://github.com/mrdoob/three.js/blob/789efa65bafe022e178c7e93e0985a7607a54403/examples/js/nodes/accessors/PositionNode.js#L5

@mrdoob @sunag NodeMaterialコードの現在のステータスと、それがthree.jsロードマップにどのように適合するかについてコメントしていただけますか？

理論的には、次のようないくつかの目的でノードを使用できます。

• glTFスペック/グロスPBRマテリアルをNodeStandardSGMaterialとして実装します。
• マップごとのUVセットと変換をサポート
• インスタンス化により組み込みマテリアルの使用を簡素化

しかし、すべてのノードファイルのGLTFLoaderに依存関係を追加することを正当化するのは困難です。 そしておそらく、より積極的に使用せずにノードをsrc/*入れることを正当化するのは難しいでしょう。 鶏卵。 😅

NodeMaterialの長期計画を知って、どの機能が関連している（または関連していない）かを推測することは役に立ちます...これにはさらに開発が必要ですか？ 他の貢献者が助けるためにできることはありますか？

@sunagええ、この時点でさらに計画があるかどうかも知りたいと思います。

理論的には、次のようないくつかの目的でノードを使用できます。

• glTFスペック/グロスPBRマテリアルをNodeStandardSGMaterialとして実装します。
• マップごとのUVセットと変換をサポート
• インスタンス化により組み込みマテリアルの使用を簡素化

これらの特定の問題には、コアを変更することなく、既存のAPIで解決する方法の例があります。

インスタンス化：
https://github.com/mrdoob/three.js/pull/10750 （本格的、コアに触れますが、モンキーパッチを適用できます）
https://github.com/mrdoob/three.js/pull/14166（onBeforeCompileを介した単純なマテリアル拡張）
https://github.com/mrdoob/three.js/pull/14012（mokey-patchingによるシンプルなライブラリ拡張）

マップごとのUVセット
https://github.com/mrdoob/three.js/pull/14174

独自のクラスとしてのスペックグロス
https://github.com/mrdoob/three.js/pull/14099

おそらくそれはNodeMaterialをコアに入れることへの切迫感を和らげるのに役立つかもしれません:)。

このトピックをフォローしている人のために、 https：//github.com/mrdoob/three.js/pull/14149で進行中の議論があり

＃14149からのスレッドへの参加：

tl; dr — NodeMaterialは、マテリアルシステムにとって非常に有望な次のステップのように思えます。 NodeMaterialの採用は、現在いくつかの理由で制限されていると思います。

• 多くの個別のファイルを含めることの摩擦
• ビジュアルエディターの欠如
• 比較的少数の例、ドキュメント

NodeMaterialをsrc/に入れるべきかどうかという質問は、 @ mrdoobと@sunagに任せますが、（少なくとも）上記の3つの問題に対処する必要があると思います。 また、他の人がNodeMaterialを現在のマテリアルシステムの代替として見ているのか、完全な代替として見ているのかを知ることも役立ちます。

臨界量はGLTFLoaderの利害関係者によって形成されているようであり、私の（主観的な）観察は、BeforeRender（いくつかの例）で不適切に文書化され、BeforeCompile（1つの例）でさらに文書化されていないために必要が生じたということです。

@pailhead私は、開発者でもあるA-Frameのワークフローの問題に対処するためにGLTFLoaderの保守を開始しました。 特定のフォーマットをロードするのではなく、より有用なマテリアルシステムが目標であることに同意します。 ノードマテリアルを統合する（または統合しない）方法の決定は、three.jsライブラリのエンドユーザーにとってのメリット（機能、柔軟性、わかりやすいAPI）に基づいて行う必要があります。

onBeforeCompile onBeforeRenderフックと

1. 比較的単純な機能であっても、WebGL構文をマテリアルAPIに強制します
2. コアマテリアルシェーダーのストリング操作に依存し、コアマテリアルへの変更を時間の経過とともに難しくし、より脆弱にします
3. アーティストへの親しみやすさ
4. 実質的にシリアル化不可

デコレータ（例：＃14206）は確かにユーザーの観点からこれを改善しますが、マテリアルの将来の機能開発が既存のマテリアルシェーダの上にますます複雑になるデコレータに基づく場合、それは私の意見では保守性の危険です。

ノードマテリアルは完全ではありませんが、他のグラフィックツールで広く採用されており、次のような重要な利点があります。

1. 柔軟で構成可能
2. 必要に応じてプレーンシェーダーへのアクセスを削除することなく、ライブラリの内部WebGLシェーダーからの抽象化レイヤーを保持します
3. アーティストやゲーム開発者に広く人気のある素材表現
4. 少なくともある程度シリアル化可能です（他の形式への変換はまだ難しいですが）

これはおそらく、 onBeforeCompileは非推奨にすべきだと言っているように聞こえますが、そうするつもりはありません。それが定着するのを見てうれしいです。例を歓迎します。 しかし、それは私がA-Frameまたはthree.jsユーザーに必要以上の場合に向けたいAPIではありません。 他の3Dツールのマテリアルシステムとは比べ物にならないでしょう。

• 多くの個別のファイルを含めることの摩擦

これは摩擦であってはなりません。 バンドラーを使ってツールを作っている人の数を調べるために、なんらかの調査などを行うと便利だと思います。 jsファイルをhtmlファイルに手動でインポートすることは2018年のアプローチではありません。これは私が見つけることができる唯一の数であり、これらすべてのユーザーがノードで実行されるものでそれを使用していると仮定できます。

スクリプトファイルを手動で含めるときにこれがどのように機能するかを心配するよりも、ツリーの揺れとこれを適切にimport/exportできるようにすることに、より多くの努力を払いました。

• ビジュアルエディターの欠如
• 比較的少数の例、ドキュメント

これがコアになる前に、これらは起こるべきだと思います。 スペキュラーグロスマテリアルは、 GLTFLoaderと結合されていない例である必要があります。 それが/srcまたは/examplesにあるという事実は、無関係である必要がありますか？

@donmccurdy

onBeforeCompileフックとonBeforeRenderフックは無限に柔軟です。 基になるシェーダーを操作または交換できる範囲に実際的な制限はありません。

私は実際にこれを主張しているのではなく、 onBeforeRenderようなフックはコードを構造化するための異なるアプローチを可能にするが、現在GLTFLoaderで使用されているので使用すべきではないと主張しています

onBeforeCompile間違いなく制限があり、不適切な名前が付けられている可能性があります。 この文脈で指摘するのに良いことは、最近のPR＃14214です。 何が消えたのか（ build()を優先してneedsUpdate ）を見るとすぐに、そこにonBeforeCompileが表示されることがわかりました。 #include <foo>ステートメントを置き換えないと、この関数の後、実際のコンパイルの前に解析されるため、 onBeforeParseとして使用しました。 このPRでは、 onWillRefreshMaterialとして使用されています。

私が伝えようとしている哲学は、おそらくこれらの種類のコールバックにはもっと細分性があるはずだということです。 それらはもっとあるはずであり、それらに名前を付けるときは細心の注意を払う必要があります。

＃14214は、 NodeMaterialコアに含める必要がない理由の良い例です。 少なくとも/renderer何とも結合されておらず、バンドルされていません。

1. 比較的単純な機能であっても、WebGL構文をマテリアルAPIに強制します

この問題は以前に聞いたことがありますが、詳しく説明されていません。 なぜこれが問題なのですか？ とにかく「マテリアルAPI」とは何ですか？ 私はいつもそれを「ここにいくつかの一般的な表面シェーディング材料があります」と見ていました。

動的マップが必要な場合、 material.map 、または 'material.color'がNodeTexture 、 GLSLTexture 、 TextureTexture取得できなかった理由はわかりません。

myMaterial.color = new SomeNodeGraph() //outputs vec4 in the end

myMaterial.color = new GLSLInput() // inputs various documented variables, outputs some vec4

myMaterial.color = new THREE.Color()

myMaterial.color = new CustomColorGradientTopBottom() // dunno if its Node, GLSL, regular color whatever, i just know it's compatible with the slot

1. コアマテリアルシェーダーのストリング操作に依存し、コアマテリアルへの変更を時間の経過とともに難しくし、より脆弱にします

私のポイントは、これはonBeforeCompileすでにある程度可能ですが、これらの変更はさらに難しく、あなたが説明しているものよりも壊れやすいということです。 私はすでに私の職業生活の中でこれに手を差し伸べており、それに依存するいくつかのコードを持っています。 それがどれほど壊れやすいか、多くのストレスを引き起こします:(

あなたが指摘したデコレータ＃14206は、それ自体が3年間停止しているこのPRのために、1年以上停止しています。 私の主観的な感覚は、＃14206を使用すると、これらのデコレータを作成できるようになり、面倒でなく、壊れにくくなるということです。 これらのファントムプロパティが定義されていない限り、まったく影響を与えないのは30行のコードです。 onBeforeCompileの形でぶら下がるロープがすでに与えられている場合は、もう少し人道的にしてみませんか？ ：笑顔：

最後に、許容できる脆弱性のレベルとそうでないものを自分で決めたいと思います。

1. アーティストへの親しみやすさ

これが、アーティストが視覚的なツールと、グラフを保存するためのある種のフォーマットを持っている必要がある理由です。 それらを「ベイクされた」GLSLまたは実行時にNodeMaterialを構築するものとして消費することは、ユーザーに与えられる選択である必要があります。

アーティストはシェーダーを作成でき、エンジニアはロードプロセスを最適化するためにシェーダーを「コンパイル」するように要求できます。 一人で作業しているアーティストは、グラフをロードするだけで、何らかの理由で簡単になります（「コンパイル」にはより多くの労力がかかります）。

また、なぜ、そしてどのようにアーティストがここで考慮されているのですか？ いくつかの統計がありますか、平均的な「アーティスト」ユーザーはどのように見えますか、なぜ彼らは3.jsで作業していて、単一性ではないのですか？ それはどのようなパイプラインですか。 エンジニアが関わっていますか？何らかの技術ディレクトリが採用しているthree.jsと通信するスタンドアロンツールなどはありませんか。週に4万npmのダウンロードはアーティストではないと思います。 この種のインストールは一部のビルドツールで使用されており、手動でインポートされる可能性は非常に低いと想定されています。

これとポイント2の両方で、私のユースケースにはアーティストは含まれず、通常は他のユーザーも含まれません。 ビルトインマテリアルの上に構築されたマテリアルシステムを成長させています。 私は、接線属性、深さの剥離、さまざまなクリッピングなどを使用して、独自の通常の解凍を使用します。気になるのは、そのコードを社内で構造化し、上記のクラスに内部をほとんど公開しないことです。

1. 実質的にシリアル化不可

私はこれについてあまり知りません、そして私は以前にこの議論を聞いたことがあります。 誰かが私に問題のある領域を指摘してくれたら、私はいくつかのコードを見て喜んでいます。 問題についての私の理解は非常に限られているので（ほとんどない）、なぜそれが単に書くのに十分ではないのか理解できません

"materialFoo": {
  "color":"#ff0000",
  "specularMap": "some_path.jpg",
  "glossiness": "0.5"
}

NodeMaterialで構築されたスペックグロスマテリアルがあるとすると、グラフ全体をシリアル化するのではなく、入力のみをシリアル化する必要がありますか？ SpecGlossマテリアルのシリアル化が何であれ、同じように見えるはずですか？ 私はおそらくここで多くを逃しています、いくつかのポインタをいただければ幸いです。

再：シリアル化

追加するだけで十分でしょうか：

https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L160

customSerializer( data )

そして、

SpecularGlossMaterial.prototype.toJSON = ()=>{
  Material.prototype.call(this, undefined, data =>{
    if ( this.roughness !== undefined ) data.roughness = this.roughness;
  })
}

specularMapはハードコーディングされているため、実際にはシリアル化されます。
https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L213

しかし、これはちょっと奇妙に感じます。 Materialクラスは、すべての組み込みマテリアルの内部を認識しているようです。

@donmccurdyこのディスカッションが必要な場合は、デコレータPR＃14206で行う方がよい場合があります。 オフライン私はベイエリアのどこでもビールやコーヒーを飲みながらの作業セッションに参加できます：slightly_smiling_face：

複数のファイルが摩擦であってはならないこと、そしてNodeMaterialをsrc/入れること自体が議論ではないことに同意しました。 これは、NodeMaterialがまだ頻繁に使用されていないいくつかの理由の1つに過ぎず、それを解決する他の方法があります。 そして私は確かに、NodeMaterialをsrc/に入れるため、あるいはexamples/jsまたは別のビルド出力で採用を推進するために、より多くのドキュメントが前提条件になることに同意します。

私は一般的な方向性としてNodeMaterialについて楽観的ですが、 src/意味をなすには、さらにいくつかのことが必要だと思います。 上記のように、特にWebGL2と（最終的には） WebGPUのサポートに移行する際に、マテリアルシステムに新しい機能を配置するためのパスとしてonBeforeCompileと文字列操作を使用することを非常に心配しています。 これらの2つの選択肢が唯一の選択肢であるとは限りませんが、（2つのうち）これらは私の考えです。

他の点では、私たちはお互いの懸念や好みを理解しているように見えますが、それでも同意しません。 私はこの時点で書く時間があるすべてを書きました、そしてこれをしばらくの間座って、他の人に加重させます。これについて徹底的で丁寧な議論をありがとう。 🙂

Multiplyを使用したアンビエントオクルージョンテクスチャを拡散テクスチャに配置したいので、これを試しています。

const aoNode = new OperatorNode(
        new Math1Node( aoTexture, Math1Node.INVERT ),
        aoScale,
        OperatorNode.MUL
    );
material.ao = aoNode;

これは私のAOテクスチャです

残念ながら、モデルでアンビエントオクルージョンが発生しています。

それをするためのアイデアはありますか？
これが私の質問を投稿するのに適切な場所であることを願っています。

ありがとう！

既存のノードベースのツールからthreejsのマテリアルへのマッピングの方向で考えられるようにしたいと思います。 したがって、適切なドキュメントとともにsrc /のNodeMaterialを確認したいと思います。

@IARI

既存のノードベースのツールをリストしていただけますか？

@donmccurdy

返信してくれてありがとう ：）

残念ながら、私たちはまだお互いを理解していないと思います。 この投稿を読む時間があれば、次のようなものがあります。

onBeforeCompileと文字列操作をマテリアルシステムに新しい機能を追加するためのパスとして使用することを非常に心配しています。

onBeforeCompileはひどいです、私は同意します、これらのスレッドのいずれかに関与している唯一の理由は、 onBeforeCompileの文字列操作よりも優れていると思う＃13198が欲しいということです。

これは、three.jsに新しい機能を追加するためのパターンであってはなりません。 これにより、ユーザーはアプリケーションに新しい機能を追加できるようになります。 @bhoustonが、このようなことを行うためにフォークを維持することについての調査結果を共有しなかったのは悲しいことです。 彼らがシェーダーを変更するためのより良いフレームワークを作ったのか、それとも実際にこの機能のコアをハッキングしたのか、私は興味があります。

チャネルごとのUV変換の場合、その例、またはnpmモジュールを作成します。 毎週3人がダウンロードする場合、それはおそらくコアにあるはずのないものです。 2万人がダウンロードした場合、そもそもthree.jsがどのように設計されているべきかということでしょう。

onBeforeCompileは、ノードマテリアル（ https://github.com/mrdoob/three.js/pull/14214 ）にとって重要であるように思われるため、文字列操作だけに使用されるわけではありません。

これらを行うためのonBeforeCompileとNodeMaterialがあります。3番目のオプションをリクエストします。 onBeforeCompileよりもはるかに便利で、 NodeMaterialよりもはるかに小さいです。

最近の例で：
https://github.com/mrdoob/three.js/pull/14206

古い議論：
https://github.com/mrdoob/three.js/pull/13198

@pailhead初心者のために、いくつかの基本的な
UnitysShadergraphをいじってみるのも面白いと思います。

@claudioviola material.shadowを追加するか、diffuse material.color = diffuse * oclusion掛けることができます。 閉塞は間接光に依存します、 AmbientLight 、 HemisphereLight .. ..

@IARI

私は7.5ギガのUnityをダウンロードしてShaderGraphをチェックしています：slightly_smiling_face ::それがシェーダーグラフを構築するためのツールとして適格かどうかはわかりません、それはユニティのためのシェーダーグラフを構築するためのツールだと思います。 グラフを作成するためのスタンドアロンツールはありますか？ これによってグラフが保存されるファイルの種類と、 /src three.jsとNodeMaterialにどのように転送されるかを確認したいと思います。

@pailheadは、@pailheadと何日も議論することは役に立たないと思います。 プロジェクトは一人の個人に見られるべきではないと思います。

これは急いでおらず、強制されていません。 Sunagはこの数年前に追加しました。 現在、これが必要であり、他の代替手段がうまく機能していない（たとえば、マージされている）ので、このパスを試してみましょう。

すべての主要なツール、3DS Max、UE4、Blender、Unity、Maya、Sketchfabはシェーダーグラフを使用します。 この点でthree.jsが永続的に不利になるはずだと主張することは、three.jsにとって不公平に思えます。

このグラフベースのシェーダーシステムが現時点で完璧かどうかはわかりませんが、コアになったら、引き続き作業を続けることができます。

three.jsプロジェクトの95％を壊さないように、今後も何らかの形でPhoneMaterial、StandardMaterialなどのAPIをサポートし続けることを強く主張します。そうすることは無責任です。 また、このような単純化された単純なインターフェイスを使用することもできます。

私には、これがコアに移動するのを防ぐ能力も欲求もありません。 ブロッカーとして参照されているため、関係のないPRのブロックを解除できることを願っています。 @bhouston 、あなたと議論する

飢えた3Dアーティストとしてやりくりしたとき、ノードベースのすべてのものが好きです。 ヌケは私の好きな作曲家でした、そして私はそのようなツールを作る方法を学びたいです。 これが特に＃14231のブロックを解除することを願っています。 私はこれを自分の学習プラットフォームとして使用していますが、邪魔になる場合は投稿を停止します。ありがとうございます。

@pailhead私はそれを使ったことがありませんが、おそらく物質デザイナーについて聞いたことがありますか？ 私が理解している限り、そのツールはグラフ/シェーダーの作成を超えていますが、主にマテリアルの手続き型設計に焦点を当てていますが、それは興味深い手がかりになるのでしょうか？

それ以外は、頭のてっぺんからスタンドアロンツールを知りませんが、グーグルですばやく検索すると、次の2つが見つかりました。

• https://victhorlopez.github.io/editor/
• http://www.shaderplay.com/products/nodeflex/overview/overview.html
  面白そうだ。

ただし、2015年に@mrdoobがTwitterで投稿した、threejsノード用のこのツールもあります。更新されていないようですが、なぜだろうと思います...。

そのツールはここで参照されているようですが、何もエクスポートする方法がわかりません。 最初のリンクは素晴らしく見えますが、出力はかなりぎこちなく、GLSLと比較してあまり読みやすくありません。 それはすでにNodeMeterial 、あるいはShaderMaterialを再構築するために使用できるのだろうか。

ユニティを調べましたが、実際にはシェーダーグラフツールを見つけることができませんでした。

ところで、どういうわけかこれをブロックした場合は、必ずブロックを解除してください。 PRは2015年からです。私は8日前に最初に回答しました。

（申し訳ありませんが、これは少しオフトピックです。）
@pailhead Unityシェーダーグラフの場合：Lightweightレンダーパイプラインテンプレートを使用してUnityプロジェクトを開始する必要があります。 Unity Package Managerを開き、最新バージョンのRender-pipelines.lightパッケージを使用していることを確認してください。
これは、セットアップ中の新しいプロジェクトから開始してセットアップするためのチュートリアルです： https ：

そのSea3DFlowマテリアルノードエディタ（http://sea3d.poonya.com/flow/）は、 NodeMaterialを書いたのと同じ人である@sunagによるものです。

どうもありがとう@sunag
どうすれば間接光を得ることができますか？ それはレンダラーの値ですか、それともどのように計算できますか？

選択したオブジェクトにのみ後処理効果を適用したい（つまり、彩度を変更したい）。
ただし、ノードでのマスキング（別の方法がない場合）に関連するものは何も見つかりません。
現在、私は（ノード以外の）OutlinePassを読んでいます。これは、たくさんのデータをたくさんのバッファーに書き込みます。これは、私が望むことを達成するための実行可能な方法と見なすことができます。これはノードで。

Sea3D Flowマテリアルノードエディターは、three.jsエディターと同じようにスタンドアロンになりますか、それともその一部になりますか？ それでもSea3Dまたはthree.jsに関連する他の名前が付けられますか？ そのビジュアルエディタをthree.jsコミュニティにリリースしてくれてありがとう@sunag 。

しかし、私はノードを使ってこれにアプローチする方法について少しも考えていません。

@IARI

あなたはOutlinePassを読んでそれが何をするのかを理解することができるのであなたはGLSLを知っているようです。 また、ノードでは達成できないことを十分に理解しているようです。 コーディングの仕方を知っていれば、ノード化の仕方もわかると思いました。 さらに、コーディング方法がわからない場合は、ノード化する方法を知っている可能性があります。 切断はどこにありますか？

2016年からこれらの投稿はまったく見られませんでした。 シェーダーフロッグを見るのは面白い。 これはvim対emacsか何かとして見ることができるのだろうか。 私はSublimeTextを使うのが好きです、あなたは何か他のものを使うのが好きです。 1つはシェーダーフロッグを使用するのが好きで、もう1つはthree.jsのSea3Dエディターを使用するのが好きです。

Shader Frogがシェーダーを出力する方法が好きですが、Sea3Dのようなオープンソースではありません。

次に、これがあります。

サードパーティの製品メカニズムをThreeのコアに組み込むことは不公平な利点のように思われ、私はそれを政治的に理解していません。

私にとって、これらすべてが3つの変更なしで達成できるという事実は、それが不要であることを意味し、Three.jsがwebglラッパーAPIであり、実装固有の機能を推進することの間の境界線を曖昧にします。 シェーダーノードデータの保存はアプリ固有のものであり、私が知る限り、現在、どのソフトウェアにも共通のノードエディターの標準形式はありませんか？ 1つを強制すると、他の実装に害を及ぼす可能性があります。

@bhouston
NodeMaterialが着陸するのを待つことはできません。それは、他のPRのブロックを解除する可能性があり、生活が通常に戻る可能性があるためです。 他の声が過去にこれを阻止しようとしたようです。

@pailheadは、
プロジェクトは一人の個人に見られるべきではないと思います。

ありがとうございました。

アウトラインパスとまったく同じ方法でノードを使用して実現できなかった理由はわかりませんが、パーツを再利用できるように、読みやすく、理解しやすく、モジュール化されています。
たとえば、バッファなどに書き込む出力ノードがないのはなぜですか。

そして、私は本当にglslをよく知りません、そしてまた私はそれを見つけます-私の言い回しを許してください-シェーダーコードを読み書きするためのお尻の非常に苦痛です。 それに加えて、JavaScriptコードの文字列で愚かな配列にラップされていると非常に苦痛になります。

webpackか何かを使っていますか？

愚かな配列

.htmlファイルにインポートする必要がある場合にのみ愚かです。 webpackを使用していて、最新のJS構文を使用している場合は、GLSLを.glsl、.vs、.fsファイルに保持し、構文の強調表示などを行うことができます。

シェーダー.fs：

void main(){
  gl_FragColor = vec4(1.);
} 

javascript（お母さんに見えます、愚かな配列はありません）

import mShader from './shader.fs'

私の懸念は、何かをコーディングする方法ではなく、効果を作成する方法を具体的に尋ねているので、あなたのニーズにあまり価値がないことです。 NodeMaterial 、何千もの「この効果をどのようにシェーディングするか」という質問への扉を開きます。

ノードを使って、ルーク！

いいえ、同じファイル内の2つの異なる言語でコードを読み取る（書き込むことは言うまでもありません）必要があるのは、常に見るのが面倒です。 また、改行で結合された醜い文字列配列にすべてラップされているthreejsサンプルシェーダーコードを研究しようとしている場合、webpackは何の役にも立ちません。
とにかく、この問題はノードシステムに関するものであり、私はノードについて簡単な質問をしました-個人的なコーディングの好みについての議論ではありません-それはどこにもつながりません。

@IARI

申し訳ありませんが、どういうわけかあなたの投稿に疑問符が表示されなかったので、あなたの質問を逃しました。

これは間違いなく個人的なコーディングの好みについての議論ではありませんが、異なるという事実を考慮する必要があります。 また、「このシェーダーを作成するにはどうすればよいですか」という質問が殺到することも少し心配です。

以前は、このバーはかなり高く、人々はi don't know glslあきらめるか、「文字列の愚かな配列」を見ると諦めました。 しかし、それが低い場合は、誰もがシェーダーを作成しようとします。

あなたの質問は見つかりませんでしたが、それが何であるか興味があります。 それは...ですか：

NodeMaterialでToonShaderを作成するにはどうすればよいですか？

その場合、私は答えが何であるか興味があります。

NodeMaterialが一部の抽象化をサポートしていないため、これはできません。
NodeMaterialを使用するだけで、ノードを接続できます

たぶん、この議論は分割されることから利益を得ることができますか？ それは非常に多くの投稿であり、本当にはるか昔（2015年）にさかのぼります。 NodeMaterialは/ examplesにあるので、おそらくそれからトゥーンシェーダーを構築できます。 たぶん、あなたは別の問題を開くか、そのためにスタックオーバーフローに投稿することができ、会話の残りは新しい問題に移ることができますか？

この議論は、たるんだチャンネルなど、どこか別の場所で喜んで受け入れることができます。私は、この議論がここに属していないように感じますが、ほとんどの場合、人々を苛立たせます。

この特定のケースでは、フォーラムはたるみよりも優れている可能性があります。

@pailhead 、この議論全体は生産的であることが

@bhouston

複数の問題だと思うことを除いて、同意しました。

• nodematerialを実装する方法
• 他の関連および非関連PRをブロックする必要があります
• シェーダーの書き方を知らない人が特定のシェーダー効果を実装できるようにする方法

NodeMaterialでToonShaderを作成するにはどうすればよいですか？
その場合、私は答えが何であるか興味があります。
NodeMaterialが一部の抽象化をサポートしていないため、これはできません。
NodeMaterialを使用するだけで、ノードを接続できます

笑。 @bhoustonに同意します...これは冗談にすぎません。 あなたがそれを言う前にあなたは例webgl_materials_nodesを見ることができたでしょうか？

また、コードを使用する場合は、 FunctionNodeを使用した式を参照してください。

@sunagあなたは私を誤解したと思います。 これが現在/examplesあり、 /srcはない場合、これが一級市民になっている理由について興味がありました。 この問題は、2015年に@AndrewRayCodeによって提起されたようです。

この問題は、2015年までさかのぼり、さまざまなトピックについて話し合うことから、過負荷になっていると言いました。 誰かが「どうすればwhatever作ることができますか」と尋ねられた場合、それらはスタックオーバーフローと呼ばれます。

これがthree.jsの大規模なオーバーホールになる場合は_（これのためにユニティを特別に構成する必要があるという事実は私を少し怖がらせます）_そのような質問のためにここでgithubに専用の継続的な問題があるはずです- usage of NodeMaterial 。 現状では、ランダムなもの（＃14232）を求めている人がこのスレッドを参照しているため、コミュニケーションが煩雑になります:)

最近トゥーンシェーダーを作成する必要がありましたが、それは線、より具体的には@WestLangleyの太い線に基づいていました。 したがって、「トゥーン」シェーダーが必要な場合でも、鉱山は完全に異なっていたでしょう。 また、ファットラインをNodeMaterial移植することも含まれます。これには、誰がどのくらいの時間を知っているかがかかる可能性があります。 これらはすべて、ここで複雑になっているさまざまなトピックです。

また、コードを使用する場合は、FunctionNodeを使用した式を参照してください。

崇高なテキストを使用するようにコーディングする場合、 ShaderMaterialは私にとっては問題ありません。 FunctionNodeは必要ありません。 視覚効果を作成する場合は、おそらくビジュアルエディターを調べますが、これは私自身の好みです。 これが他のPRをブロックしたので、私はここにいるだけです:)少し前に、これができるだけ早く着陸することが実際に3つの最善の利益であることに気づきました。 この会話を解くと、おそらく物事を早めるのに役立つでしょう。 これで私は@bhoustonに同意し

ありがとうございました。

記録のために：私はトゥーンシェーダーなどには興味がありません。
私は、コードを書かない人が特定の位置に単純な事前定義された効果をプラグインできるようにするシステムを実装しています。

残念ながら、今はノードの書き方を勉強する時間がないのではないかと思います。とにかく基本的なglslコーディングに追いつく必要があるので、今のところノードなしで実装します。拡張可能ではありません。 、複数のレンダリングパスを使用しますが、ノードの実装が適切であれば1つで十分であり、読みにくくなります...

全体として、悲しいことに、私は一般的なトピックに慣れていないので、もっと基本的な理解を得る必要がありますが、私が知っていることを判断すると、ノードは本当にエレガントで拡張可能な方法でこれを行うための最良の方法です。
ブログ記事やチュートリアルなど、ノードの実装に関する情報が欲しいです。

免責事項：私は何も要求していません。漠然とした要求を上から明確にしたいと思っています。
ここで行われているすべての作業に感謝します-それは絶対に素晴らしいです。

スレッドhttps://github.com/mrdoob/three.js/issues/14232で、ノードベースのシェーダーの実装についてコメントするように求められました。 とても貧しいと思います。 私はそのアイデアが大好きですが、私の見解では実装が完全に不十分であるため、私は非常に否定的であるため、その理由についていくつかの具体的な理由を説明します。

わかりやすさ

ノードとさまざまなユーティリティクラスのコードをいくつか読んだ後、理解するのは非常に難しいと断言できます。

• 変数名は説明的ではありません
• コメントはまったくありません
• メソッド名はあいまいであるか、まったく誤解を招くものです。 （例えば、メソッド「ビルド」は何をするのだと思いますか？-推測してください）

コード構造は実に奇妙です。 このスニペットを検討してください：
https://github.com/mrdoob/three.js/blob/e2b49c017b2d1f37ab34317033a27df7b5a71d4d/examples/js/nodes/FunctionNode.js#L39 -L50

あなたは同じことを達成することができます：

return this.inputs.find(input => input.name === name);

「創発的建築」

「ノード」とは何ですか？ データ構造の定義を求めています。異なる「ノード」間の共通性がほとんどないため、これはあいまいな概念のように思われるため、ノードのように振る舞うと、ダックタイピングのように見えます。これはノードです。

関心事の分離

NodeからShaderMaterialどのように移行しますか？ 現在、これは、各ノードのさまざまなロジック、一部のビルダー、一部のキャッシュ、パーサーなどの間の責任の組み合わせです。このプロセスに対する明確な責任はありません。 NodeはNodeBuilderを使用していますか？ なに…？ NodeBuilderはノードを生成または構築するファクトリですが、実際には補助構造であることがわかったので、名前からわかります。 私が知る限り、ここで行うべきかなり明確な仕事があります：

• グラフを作成する
• 検証
• 中間表現を構築する
• 最適化
• GLSLにコンパイルする

これは、現在のコードに見られるものとはまったく異なります。

結論

優れたドキュメントとコメントがなければ、この実装は完全に不十分であると思います。 それらが整っているので、それはスパゲッティコードとデザインの欠如の問題です。 そうは言っても、これは強力なツールであり、非常に便利な概念の実用的な実装であることを認めます。

@ UsnulThree.JSでこのように

その理由は、「=>」が各入力で呼び出されなければならない関数を作成するためです。 JavaScriptでは、forループやwhileループに比べて関数呼び出しが非常に遅くなります。 したがって、コールバック指向のコードではなく、常に明示的なループを実行します。 私はそれがより冗長であることを知っていますが、それは必要です。 Three..JSはすべて、このように意図的に作成されています。

@Usnul 、あなたのデザインの懸念は非常に役に立ちます、それではリファクタリングを手伝ってもらえますか？ 皆さんのデザインのインプットと貢献に感謝すると思います。 :)

その理由は、「=>」が各入力で呼び出されなければならない関数を作成するためです。 JavaScriptでは、forループやwhileループに比べて関数呼び出しが非常に遅くなります。 したがって、コールバック指向のコードではなく、常に明示的なループを実行します。 私はそれがより冗長であることを知っていますが、それは必要です。 Three..JSはすべて、このように意図的に作成されています。

それは公正な点です。 個人的には、パフォーマンスと読みやすさはどちらか一方ではなく、スケールである必要があるという哲学ですが、一貫性は良好です。 その特定の例に関する私の主な問題は、それが配列を反復処理する一般的な方法ではないということです。 これが慣用的な方法です：

for(var i=0, count=array.length; i<count; i++){
    var element = array[i];
    ...
}

または、50行の形式のコードがあるとします。

function complex(a){
  if(a){
      //do a ton of stuff
      ...
      return result;
  }
}

それは次のように読みにくいです：

function complex(a){
  if(!a){
      //omg! not A?!11 
      return;
  }
  //do a ton of stuff
  ...
  return result;
}

@Usnulは、これらを考慮に入れるためにコードをリファクタリングするのを手伝ってもらえますか？ リファクタリングは簡単なはずだと思いますよね？ 私はCodeCompleteの大きな支持者であり、その本は私に大きな影響を与えました。

@usnulこれが気に入らない場合は、自由にリファクタリングできますか？ このように見えるかどうかは関係ありませんが、その上に構築することが重要であると私は理解しています。
これが例（またはおそらく別のリポジトリ）にある間に屈折望遠鏡が発生するのか、それとも@bhoustonが示唆しているように

@IARI

私は本当にglslをよく知りません、そしてまた私はそれを見つけます-私の言い回しを許してください-シェーダーコードを読み書きするためのお尻の非常に苦痛です。

しかし、

私もGLSLをよく知っているとは言えませんが、問題を解決するには十分知っています。 私が知っていることから、 @ usnulがここに書いたこと、および@AndrewRayCodeが以前に書いたことにほぼ同意します。 ノードのことはGLSLと比較して冗長であることがわかりました

GLSLを知らなければ、他のものと比較するのは非常に難しいと思います。 あなたが自分で書いたように、私たちがjudge on what you knowで、あなたが自分でそれを言った場合you don't know glslあなたの入力は免責事項で受け取られるべきだと思います:)

それは私が言ったようなものです：

日本はこの地球上で最悪の場所です...しかし、私は実際に日本に行ったことがありません。」

ありがとうございました。

メソッド名はあいまいであるか、まったく誤解を招くものです。 （例えば、メソッド「ビルド」は何をするのだと思いますか？-推測してください）

うわー、これが下にあるShaderMaterialとは気づいていませんTHREE.WebGLRendererがシェーダーテンプレートで行うすべてのことを実行します。

私は本当にglslをよく知りません、そしてまた私はそれを見つけます-私の言い回しを許してください-シェーダーコードを読み書きするためのお尻の非常に苦痛です。
しかし、私が知っていることから判断すると、ノードは、真にエレガントで拡張可能な方法でこれを行うための最良の方法です。

@pailhead彼が意味するのは、物事の間に中間レベルがあるということです。

なぜこのアラームなのかわかりません。 @mrdoobは、優れたソリューション以外のものをNodeMaterial誰からの改善も、コミュニティにとって非常に役立ちます。 これがまだコアで合併されていない場合、それは私たちがより多くの作業で改善する必要があるためです。

@sunagこのプロジェクトであなたを助けるために他の人ができることはありますか？ ドキュメントの準備ができていて、レビューできる場合は、ドキュメントを作成したいと思います。

@sunagこのプロジェクトであなたを助けるために他の人ができることはありますか？ ドキュメントの準備ができていて、レビューできる場合は、ドキュメントを作成したいと思います。

これは素晴らしいでしょう。 間違いなく大いに役立ちます。

ノードベースのマテリアルシステムは素晴らしく見えます、それは表現の力を拡大するでしょう。

コアで既存の材料システムからノー​​ドベースの材料システムにどのように切り替えますか？ 2つのシステムを両方とも使用するのでしょうか、それとも既存のシステムをノードのシステムに置き換えるのでしょうか。

申し訳ありませんが、このスレッドが大きすぎるため、このスレッドに追いつくことができないと思います...

2つのシステムを両方とも使用するのでしょうか、それとも既存のシステムをノードのシステムに置き換えるのでしょうか。

交換は究極の目標であり、パフォーマンスとメンテナンスの両方の点で優れていると思います。 次のステップは、コア内のMeshStandardNodeMaterialおよびその他のノードマテリアルを、ビジュアル、構文、およびパフォーマンスのコアとまったく同じように実行することです。

WIP https://github.com/mrdoob/three.js/pull/14333

プロジェクトでshadowMapを表示する必要があります。

MeshStandardNodeMaterialを使用する指向性ライトと2つのジオメトリを持つシーンがあります。

スイッチを入れました
castShadow =光の場合はtrue
両方のオブジェクトのcastShadowとreceiveingShadow。
shadowEnabled =レンダラーの場合はtrue

なぜそれが機能しないのですか？
MeshStandardNodeMaterialのshadowプロパティを使用する必要がありますか？ これが目的ですか？

誰でも私を助けることができますか？
ありがとう！

@claudioviola
サポートの質問はstackoverflowのフォーラムに行きます。

@sunag NodeMaterialは十分に安定しているので、TypeScript宣言ファイルの提供から始めることができると思いますか？ 近い将来に主要なAPIの変更を計画していない場合は、 NodeMaterialがTSをサポートしない最後のモジュールグループであるため、このタスクから始めます。

@sunag NodeMaterialは十分に安定しているので、TypeScript宣言ファイルの提供から始めることができますか？ NodeMaterialはTSをサポートしない最後のモジュールグループであるため、近い将来に主要なAPIの変更を計画していない場合は、このタスクから始めます。

@ Mugen87はい、変更よりも多くの追加が必要です。 TSサポートの追加は素晴らしいでしょう。 👍

さて、TSサポートは次のリリースで準備ができていますR017 🙌