مثير للإعجاب!

sunag نحن مهتمون جدًا بشيء كهذا. كيف يمكنني أن أقدم المساعدة؟ يمكنني إضافة دعم للمعيار على الأقل.

أنا مهتم بإنشاء رسوم بيانية عشوائية إلى حد ما ، بحيث تأخذ العقد الوسيطة أيضًا مدخلات. لذلك يمكنك الحصول على رسم بياني يبدو كالتالي:

نسيج (tex1 ، uv1)
ب الملمس (tex2 ، uv2)
مزيج C (A ، B ، وضع)
ضجيج D (param1، param2)
مزيج E (C ، D ، وضع)

ثم استخدم تلك العقدة النهائية E ، كمدخل للمادة.

لذلك فهو تعسفي للغاية ، ولا يقتصر على الزخارف فقط.

هدفي هو المساعدة في إنشاء هذا في الأسابيع القليلة المقبلة ، آمل أن أتعاون معك في الأسبوع المقبل أو نحو ذلك إن أمكن. كنت أتطلع إلى القيام بذلك عبر مكتبة shadergraph هنا: https://github.com/mrdoob/three.js/issues/7339 لكنني أجد إنشائه داخل ThreeJS مباشرة. حقًا ، أي حل جيد طالما أنه مرن ويعمل.

أنا أقرأ التعليمات البرمجية الخاصة بك ، فهي مصممة بشكل جيد للغاية. لدي بعض ردود الفعل الأولية. هل يمكنني بدء العلاقات العامة باستخدام الكود الخاص بك كقاعدة لبدء التعاون عليه؟

(1) سيكون لدي المواد لحل المراجع. في الأساس ، سيكون للمراجع أسماء سيطلبون من موادهم حلها ، وستعطي المادة مقتطفًا من التعليمات البرمجية حول كيفية الوصول إلى تلك البيانات. سيسمح هذا أيضًا للمادة بمعرفة المتغيرات (الموحدة / الاختلافات) المستخدمة في العقد ، بحيث يمكن تحسينها بشكل مناسب. يسمح هذا أيضًا للمواد المختلفة بحل المراجع بشكل مختلف ، مما يجعل العقد أكثر قابلية للحمل ، بدلاً من الاضطرار إلى معرفة كيفية تنفيذ المواد للأشياء ، خاصةً عندما تكون هناك اختلافات بين تطبيقات الأجزاء والرأس.

(2) أحاول استخدام كائن GeometryContext الذي قمت بإنشائه في معاد تصنيع الأضواء ، فهو يوفر وصولاً ثابتًا إلى الكثير من المتغيرات المحلية المطلوبة. لكن بالطبع يمكن حل ذلك من خلال المادة نفسها.

(3) لديّ الأشعة فوق البنفسجية مجرد مرجع آخر ، يتم حله بواسطة المادة. وأود أن أطلب من NodeTexture أن يأخذ مدخلات العقدة ، وبالتالي السماح للأشعة فوق البنفسجية التي تم إنشاؤها من الناحية الإجرائية.

(4) أود استدعاء NodeCube و NodeTextureCube ليكونا متسقين مع بقية Three.JS. وأود أن أزيل المنطق حول كيفية إخراج الأشعة منه. لكنني أحب فكرة خرائط المكعب القياسية ، لذلك لن أضع في الواقع استعلام البيئة عن محدد أو منتشر في العقد ، ولكن لدي ذلك في مادة phong الأساسية ، ويمكنك فقط التحكم في المعتاد المستخدم للاستعلام ، أو نتيجة cubemap نفسها (وبالتالي السماح لها بأن تكون لونًا محددًا من الناحية الإجرائية.) هل هذا منطقي؟ لذلك سيكون لديّ القابلية للتوصيل الطبيعي في المادة ونسيج المكعب القابل للتوصيل (قابل للاستفسار عن طريق الاتجاه والانحياز / اللد ، وإرجاع اللون). وهكذا يمكن للمرء أن يوفر نسيجًا مكعبًا لخريطة الإشعاع وآخر على الخريطة المرآوية. يمكننا تبديل نموذج sampleCube حقيقي بوظيفة cubeToUV2tschw كمجرد تبديل عقدة.

(5) سأحاول إضافة وظيفة NodeFunction التي تسمح لأحد باستدعاء وظائف عشوائية مع معلمات كإضافة إلى NodeOp الخاص بك (أو ربما يمكن دمجها بطريقة ما.)

(6) سأتخلص من جميع الفئات الفردية NodeNormal و NodeTransform و NormalMap وغيرها ولدي بعض المنشئات البسيطة التي تنشئ NodeReference باسم يتم حله بواسطة المادة بالشكل المناسب. يمكن لـ NodeReference حل الزي الرسمي والاختلافات وكذلك القيم المحسوبة في التظليل.

(7) لا أفهم الفرق بين NodeEnvironment و NodeCube. أعتقد أن NodeEnvironment قد تكون غير مكتملة؟

(8) من المربك عدم اشتقاق NodePhong من NodeMaterial. على الرغم من أنني أرى أن NodeMaterial مشتق من ShaderMaterial. أتساءل عما إذا كنت قد أطلقت على المشتق المباشر من ShaderMaterial أو GraphMaterial (أو NodeGraphMaterial) معنى أكثر - لأن جميع العقد تشكل رسمًا بيانيًا ، والرسم البياني هو المادة وليس العقدة الفردية.

(9) أود أن أقترح بعض المصطلحات الأكثر تنوعًا. سأسمي عقدة الجذر ، MaterialNode ، ويمكن للمرء أن يشتق PhongMaterialNode منه. لدي Vector3Node و FloatNode وما إلى ذلك مشتق من ValueNode - ليس بالضرورة ثابتًا ، ولكنه مجرد قيمة. وبالتالي يمكن للمرء توجيه ثلاثة FloatNodes إلى Vector3Node. أعتقد أنه يمكن أن يكون لديك مساعد يجعل الإعلان عن كل سطر من هذه الأسطر أو نحو ذلك بدلاً من 10 أو نحو ذلك حاليًا.

(10) أود نقل اسم "Node" من بداية أسماء الفئات إلى الخلف لأن هذا هو الحال في بقية مشروع 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 وبدلاً من ذلك أجعل هذا شيئًا يمكن للمرء طلبه من المادة عبر حل مرجعي. حساب متجه الانعكاس يكون مستقيمًا للأمام. لقد أضفته إلى GeometryContext في فروع ThreeJS التجريبية غير المدمجة.

(15) الطريقة التي سأقوم بها بتنفيذ الانعكاس والانكسار هي الحصول عليها كمدخلات لونية على المادة. يمكن للمرء أن يحل Refect و ReflectLOD و Refract و RefractLOD بالطريقة البسيطة التي تحل بها أي متغير ، ثم يمررها إلى مكافئ مكعب نسيج (إجرائي أو على أساس مكعب العينات) ثم تمرير اللون الناتج إلى مادة. هل هذا كيف كنت تفعل ذلك؟

(16) أنا في حيرة من أمري بشأن إدخال الضوء - عادة لا يكون لدى المرء أضواء قابلة للتوصيل ، بل يتم تحديد معلمات الضوء بالكامل في فئة الضوء. أعتقد أنك بحاجة إلى هذه المرونة الإضافية؟ كيف تتخيلها.

bhouston woow ، شكرًا جزيلاً لك.
سأحتاج إلى عدة وظائف للإجابة :)

أنا مهتم بإنشاء رسوم بيانية عشوائية إلى حد ما ، بحيث تأخذ العقد الوسيطة أيضًا مدخلات. لذلك يمكنك الحصول على رسم بياني يبدو كالتالي:
نسيج (tex1 ، uv1)
ب الملمس (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;

أعتقد أن عكس الترتيب باقتراحك يتحسن (الوضع ، أ ، ب) إلى (أ ، ب ، وضع). أنا بصدد إنشاء خرائط الانعكاس وخريطة مكعب وغيرها ...

البيئة وخريطة Cubemap غير مكتملة.

في الوقت الحالي ، قد تحدث الأخطاء بشكل أكبر بسبب عدم اكتمال محول التنسيق. هذا هو المسؤول عن تحويل ناقلات. vec3 إلى vec4 أو vec4 على سبيل المثال.

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

مزيج "نسيج" على سبيل المثال: (لم أختبر هذا الرمز)
يمكن تنفيذه في نفس 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 () هو المسؤول عن منشئ الكود. يتم تخزين رموز calcs في ذاكرة تخزين مؤقت إذا كنت تريد استخدامها في أكثر من إدخال واحد دون فقدان الأداء.

ما زلت لا أقوم بإعداد مؤشرات أو ثابت للتحسين ...

يتم التجميع عن طريق الانتشار في build () لقمة الرأس ورمز الشظية.

يمكنني أن أضعك كمتعاون؟ إذا كنت تريد تعديل الكود بأي شكل من الأشكال ، فسأعمل عليه أيضًا.

يمكنني أن أضعك كمتعاون؟ إذا كنت تريد تعديل الكود بأي شكل من الأشكال ، فسأعمل عليه أيضًا.

شكرا! سأقوم بعمل علاقات عامة لك حتى تتمكن من الموافقة على التغييرات.

لقد أضفتك (بالإضافة إلى WestLangley وtschw) إلى مشروع جانبي يحاول تحديد مجموعة من العقد القابلة لإعادة الاستخدام وتعريفات المواد التي يمكن نقلها بين عمليات العرض المختلفة. يمكن رسمها على نظام الرسم البياني التظليل الذي قمت بإنشائه.

لا أعتقد أنه يجب عليك الانتباه إلى الريبو الذي أعطيتك الوصول إليه إذا كنت لا تريد ذلك. هذا هو ما أنا مهتم بتنفيذه علاوة على ذلك.

(2) أحاول استخدام كائن GeometryContext الذي قمت بإنشائه في معاد تصنيع الأضواء ، فهو يوفر وصولاً ثابتًا إلى الكثير من المتغيرات المحلية المطلوبة. لكن بالطبع يمكن حل ذلك من خلال المادة نفسها.

أتمنى أن تكون الأضواء هي عقدة LightNode واحدة. ما يشغلني هو تسخير الكود الذي تم تطويره بالفعل لـ Three.JS.

(3) لديّ الأشعة فوق البنفسجية مجرد مرجع آخر ، يتم حله بواسطة المادة. وأود أن أطلب من NodeTexture أن يأخذ مدخلات العقدة ، وبالتالي السماح للأشعة فوق البنفسجية التي تم إنشاؤها من الناحية الإجرائية.

يمكنك استبدال UV بـ vec2 هل سيكون هذا؟

(5) سأحاول إضافة وظيفة NodeFunction التي تسمح لأحد باستدعاء وظائف عشوائية مع معلمات كإضافة إلى NodeOp الخاص بك (أو ربما يمكن دمجها بطريقة ما.)

هذا سيكون أمرا رائعا. بشكل أساسي من أجل BlendNode.

(6) سأتخلص من جميع الفئات الفردية NodeNormal و NodeTransform و NormalMap وغيرها ولدي بعض المنشئات البسيطة التي تنشئ NodeReference باسم يتم حله بواسطة المادة بالشكل المناسب. يمكن لـ NodeReference حل الزي الرسمي والاختلافات وكذلك القيم المحسوبة في التظليل.

في هذا الخط من التفكير ، أعتقد أن MaterialNode يمكن أن تكون أساسًا لمادة Phong ومادة فيزيائية.

(7) لا أفهم الفرق بين NodeEnvironment و NodeCube. أعتقد أن NodeEnvironment قد تكون غير مكتملة؟

ما زلت لا أستطيع إنهاء هذه العقد.

(8) من المربك عدم اشتقاق NodePhong من NodeMaterial. على الرغم من أنني أرى أن NodeMaterial مشتق من ShaderMaterial. أتساءل عما إذا كنت قد أطلقت على المشتق المباشر من ShaderMaterial أو GraphMaterial (أو NodeGraphMaterial) معنى أكثر - لأن جميع العقد تشكل رسمًا بيانيًا ، والرسم البياني هو المادة وليس العقدة الفردية.

ستكون NodeMaterial هي مادة عقدة الجذر ، فمن الضروري استخدام عقدة للقمة والجزء. NodePhong هو hibrid و NodePhongMaterial ليس سوى فئة وكيل. يمكن بعد ذلك دمجها.

(9) أود أن أقترح بعض المصطلحات الأكثر تنوعًا. سأسمي عقدة الجذر ، MaterialNode ، ويمكن للمرء أن يشتق PhongMaterialNode منه. لدي Vector3Node و FloatNode وما إلى ذلك مشتق من ValueNode - ليس بالضرورة ثابتًا ، ولكنه مجرد قيمة. وبالتالي يمكن للمرء توجيه ثلاثة FloatNodes إلى Vector3Node. أعتقد أنه يمكن أن يكون لديك مساعد يجعل الإعلان عن كل سطر من هذه الأسطر أو نحو ذلك بدلاً من 10 أو نحو ذلك حاليًا.

يبدو جيدا.

(16) أنا في حيرة من أمري بشأن إدخال الضوء - عادة لا يكون لدى المرء أضواء قابلة للتوصيل ، بل يتم تحديد معلمات الضوء بالكامل في فئة الضوء. أعتقد أنك بحاجة إلى هذه المرونة الإضافية؟ كيف تتخيلها.

سيكون هذا للخريطة المضيئة أو LightNode المحتملة.

سيكون هذا للخريطة المضيئة أو LightNode المحتملة.

تعجبني فكرة خريطة الضوء القابلة للتوصيل لأنه يمكن للمرء تحديد الأشعة فوق البنفسجية لها بشكل صريح. :)

bhouston إصلاح العديد من التصحيحات اليوم في هذا الملف: ولكن لا يزال هناك الكثير للقيام به.
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/three.node.js

هذا هو الملعب الذي أقوم بإنشائه: الفن: القوام والأزرار عبارة عن سحب وإفلات ، يعمل في الكروم فقط

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

الاشياء المدهشة! تبا! انه جميل.

هل سيكون من الممكن مشاركة الكود بطريقة يمكنني المساهمة بها أيضًا؟ كعلاقات عامة عامة أو شيء من هذا القبيل؟

أنت تعمل مع مشروع Sea3D هنا ، أليس كذلك؟

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

لذا يمكنني فقط تفرعها والبدء بالمساهمة؟ هل تقبل العلاقات العامة؟ كيف يمكننا التعاون بشكل فعال.

لم أسأل لكن mrdoob ربما (؟) أحب أن يكون هذا ضمن مشروع ThreeJS نفسه.

بالتااكيد!

لذا يمكنني فقط تفرعها والبدء بالمساهمة؟ هل تقبل العلاقات العامة؟ كيف يمكننا التعاون بشكل فعال.

بالطبع ، أعتقد أن مساعدتك ستكون رائعة. لا بد لي أيضًا من إحضار أنواع العقد الأخرى ، مثل التشبع والضوضاء كما اقترحت.

أنت تعمل مع مشروع Sea3D هنا ، أليس كذلك؟

أفكر في إنشاء علاقات عامة لـ Three.JS مع أمثلة لذلك يتم تحديد كل هذا.

mrdoob ما رأيك في أسماء المواد ، THREE.MaterialNode أو THREE.NodeMaterial؟

إنه نوع من المواد ، لذا يجب أن يكون THREE.NodeMaterial .

فوق. أعتقد أنني قريب من العلاقات العامة؟
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؟

هذا عمل رائع جدا! يذكرني بـ shaderforge .

عمل جيد جدا حتى الآن!

sunag سيكون قليلًا من العمل ، لكني أود المساعدة ومعظم التغييرات الهيكلية الكبيرة في كود تظليل R74 هي خطأي. :)

GGAlanSmithee هو أيضًا مشابه جدًا لما يحتويه UE4: https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/ExpressionReference/index.html

يبدو رجلًا جميلًا وممتعًا للعب به: هل يمكنني تقديم محرر عقدة Blender3D للإلهام. أجدها فائقة الكفاءة ، حتى أن هناك بعض مقاطع الفيديو الرائعة على PBR عبر نظام عقدة Blender وما هي العقد التي ستكون أكثر فائدة في الإنشاء لإنشاء PBR من البداية:

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

سيكون القليل من العمل ، لكني أرغب في المساعدة ومعظم التغييرات الهيكلية الكبيرة في كود تظليل R74 هي خطأي. :)

تضمين التغريدة كان أكثر نظافة مع التغييرات الجديدة r74. انتهيت من الجزء الأول لا يزال مفقودًا من StandardMaterial. أي مشكلة أنشرها هنا :) شكرا
https://github.com/sunag/sea3d/commit/d544ad7993272348f8bbea2337cdceb52159a6a8

شيء آخر ما زلنا نفتقده هو الانكسار. أحب حقًا استخدام المخزن المؤقت للتقديم بدلاً من Cubemap RTT كإعداد افتراضي. سيكون أكثر كفاءة.

GGAlanSmithee لدي بعض الإشارات إلى ShaderFX بأنني معجب كبير. تعتبر Shader Forge و UE4 بشكل أساسي من المراجع الرائعة أيضًا.

richardanaya مقاطع فيديو مذهلة. Thks!

mrdoob في أي مجلد تنصح بوضع هذه الملفات؟ three.js root (src / material / node) أم في الأمثلة؟
https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial/node

ما زلت أوصي بتسمية هذا "الرسم البياني المادي" أو بأسلوب ThreeJS المقلوب ، "مادة الرسم البياني". أو إذا أصررت على استخدام مصطلح "Node" ، فسأطلق عليه "NodeBasedMaterial". يوضح كلا الاسمين أن المادة تحتوي على عقد ، بدلاً من أن تكون عقدة بحد ذاتها.

ما زلت أوصي بتسمية هذا "الرسم البياني المادي" أو بأسلوب ThreeJS المقلوب ، "مادة الرسم البياني". أو إذا أصررت على استخدام مصطلح "Node" ، فسأطلق عليه "NodeBasedMaterial". يوضح كلا الاسمين أن المادة تحتوي على عقد ، بدلاً من أن تكون عقدة بحد ذاتها.

بالنسبة لي كلاهما يبدو جيدًا. أترك القرار لـ mrdoob ما رأيك؟

راجع للشغل sunag ، سألتزم بخرائط التكعيب للانكسارات إن أمكن ، فهي أسهل وأكثر دقة. أعتقد أن هذا هو ما يفعله أي شخص آخر تقريبًا ونحتاج إلى عناصر RTT للحصول على انعكاسات دقيقة أيضًا. أعتقد أنه يحتاج فقط إلى تقديم سريع عند 128 ^ 2 أو 256 ^ 2.

راجع للشغل sunag ، سألتزم بخرائط التكعيب للانكسارات إن أمكن ، فهي أسهل وأكثر دقة. أعتقد أن هذا هو ما يفعله أي شخص آخر تقريبًا ونحتاج إلى عناصر RTT للحصول على انعكاسات دقيقة أيضًا. أعتقد أنه يحتاج فقط إلى تقديم سريع عند 128 ^ 2 أو 256 ^ 2.

نعم ، يمكننا السماح لكليهما. سيكون مناقشة بين دقة الأداء x. لا يزال بالنسبة للانكسار المستوي (الزجاج والماء) أوصي باستخدام المخزن المؤقت بدلاً من 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 root (src / material / node) أم في الأمثلة؟

أود أن أضعها في أمثلة لتبدأ بها. بمجرد تحديده جيدًا ، يمكننا لاحقًا نقله إلى src 😊

ما زلت أوصي بتسمية هذا "الرسم البياني المادي" أو بأسلوب ThreeJS المقلوب ، "مادة الرسم البياني". أو إذا أصررت على استخدام مصطلح "Node" ، فسأطلق عليه "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 .

سيكون خياري الثاني هو THREE.CustomMaterial .

كمتفرج عشوائي تمامًا. تبدو مادة NodeMaterial بالنسبة لي بديهية للغاية ، لأن هذا ما يطلق عليها في Blender3D

إذا أعجبmrdoob بـ NodeMaterial ، فيمكننا الالتزام به. :)

NodeMaterial ثم 😁

هذا المشروع رائع! شاهدت للتو العرض التوضيحي على Twitter وهو مثير للإعجاب للغاية.

أتساءل عما إذا كانت العقد يجب أن تكون شيئًا يدخل في النوى الثلاثة. إنها محددة جدًا للتنفيذ. أنا أيضًا أقوم ببناء محرر رسم بياني Shader Three.js (لم يتم إصداره بعد) لموقع ShaderFrog.com ، والحل الذي أملكه هو فقط تصدير كود GLSL وجميع البيانات الوصفية المطلوبة مثل الأسماء الموحدة ، إلى ملف JSON صغير ، وتحميله مع مكتبة وقت تشغيل خارجية

يمكن لمحرر الرسم البياني هذا العمل مع التظليل الكامل من خلال تحليل كود المصدر الخاص بهم ، مما يعني عدم الحاجة إلى أنواع محددة من عقد التظليل. هل يمكن التعامل مع نوع NodeMaterial هذا بالكامل خارج جوهر Three أيضًا؟ كل ما عليك فعله حقًا هو RawShaderMaterial لشخص ما لاستخدامه في مشروعه الخاص.

هل يمكن التعامل مع نوع NodeMaterial هذا بالكامل خارج جوهر Three أيضًا؟ كل ما تحتاجه حقًا هو إنتاج RawShaderMaterial لشخص ما لاستخدامه في مشروعه الخاص.

تضمين التغريدة نعم من الناحية النظرية ، ولكن من المبكر جدًا عمل تظليل جيد من الخام. في ذلك الوقت أفضل مع واجهة أولية. كما أنه يساعد في الحفاظ على التوافق مع Skin / Morph والمكونات الأصلية الأخرى لـ Three.JS.

فكرت في ملاحظة مشكلة بسيطة:
في "التدفق" ، لا تظهر الموصلات إلى المستوى الأعلى عند سحب العقد فوق بعضها البعض.
ربما هذه المشكلة تنتظر طبقات أو شيء لا يزال.

أتساءل ما إذا كانت هناك طريقة لتوحيد كلا النهجين؟ أنا مهتم بتظليل متعدد الطبقات ولهذا يجب أن يكون لديك العديد من BSDFs التي تساهم في تحقيق نتيجة نهائية. هذا يعني أن على المرء أن يفصل بين نموذج التظليل أكثر - فهو الآن مقترن بإحكام في تصميمsunag الحالي. أعتقد أننا يجب أن نتجه نحو اتجاه لا يحتاج فيه المرء إلى مادة قياسية أو مادة Phong محددة ، فقد يكون خامًا مثل ما لدى DelvarWorld . أعتقد أنه يمكننا الانتقال إلى هناك بشكل تدريجي ، لذا فإن ما لدى sunag هو بداية جيدة.

هذه ليست إجابة كاملة ، ولكن منذ فترة ، قمت بإنشاء اقتراح تقريبي لتنسيق تظليل محمول يتضمن بيانات وصفية ، مثل الأسماء الموحدة وأنواعها ونوعها في Three.js ، إلخ. https://github.com /DelvarWorld/ShaderFrog-Runtime/blob/master/THREE_SHADER_FORMAT.md

كل ما يحتاجه جهاز تظليل فعليًا للتشغيل في بيئة حقيقية هو كود مصدر تظليل خام (نظرًا لأن وحدة معالجة الرسومات تقوم بتجميعه) ، وللتيسير ، ما هو الزي الرسمي الذي يمكن للمستخدم تعيينه مع القيم. لا يتضمن هذا الاقتراح التقريبي أي فكرة لبناء تظليل برمجيًا ، إنه مجرد تسليم بسيط لـ GLSL والبيانات الوصفية. إنه متوافق مع Three.js لأنه عليك فقط وضعه في RawShaderMaterial في النهاية.

لا توجد حاليًا طريقة لجعل المظلات محمولة في Three.js أو تصديرها من أي تطبيق ، وهو ما أعطاني فكرة اقتراح معيار ، وأعتقد أنه يمكن أن يحل كلتا مشكلتنا ، نظرًا لأننا نبني تطبيقات خارجية أنه في النهاية بصق مادة محددة سلفًا. وهذا يعني أيضًا أن تفاصيل التنفيذ الخاصة بتجميع مجموعات محددة من الرسم البياني متروكة للتطبيقات ، وليس Three.js.

هل هذا المعيار تظليل المقترح له مكان في ثلاثة؟ ليس لدي فكره. في الوقت الحالي ، من المحتمل أن يكون مفيدًا بالنسبة لي أكثر من نواة Three ، حيث تبني Three تظليلها الخاص بطريقتها الخاصة.

DelvarWorld لقد بدأت هذا المشروع على طريقة لإنشاء مجموعة موحدة من عقد الرسم البياني التظليل:

https://github.com/OpenMaterialGraph/OpenMaterialGraph

مواصفات العقدة هنا:

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

مواصفات الحد الأدنى من BSDFs هنا:

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

هذا موجه نحو التقديم المادي بالرغم من ذلك.

شعوري هو أن المرء يحتاج إلى غلاف من تظليل لـ ThreeJS بمستوى أعلى من تظليل خام ولكن مستوى أقل من Phong shader. في الأساس ، سيكون التظليل الافتراضي قادرًا على القيام بأهداف مورف ، وعظام ، وما إلى ذلك ، وبعد ذلك ستستخدم كل مظلات مخطط الإضاءة المحددة هذه (Basic ، Lambert ، Phong ، Standard) هذا القالب. يوجد حاليًا تظليل قالب ضمني (نقوم بتضمين نفس الأشياء في كل تظليل) - لكنني أعتقد أنه يمكننا توضيح مكان توصيل الأشياء. يمكنك توصيل مخططات الإضاءة (phong أو lambert أو الأساسية أو متعددة الطبقات) ويمكنك توصيل الخصائص بمخططات الإضاءة التي تمثل عقدك العامة.

bhouston يا لطيف ، يبدو أن لدينا الكثير من المتطلبات المتداخلة ، ويعرف أيضًا باسم القيمة الافتراضية ، واسم العرض ، والأوصاف التي يمكن قراءتها من قبل الإنسان ، وما إلى ذلك. يشبه إلى حد كبير ما تقترحه.

شكل تظليل رسمي له معنى كبير. يجب أن يتعايش مع lib على الرغم من أنه يمكن أن يتطور معه بسهولة. بالنسبة لشخص جديد إلى حد ما على three.js ، هل هناك أي سبب محدد لعدم وجود مثل هذا الشيء بالفعل؟ يجب أن يكون ممتعًا للمحرر إذا لم يكن هناك شيء آخر.

* تحرير ربما يؤدي وجود المواصفات في three.js إلى إلغاء الغرض منه إذا كان من المفترض أن يتم استهلاكه بواسطة أنابيب عرض أخرى.

في الوقت الحالي ، من المحتمل أن يكون مفيدًا بالنسبة لي أكثر من نواة Three ، حيث تبني Three تظليلها الخاص بطريقتها الخاصة.

يمكنك إنشاء نفس المادة بلغة أخرى إذا أجريت تعديلات داخل THREE.NodeGL.prototype.generate بمجرد أن تصبح NodeMaterial (* Flow) لغة مرئية. يمكن أن يكون NodeBuilder هو الباب لذلك. حاليًا هو وسيط البيانات بين العقد.

لقد قمت بتنظيف مثال لـ NodeMaterial "خام": لا يزال بإمكانه توليد العديد من الأخطاء.
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 لـ Multi-Pass و NodeMaterialD بعد العلاقات العامة ماذا أفعل في غضون أيام قليلة.

اقترحت برنامج THREE.ShaderFrogLoader بدلاً من تظليل وقت التشغيل.

في "التدفق" ، لا تظهر الموصلات إلى المستوى الأعلى عند سحب العقد فوق بعضها البعض.

MasterJames شكرا لك! سوف أنظر إليها.

: +1:

بدأت في إنشاء الأمثلة. أتمنى أن أنهي هذا الأسبوع. : sweat_smile:
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

أفكار؟

sunag +1: -)

+1!

هذا رائع جدا. سأفترض أن النباتات + نسيج الجدار بدلاً من الإزاحة الغائمة. :) هذا جميل فقط.

سأفترض أن النباتات + نسيج الجدار بدلاً من الإزاحة الغائمة.

أشرت إلى مثال "الطبقات"؟ ومع ذلك سوف أنشر المزيد من الأمثلة لنا

لينة الجسم gpu

للمقارنة مع نهج مختلف ، محرر الرسم البياني Shader Frog هو الآن مباشر ، وهو في مرحلة "ركل الإطارات". أود أن أؤكد أنه لا يتطلب أي تغييرات في جوهر Three.js.

يتمتع ShaderFrog حاليًا بقوة أكبر من محرري العقدة التقليديين. لديها أنواع لا حصر لها من العقد للعمل معها لأنها تستطيع تحليل وفهم أي تظليل . على سبيل المثال ، لتطبيق انعكاس فقط على حواف كائن ما ، يمكنك ببساطة أن تأخذ تظليل توهج ، وهو تظليل مستقل تمامًا مع جزء وتظليل قمة:

... واضربها في تظليل انعكاس ...

... باستخدام الرسم البياني تظليل ...

و تا دا! تظليل حافة انعكاس .

يمكنك أيضًا ، على سبيل المثال ، إخفاء أي تظليلين باستخدام أي تظليل آخر ، وما إلى ذلك:

لاحظ أن "نوع العقدة" الوحيد الذي تتطلبه هذه العملية هو العقدة المضاعفة (هناك عقدة أخرى في ShaderFrog) ، والتي تكاد تكون مستقلة تمامًا عن GLSL. يمكن لـ ShaderFrog العمل مع أي تظليل ، وهذا هو السبب في أنه يحتوي على أنواع عقد لا نهائية. هذا النهج التكنولوجي المتقدم يسمح لهذا التلاعب بشكل مستقل عن تغييرات Three.js.

ShaderFrog لديها دعم تصدير من الدرجة الأولى إلى Three.js مجانًا. كل ذلك بدون تعديل شفرة المصدر Three.js. Sea3D هو منتج طرف ثالث ، مثل ShaderFrog. يبدو وضع ميكانيكا منتجات الطرف الثالث في جوهر شركة Three ميزة غير عادلة ولا أفهمها سياسيًا.

DelvarWorld لا أرى حقًا تجريدًا لإنشاء تظليل قائم على العقدة

بصفتي مبرمج رسومات مثلي يفهم التظليل على مستوى عالٍ (من أدوات مثل Blender 3D) ، ولكن ليس بمستوى منخفض ، يبدو التجريد المستند إلى العقدة طريقة رائعة بالنسبة لي للتفاعل برمجيًا مع التظليل باستخدام معرفتي بالنمذجة ثلاثية الأبعاد. أنا أفهم إعداد العقدة لـ PBR على سبيل المثال ، لكن الله يساعدني إذا أردت أن أكتب ذلك في GLSL.

تضمين التغريدة انا احب المحرر الجديد

DelvarWorld +1 لطيف جدا! : -)

شكرا! :)

أنا حقًا لا أرى تجريدًا لإنشاء تظليل قائم على العقدة كتقنية خاصة بطرف ثالث.

أنا أفهم إعداد العقدة لـ PBR على سبيل المثال

جزء من المثال المضاد هنا هو أنه يمكنك الحصول على هذين الأمرين مجانًا بشكل مستقل عن Three.js. جميع أدوات تظليل ShaderFrog مفتوحة المصدر ، لذا فإن أي عقد تصبح جزءًا من تنفيذ PBR يمكن أيضًا تعلمها وتحريرها وتحسينها بمرور الوقت (بالإضافة إلى تكوينها مع أي تظليلات أخرى ، وليس فقط بعض المجموعات الفرعية في Three.js core). بالنسبة لي ، حقيقة أن كل هذا يمكن تحقيقه بدون ثلاثة تغييرات تعني أنه غير ضروري ، ويؤدي إلى تشويش الخط الفاصل بين Three.js كونها واجهة برمجة تطبيقات لغلاف الويب وتحرك الآن ميزات محددة للتنفيذ. يعد تخزين بيانات عقدة التظليل محددًا للغاية للتطبيق وبقدر ما أعرف لا يوجد حاليًا تنسيق قياسي لمحرر العقدة الشائعة لأي برنامج؟ قد يكون فرض أحدها ضارًا بالتطبيقات الأخرى.

DelvarWorld كما أفهم هذا التغيير ، ستظل ShaderFrog قادرة على العمل وستظل قادرة على تجاوز GraphMaterial إذا رغبت في ذلك. نظرت إلى مثال الكود المصدري لـ GraphMaterial ، وتمكنت من فهم بساطة كيفية عملها دون الحاجة إلى التفكير في حل / محرر طرف ثالث. بصفتي مطور رسومات ، فإنني مهتم بكيفية صنع مواد برمجية تثير الإعجاب بسرعة ، أشعر أن هذه هي الشغل المناسب لشركة ThreeJS.

أعتقد أن NodeMaterial و Flow لهما تركيزان مختلفان. Flow و ShaderFrog هما حل طرف ثالث للمحررين البصريين حاليًا في مصدر مغلق (أعتقد بشكل رئيسي في الفنانين لهذا) الآخرون NodeMaterial هو محرر تظليل مفتوح المصدر للمبرمجين الذين تم إجراؤهم على Three.JS. أتفق مع richardanaya بمعنى أن ShaderFrog يمكنه تجاوز NodeMaterial إذا رغبت في ذلك. تمامًا مثلما أعتقد أن Flow لا يحتاج إلى أن يكون مجرد محرر مواد. آمل حقًا إدخال تحسينات كبيرة على ShaderFrog في المستقبل كالمعتاد.

مسح: كاوية فورونوي
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

sunag كنت

• أود أن أرى العلاقات العامة عاجلاً وليس آجلاً. يمكنني المساعدة. :)
• قد يكون من الرائع السماح بالسمات التعسفية بدلاً من السمات القياسية فقط (الأشعة فوق البنفسجية ، والأشعة فوق البنفسجية ، والعادية ، والموضع ، وما إلى ذلك) أعلم أن الكثير من التظليل يمكن أن يستفيد من vec4s الظل ، أكثر من 2 uvs وأيضًا ألوان متعددة صفات. وبالتالي سأعمم الاحتياجات في مصفوفة السمات المطلوبة أو شيء من هذا القبيل.
• أود أن أقترح بعض التنظيم للعقد في NodeMaterial الرئيسية ، BRDFs (Phong ، Standard ، إلخ) ، عقد النسيج (NodeCubeTexture ، NodeTexture) ، عقد الملحقات (؟) (NodePosition ، NodeNormal) ، العقد الرياضية (NodeOperator ، إلخ. ) ، وعقد الأداة المساعدة (NodeSwitch ، ...) ، والإضافية (؟) (NodeVelocity ، ...) أعتقد أن هذا سيساعد كثيرًا.
• سيكون من الجيد أن يكون لديك موصّفات مصفوفة للإسقاط والعرض ومصفوفات العالم.
• تفتقد بعض عوامل التشغيل: % ^ & << >> ~ |
• لست متأكدًا من أنني أرى القيمة في NodePhongMaterial عندما يكون الفصل صغيرًا جدًا ، سيكون لدي فقط المستخدمين لإنشائه باستخدام عقدة NodePhong المدمجة مع NodeMaterial (على الرغم من أنني ما زلت لا أحب هذا الاسم ، فإن GraphMaterial تشعر كثيرًا المزيد من الطبيعة بالنسبة لي ، لكن يمكنني التعايش معها.)
• كنت أتصل بـ NodeTimer -> NodeTime ... ولكن مرة أخرى التفضيل الشخصي.
• أتساءل عما إذا كانت هناك طريقة ما لدمج العديد من العقد المتغيرة في واحدة كما فعلت مع NodeMath # ، NodeOperator. تبدو هذه متشابهة جدًا: NodeViewPosition ، NodeWorldPosition ، NodeViewNormal ، NodeTransformedNormal ، NodeTransformedPosition ، NodeProjectPosition ...
• أود أن أرى مجموعة الوسائط الاختيارية لـ NodeMath # ، NodeOperator لتكون في شكل يمكن أن يكون قائمة ، بحيث يمكن للمرء بسهولة ملء مربع قائمة منسدلة به. في الوقت الحالي لأنهم أعضاء استفادوا من الفصول الدراسية ، يصعب التعرف عليهم قليلاً. لست متأكدًا من حل جيد لا يزال مناسبًا للترميز. ربما مجرد تجميعهم في قائمة بعد تعريفهم كأعضاء في الفصل ، لذا أضف تلك القوائم فقط؟
• NodeTransformedNormal ، NodeTransformedPosition صعب بالنسبة لي لمعرفة ما هي عليه دون النظر إلى الكود. هل هم في الفضاء العالمي ، مساحة العرض ، مساحة الكائن؟ "التحويل" مصطلح عام للغاية ، والذي يعني فقط مضروبا في مصفوفة. سوف أنظر إلى الكود الخاص بهم الآن ....
• أود أن أسمح لـ NodeUV و NodeColor بأخذ فهرس بدلاً من أن يقتصر على قناتين و 1 على التوالي. مرة أخرى ، أود أن أرى هذه الأشياء أصبحت عامة ، فأنت تمرر حقًا في سلسلة أو واحدة من عدد من الإعدادات المسبقة بدلاً من ترميزها إلى مجموعة من القنوات المحددة. لا يزال بإمكانك الحصول على بعض مسارات التعليمات البرمجية المخصصة لبعض المتغيرات ، لكنها ستعود إلى شيء عام للأسماء التي لا يتعرف عليها للتعامل مع الحالات الخاصة.

المزيد من التعليقات:

• أرغب في الحصول على رسم بياني يحتوي على أكثر من BRDF واحد ، وهما أساسًا معياران من BRDF ثم حفظ الطاقة بينهما. بمجرد الحصول على العلاقات العامة أود إضافة هذه الوظيفة. سيجعل النظام أكثر عمومية وقوة.

تضمين التغريدة شكرا لك!

تمت مراجعة سمات الطلب وتنظيم المجلدات و NodeTime و NodePosition و NodeNormal و NodeView. تمت إضافة +3 أمثلة أيضًا.

في عوامل التشغيل والمصفوفة ، يتعين علينا إضافة التوافق مع التحويلات integer و matrix . لكي يتم ذلك بطريقة تلقائية كما هو الحال في الطفو / المتجهات #. لدينا عمل كاف للتحديثات القادمة ..: sweat_smile:

غدا سأقدم العلاقات العامة. لا بد لي من مراجعة بعض الأشياء حتى الآن.

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 .

نييس!

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 في عقدة الوظيفة

مثال عمل مع معلمة تعويم:

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 متوافق مع خريطة التضاريس؟

بعض الملاحظات الإضافية:

• مشكلة مع PositionNode.LOCAL في تظليل الأجزاء في NodeMaterial "الخام":

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) ؛
لكن لم يتم الإعلان عن ثابتين. هل هو خطأي أم خطأ؟
أيضًا ، تعتبر ConstNode حساسة للفاصلة المنقوطة ، لذا لم يتم تحليل "float TWO = 2.0".

dimarudol شكرا! إذا كنت تريد أن تشعر بالحرية مع الملاحظات في أقرب وقت ممكن ، فسيقوم بإجراء المراجعة الجديدة.

لكن لم يتم الإعلان عن ثابتين. هل هو خطأي أم خطأ؟

سأفكر في طريقة الاستخدام هذه وفي المواد على سبيل المثال 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 () ؛
اسمحوا texColorMap = جديد THREE.TextureNode (جديد THREE.TextureLoader (). load ("colorMap.jpg")) ؛
دع customData = جديد THREE.BufferFloatNode (new Float32Array (...)، "data")؛ // المعلمة الثانية هي اسم السمة

دع colorMap = ثلاثة جديدة. وظيفة عقدة ([
"vec3 colorMap (sampler2D texColorMap ، بيانات عائمة) {"،
"return vec3 (fabric2D (texColorMap ، customFunc (data))) ؛" ، // customFunc تُرجع vec2 اعتمادًا على البيانات
"}"
] .join ("n")) ؛

دع colorMapCall = جديد THREE.FunctionCallNode (colorMap) ؛
colorMapCall.inputs.texColorMap = texColorMap ؛

material.color = colorMapCall ؛
material.build () ؛ `

بالمناسبة ، يبدو أنه لا يمكنني استخدام معلمات sampler2D لـ FunctionNode ...

هل فاتني شيء ؟
أعتقد أنه يمكنني المساعدة إذا لزم الأمر :)

تضمين التغريدة حسنًا ، ربما شيء مثل الآن:

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 ، كما قلت ، أحتاج حقًا إلى تعيين sampler2D في المعلمات الخاصة بي حيث يتم استخدامه كخريطة لونية .. يتم حساب لون البكسل باستخدام نسيج 2D () ويتم حساب المعلمة الثانية من نسيج ثنائي الأبعاد () باستخدام بياناتي المخصصة (وهي على سبيل المثال درجة حرارة).
   أنا أفهم أن فكرة استخدام معلمات vec3 كانت لتكون ودية مع المستخدمين ، ولكن يمكن أن تدعم FunctionNode أيضًا معلمات sampler2D ، ألا تعتقد ذلك؟
2. علاوة على ذلك ، تكتب THREE.FunctionNode فقط في تظليل الأجزاء ، ولكن ألن يكون من الجيد أن تكون قادرًا على الكتابة في تظليل قمة الرأس أيضًا؟

ستكون هذه حالة استخدامي ، تسمى IsoColor ، لأن اللون يتوافق مع البيانات (درجة الحرارة ، الضغط ...) أحمر -> درجة حرارة عالية ، أزرق -> درجة حرارة منخفضة:

1. أفكر في كتابة THREE.IsoColorNode (التي من شأنها أن تحل محل عقدة الوظيفة في الرسم التخطيطي الخاص بي) ، والعقد الأخرى التي قد تكون مثيرة جدًا للتصورات العلمية. هل أنت مهتم بذلك؟ mrdoob هل أنت مهتم أيضًا؟

فيما يتعلق بـ THREE.FunctionNode ، كما قلت ، أحتاج حقًا إلى تعيين sampler2D في المعلمات الخاصة بي حيث يتم استخدامه كخريطة لونية .. يتم حساب لون البكسل باستخدام نسيج 2D () ويتم حساب المعلمة الثانية من نسيج ثنائي الأبعاد () باستخدام بياناتي المخصصة (وهي على سبيل المثال درجة حرارة). أنا أفهم أن فكرة استخدام معلمات vec3 كانت لتكون ودية مع المستخدمين ، ولكن يمكن أن تدعم FunctionNode أيضًا معلمات sampler2D ، ألا تعتقد ذلك؟

أنا أفهم حاجتك الآن! سأقوم بإنشاء علاقات عامة لهذا وملاحظات أخرى من

علاوة على ذلك ، تكتب THREE.FunctionNode فقط في تظليل الأجزاء ، ولكن ألن يكون من الجيد أن تكون قادرًا على الكتابة في تظليل قمة الرأس أيضًا؟

أنا لم أختبر هذا ولكن أفترض ذلك.

أضفت أكثر من مثالين:

• sampler2D في المثال triangle-blur
• تم تخصيص BufferAttribute في المثال custom-attribute

إنه يعمل ولكني سأستمر في تقديم رمز مصقول ...

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

رائع ! لقد قمت بعمل جيد حقًا ، إنه يعمل بالنسبة لي أيضًا: ابتسم:

أشكرك مجددا لأجل عملك !

مرحبا sunag ،

في الوقت الحالي ، لا يمكننا الحصول على FunctionNode من النوع "void" لأننا نحتاج إلى إرسالها إلى المادة كمعامل (لون ، ألفا ...). على سبيل المثال ، إذا كنت أرغب في تنفيذ طائرة مقطع دالة FunctionNode ، فكل ما أريد فعله هو كتابة جزء تظليل مثل هذا:

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

لكن لا يمكن إعطائها للمادة ... الحل هو إعادة الطفو الذي هو قناة ألفا ، لكن هذا ليس نظيفًا ومحسّنًا. ألا تعتقد أنه سيكون من الرائع إضافة بعض الوظائف الباطلة إلى مادة من هذا القبيل:

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;

شيء آخر هو أننا لا نملك السيطرة على ترتيب الوظائف في التظليل. إذا كانت لدي وظائف غير تبادلية ، فليس لديّ سيطرة على النتيجة ...

دعنا نرى هذا المثال:

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;

إذا كانت هناك نقطة خلف مستوى الشفافية وتتجاوز بسبب الإزاحة ، في الحالة التي يتم استدعاء "TransparPlaneCall" قبل "الإزاحة الاتصال" alpha = 1. ، وفي الحالة التي يتم استدعاؤها بعد alpha = 0.5.
لذا أود تحديد ترتيب استدعاءات الوظائف ... هل تعرف ما أعنيه؟

مرحبا martinRenou

حسنًا ، ربما تكون وظائف void ProxyNode لاستخدامها في الفتحة لأن هذا يحتاج إلى اتباع طلب أو التهيئة في بداية الكود أو نهايته ، ربما functionsStart أو functionsEnd فتحات

يتم فصل استخدام الفتحة alpha إذا كان alpha هو 0 تلقائيًا.
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 ، يجب أن تضع FunctionCall في خانة سابقة ، color هي الأولى specular الثانية على سبيل المثال.

هذا المثال هو رمز تظليل مختلف: fragment إلى transparencyPlaneCall و vertex إلى displacementCall .

هذا يجعلني أعتقد أن استخدام المتغيرات ( varying والسكان المحليين) للتوسيع وليس المدخلات فقط سيكون أمرًا مثيرًا للاهتمام. ربما VarNode ...

تم r6 - https://github.com/mrdoob/three.js/pull/9636

استخدام فتحة ألفا إذا كانت ألفا تساوي 0 يتم فصلها تلقائيًا.

آسف لذلك ، لم أر ذلك.

يتم ترتيب الوظيفة تلقائيًا باستخدام خوارزمية تبعيات بسيطة ، يجب أن تضع FunctionCall في فتحة سابقة ، فاللون الأول هو المرآوي والثاني على سبيل المثال.

أفهم ، في الواقع ، أردت فقط التأكد من أن الوظيفة التي تتجاهل وحدات البكسل قد تم استدعاؤها أولاً. يبدو من الجيد بالنسبة لي أن أستخدم ألفا إذا تجاهلت ذلك بعد وظيفتي مباشرة: مبتسم:

هذا المثال عبارة عن كود تظليل مختلفين: جزء إلى TransparencyPlaneCall والرأس إلى الإزاحة Call.

حق ! لذلك لم يكن هذا مثالا جيدا. غلطتي.

تم R6 - # 9636

رائع ! شكرا لإجاباتك.

يجعلني أعتقد أن استخدام المتغيرات (المتغيرة والمحلية) للتوسيع وليس المدخلات وسيكون الثابت فقط ممتعًا للغاية. ربما VarNode ...

يبدو جيدًا أيضًا ، قد يكون من المثير للاهتمام أن تكون قادرًا على كتابة دالة في تظليل قمة الرأس ، واستخدام varNode ، واستخدامها مع وظيفة في تظليل الجزء. ألا تعتقد؟

تضمين التغريدة
أعتقد أن هناك مشكلة في استخدام AttributeNode مع FunctionNode في تظليل قمة الرأس ..

إذا كان لدي رمز مثل هذا:

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 حتى الآن.

أعتقد أن هناك مشكلة في استخدام AttributeNode مع FunctionNode في تظليل قمة الرأس ..

تم الإصلاح - https://github.com/mrdoob/three.js/pull/9681

مرحبًا sunag ، لقد رأيت mtl.transform كما فعلت ... ربما ستغير هذا عندما يكون من الممكن إنشاء وظائف باطلة؟
ومع ذلك ، يبدو أن ميزة الكلمات الرئيسية فكرة جيدة: مبتسم:

في الواقع ، أعتقد أنه سيكون من الجيد وضع هذه الاختلافات في mtl.varyings (mtl.varyings عبارة عن مصفوفة) على هذا النحو: mtl.varyings.push(myVar) . باستخدام نفس الفكرة ، يمكننا وضع وظائف في الرأس ومظلات الأجزاء مثل هذا: mtl.vertexFunctions.push(myVertexFunctionCall) ، بنفس الطريقة مع mtl.fragmentFunctions .

بهذه الطريقة يمكننا إجراء الكثير من الحسابات على تلك الاختلافات ثم استخدامها للتأثيرات. ستكون هذه الوظائف وظائف باطلة.

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

كما هو الحال في لقطات الشاشة أعلاه حيث يتم توصيل العقد بشكل مرئي ، كيف يمكننا إعادة إنشاء هذا عقليًا باستخدام واجهة برمجة التطبيقات هذه؟ أرى أن المُنشئين يقبلون العقد الأخرى. هل هذه هي الطريقة التي يكون بها الإخراج من عقدة واحدة (يتم تمريرها إلى مُنشئ) إدخالاً لعقدة أخرى (تستقبل العقد في مُنشئها)؟ هل للعقدة ناتج واحد على الأكثر؟ كم عدد العقد التي يمكن إدخالها إلى عقدة أخرى عبر المُنشئ ، أم أنها محدودة؟

trusktr محدد بالطبع كم عدد العقد الذي يستهلك المزيد من وحدة المعالجة المركزية في وقت float إلى vec2 أو vec3 على سبيل المثال يكون تلقائيًا ، ويتم تخزينه في ذاكرة التخزين المؤقت إذا تم استخدامه أكثر من مرة للتحسين (انظر TempNode ).

في لقطات الشاشة ، كل عقدة عبارة عن فئة ، على سبيل المثال: PositionNode في العرض هو:
https://github.com/mrdoob/three.js/blob/789efa65bafe022e178c7e93e0985a7607a54403/examples/js/nodes/accessors/PositionNode.js#L5

mrdoobsunag هل سيكون على استعداد للتعليق على الوضع الراهن من قانون NodeMaterial، ومدى تناسبها مع خارطة الطريق three.js؟

من الناحية النظرية ، يمكننا الآن استخدام العقد لعدة أشياء ، مثل:

• تنفيذ مواصفات glTF / مواد PBR اللامعة كمواد NodeStandardSG.
• دعم مجموعات وتحولات الأشعة فوق البنفسجية لكل خريطة
• تبسيط استخدام المواد المصنعة من خلال التركيب

ولكن من الصعب تبرير إضافة تبعية في GLTFLoader لجميع ملفات العقدة. وربما يكون من الصعب تبرير وضع العقد في src/* بدون استخدام أكثر نشاطًا. بيض الدجاجه. 😅

سيكون من المفيد معرفة الخطة طويلة المدى لـ NodeMaterial ، لتخمين الميزات (أو غير المرتبطة) ... هل يحتاج هذا إلى مزيد من التطوير؟ هل هناك أشياء يمكن للمساهمين الآخرين القيام بها للمساعدة؟

sunag نعم ، سأكون فضوليًا أيضًا لمعرفة ما إذا كان لديك أي خطط أخرى في هذه المرحلة.

من الناحية النظرية ، يمكننا الآن استخدام العقد لعدة أشياء ، مثل:

• تنفيذ مواصفات glTF / مواد PBR اللامعة كمواد NodeStandardSG.
• دعم مجموعات وتحولات الأشعة فوق البنفسجية لكل خريطة
• تبسيط استخدام المواد المصنعة من خلال التركيب

تحتوي هذه المشكلات المحددة الآن على أمثلة لكيفية حلها باستخدام واجهات برمجة التطبيقات الحالية ، دون الحاجة إلى تعديل النواة:

المثيل:
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)

مجموعات الأشعة فوق البنفسجية لكل خريطة
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 ، لكن أعتقد أنه يجب علينا المضي قدمًا (على الأقل) في معالجة القضايا الثلاث المذكورة أعلاه. سيكون من المفيد أيضًا معرفة ما إذا كان الآخرون يرون NodeMaterial كبديل لنظام المواد الحالي أو بديل كامل.

يبدو أن الكتلة الحرجة تتشكل من قبل أصحاب المصلحة GLTFLoader ، وملاحظتي (الشخصية) هي أن الحاجة نشأت بسبب التوثيق غير الصحيح لـ onBeforeRender (أمثلة قليلة) وحتى أقل توثيقًا onBeforeCompile (مثال واحد).

pailhead بدأت في صيانة GLTFLoader لمعالجة مشاكل سير العمل في A-Frame ، وأنا أيضًا مطور. أوافق على أن الهدف هو نظام أكثر فائدة ، وليس تحميل تنسيق معين. يجب أن يعتمد تحديد كيفية دمج (أو عدم دمج) مواد العقدة على مزايا المستخدمين النهائيين لمكتبة three.js - الميزات والمرونة وواجهة برمجة تطبيقات مفهومة.

أنت محق في أن الخطافات onBeforeCompile و onBeforeRender مرنة بشكل لا نهائي ؛ لا يوجد حد عملي للمدى الذي يمكنك من خلاله معالجة المظلات الأساسية أو استبدالها. لكن كلاهما معيب بالمثل مثل واجهة برمجة تطبيقات المواد الأولية:

1. يفرض بناء جملة WebGL في واجهة برمجة التطبيقات المادية حتى مع الميزات البسيطة نسبيًا
2. يعتمد على معالجة الخيط لمظلات المواد الأساسية ، مما يجعل التغييرات في المواد الأساسية أكثر صعوبة بمرور الوقت ، وأكثر هشاشة
3. أقل قابلية للفنانين
4. عمليا غير متسلسل

من المؤكد أن المصممين (على سبيل المثال # 14206) يحسنون هذا من منظور المستخدم - ولكن إذا كان تطوير الميزات المستقبلية للمواد يعتمد على زخارف معقدة بشكل متزايد فوق تظليل المواد الحالية ، فهذا يمثل خطرًا على قابلية الصيانة في رأيي.

مواد العقدة ليست مثالية ، لكنها مستخدمة على نطاق واسع في أدوات الرسومات الأخرى ، ولها مزايا رئيسية:

1. مرنة وقابلة للتكوين
2. يحتفظ بطبقة تجريدية من تظليل WebGL الداخلي للمكتبة دون إزالة الوصول إلى التظليل العادي عند الحاجة
3. التمثيل المادي المشهور على نطاق واسع للفنانين ومطوري الألعاب
4. يمكن إجراء تسلسل إلى حد ما على الأقل (على الرغم من أن التحويل إلى تنسيقات أخرى لا يزال صعبًا)

ربما يبدو هذا وكأنني أقول إنه يجب إهمال onBeforeCompile ، ولا أقصد ذلك - يسعدني أن أراها ثابتة ، والأمثلة مرحب بها. لكنها ليست واجهة برمجة تطبيقات أريد توجيه مستخدمي A-Frame أو three.js إليها في حالات أكثر من اللازم ؛ لا أعتقد أنه يقارن جيدًا مع أنظمة المواد في الأدوات ثلاثية الأبعاد الأخرى.

• الاحتكاك بتضمين العديد من الملفات الفردية

لا ينبغي أن يكون هذا احتكاكًا. أعتقد أنه سيكون من المفيد إجراء نوع من الاستبيان أو شيء من هذا القبيل ، لمعرفة عدد الأشخاص الذين يستخدمون الحزم وأدوات الإنشاء. لا ينبغي أن يكون استيراد ملفات js في ملف html يدويًا أسلوبًا في عام 2018. هذا هو الرقم الوحيد الذي يمكنني العثور عليه ، وأعتقد أنه يمكن افتراض أن جميع هؤلاء المستخدمين يستخدمونه مع شيء يعمل مع العقدة.

كنت سأبذل المزيد من الجهد ، في اهتزاز الشجرة والقدرة بشكل صحيح على import/export هذا ، بدلاً من القلق بشأن كيفية عمل ذلك عند تضمين ملفات البرامج النصية يدويًا.

• عدم وجود محرر مرئي
• أمثلة قليلة نسبيًا ، مستندات

أعتقد أن هذا يجب أن يحدث قبل أن يصل إلى الصميم. يجب أن تكون مادة اللمعان المرآوية مثالاً لا يقترن بـ GLTFLoader . حقيقة أنه في /src أو /examples يجب ألا تكون ذات صلة؟

تضمين التغريدة

أنت محق في أن خطافات onBeforeCompile و onBeforeRender مرنة للغاية ؛ لا يوجد حد عملي للمدى الذي يمكنك من خلاله معالجة المظلات الأساسية أو استبدالها.

أنا لا أدعي هذا في الواقع ، أنا أدعي أن خطافًا مثل onBeforeRender يسمح بمقاربة مختلفة لهيكلة الكود ، لكن لا ينبغي استخدامه لأنه يُستخدم الآن في GLTFLoader (ومن ثم # 14099).

هناك قيود بالتأكيد على onBeforeCompile وقد يتم تسميتها بشكل غير صحيح. من الجيد الإشارة في هذا السياق إلى رقم PR # 14214 الأخير. بمجرد أن رأيت ما اختفى ( build() لصالح needsUpdate ) عرفت أنني سأرى onBeforeCompile هناك. لقد استخدمته كـ onBeforeParse لأنه إذا لم أستبدل أي بيانات #include <foo> ، فسيظل يتم تحليلها بعد هذه الوظيفة وقبل التجميع الفعلي. في هذا العلاقات العامة يتم استخدامه كـ onWillRefreshMaterial .

الفلسفة التي أحاول تجاوزها هي أنه ربما يجب أن يكون هناك مزيد من الدقة مع هذا النوع من عمليات الاسترجاعات. يجب أن يكون هناك المزيد منها ، ويجب توخي الحذر الشديد عند تسميتها.

# 14214 هو مثال رائع على لماذا لا يجب أن يكون NodeMaterial في الصميم. على الأقل لا يقترن بأي شيء /renderer ، ولا يتم تجميعه معه.

1. يفرض بناء جملة WebGL في واجهة برمجة التطبيقات المادية حتى مع الميزات البسيطة نسبيًا

لقد سمعت عن هذه المشكلة من قبل ولكن لم يتم التطرق إليها بالتفصيل. لماذا هذه مشكلة؟ ما هي "واجهة برمجة التطبيقات المادية" على أي حال؟ لقد رأيته دائمًا على أنه "إليك بعض مواد تظليل السطح الشائعة".

إذا كنت تريد خريطة ديناميكية ، فأنا لا أرى أي سبب يمنع استخدام 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 سنوات. شعوري الشخصي هو أن # 14206 سيجعل كتابة هؤلاء الزخرفة ممكنة ، وأقل مللًا ، وأقل هشاشة. إنها 30 سطرًا من التعليمات البرمجية التي لا تؤثر مطلقًا على أي شيء ، ما لم يتم تحديد هذه الخصائص الوهمية. إذا كان لدينا بالفعل حبل لنعلق أنفسنا به على شكل onBeforeCompile فلماذا لا نجعله أكثر إنسانية؟ :ابتسامة:

في النهاية ، أود أن أقرر بنفسي ما هو المستوى المقبول للهشاشة وما هو غير ذلك.

1. أقل قابلية للفنانين

لهذا السبب يجب أن يكون لدى الفنانين أداة بصرية ، ونوع من التنسيق لحفظ الرسوم البيانية فيه. يجب أن يكون استهلاكها كـ GLSL "مخبوز" أو أي شيء ينشئ NodeMaterial في وقت التشغيل اختيارًا متاحًا للمستخدم.

يمكن للفنان إنشاء تظليل ، ويمكن للمهندس أن يطلب "تجميعه" لتحسين عملية التحميل. يمكن للفنان الذي يعمل بمفرده تحميل الرسم البياني ، على افتراض أن ذلك أسهل لسبب ما (يتطلب "التجميع" مزيدًا من الجهد).

أيضًا ، لماذا وكيف يتم النظر إلى الفنانين هنا؟ هل هناك بعض الإحصائيات ، كيف يبدو مستخدم "الفنان" العادي ، ولماذا يعملون مع three.js وليس الوحدة ، أي. ما هو نوع خط الأنابيب هذا. هل هناك مهندسون متورطون ، فلماذا لا توجد أداة قائمة بذاتها تتواصل مع three.js بطريقة أو بأخرى تعتمدها بعض الأدلة التقنية وما إلى ذلك. أفترض أن التنزيلات بمعدل 40 ألف نانومتر في الدقيقة في الأسبوع ليسوا فنانين. هناك افتراض بأن هذا النوع من التثبيت يتم استخدامه بواسطة بعض أدوات البناء ومن غير المرجح أن يتم استيراده يدويًا.

في كل من هذه النقطة و 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 إذا كنت ترغب في إجراء هذه المناقشة ، فقد يكون من الأفضل القيام بذلك في مصمم العلاقات العامة ، # 14206. أنا متواجد في وضع عدم الاتصال لجلسة عمل على الجعة أو القهوة في أي مكان في منطقة الخليج:

وافق على أن الملفات المتعددة _لا يجب_ أن تكون احتكاكًا ، وأنها ليست حجة في حد ذاتها لوضع NodeMaterial في src/ . إنه ببساطة أحد الأسباب العديدة لعدم استخدام NodeMaterial بكثافة حتى الآن ، وهناك طرق أخرى لحل ذلك. وأنا أوافق بالتأكيد على أن المزيد من المستندات سيكون شرطًا أساسيًا لوضع NodeMaterial في src/ ، أو حتى لدفع التبني في examples/js أو إخراج بناء منفصل.

أنا متفائل بشأن NodeMaterial كإتجاه عام ، على الرغم من أنني أشك في أن هناك بعض الأشياء الأخرى المطلوبة قبل أن يكون لها معنى في src/ . أنا قلق جدًا بشأن استخدام onBeforeCompile والتلاعب بالسلسلة كمسار لوضع ميزات جديدة في نظام المواد ، كما هو موضح أعلاه ، وخاصة عندما نتحرك نحو دعم WebGL2 و (في النهاية) WebGPU . هذا لا يعني أن هذين الخيارين هما الخياران الوحيدان ، ولكن (من الاثنين) هذه هي أفكاري.

فيما يتعلق بالنقاط الأخرى ، يبدو أننا نتفهم مخاوف وتفضيلات بعضنا البعض ، لكننا لا نزال نختلف. لقد كتبت كل ما لدي من الوقت لكتابته في هذه المرحلة ، وسأجلس بعيدًا عن هذا لبعض الوقت وأسمح للآخرين بالتأثير فيه. شكرًا لك على مناقشة شاملة ومهذبة حول هذا الموضوع. 🙂

أرغب في وضع نسيج انسداد محيط مع Multiply على نسيج منتشر ، لذلك أحاول ما يلي:

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

هذا هو نسيج AO الخاص بي

لسوء الحظ ، كنت أرى انسدادًا محيطيًا في نموذجي.

هل لديك أي فكرة لفعل ذلك؟
أتمنى أن يكون هذا هو المكان المناسب لنشر سؤالي.

شكرا!

أود أن أكون قادرًا على التفكير في اتجاه التعيين من الأدوات القائمة على العقدة الحالية إلى المواد الموجودة في threejs. وبالتالي ، أود أن أرى NodeMaterial في src / جنبًا إلى جنب مع الوثائق المناسبة.

IARI

هل يمكنك من فضلك سرد الأدوات القائمة على العقدة؟

تضمين التغريدة

شكرا لكم على الرد :)

لسوء الحظ أعتقد أننا ما زلنا لا نفهم بعضنا البعض. إذا كان لديك الوقت لقراءة هذا المنشور ، فهذه الأشياء:

أنا قلق جدًا بشأن استخدام onBeforeCompile ومعالجة السلسلة كمسار لوضع ميزات جديدة في نظام المواد ،

onBeforeCompile أمر مروع ، أوافق ، السبب الوحيد لمشاركتي في أي من هذه الخيوط هو أنني أريد # 13198 الذي أراه أفضل من معالجة السلاسل onBeforeCompile .

لا ينبغي أن يكون هذا نمطًا لإضافة ميزات جديدة إلى three.js. يجب أن يسمح للمستخدمين بإضافة ميزات جديدة إلى تطبيقاتهم. أنا حزين لأن bhouston لم يشارك أي نتائج حول الحفاظ على شوكة للقيام ببعض هذه الأشياء. سأكون فضوليًا إذا قاموا بإنشاء إطار عمل أفضل لتغيير التظليل ، أو قاموا بالفعل باختراق جوهر هذه الميزة.

في حالة تحويلات الأشعة فوق البنفسجية لكل قناة ، سأجعل ذلك مثالاً ، أو وحدة npm. إذا قام 3 أشخاص بتنزيله كل أسبوع ، فمن المحتمل أنه شيء لا يفترض أن يكون في جوهره. إذا قام 20 ألف شخص بتنزيله ، فمن المحتمل أن تكون هذه هي الطريقة التي يجب أن يتم تصميم ثلاثة ملفات js بها في المقام الأول.

onBeforeCompile سيكون أمرًا بالغ الأهمية لمواد العقدة ، https://github.com/mrdoob/three.js/pull/14214 ، لذا فهي لا تُستخدم فقط للتلاعب بالسلسلة .

لدي onBeforeCompile و NodeMaterial للقيام بذلك ، أطلب خيارًا ثالثًا. أكثر ملاءمة من onBeforeCompile وأصغر بكثير من NodeMaterial .

مع الأمثلة الحديثة:
https://github.com/mrdoob/three.js/pull/14206

مناقشة قديمة:
https://github.com/mrdoob/three.js/pull/13198

pailhead بالنسبة للمبتدئين ، أود أن أفكر في عدد قليل من عقد دورات الخلاط الأساسية.
أود أيضًا أن أجد أنه من المثير للاهتمام اللعب مع Unitys Shadergraph.

claudioviola يمكنك إضافة material.shadow أو الضرب بـ diffuse material.color = diffuse * oclusion . يعتمد الانسداد على الضوء غير المباشر ، AmbientLight ، HemisphereLight ...

IARI

أقوم بتنزيل 7.5 gigs of Unity للتحقق من ShaderGraph: قليلاً_ابتسامة_الوجه:: لست متأكدًا مما إذا كان ذلك مؤهلًا كأداة لبناء الرسوم البيانية للتظليل ، أعتقد أنها أداة لبناء رسوم بيانية تظليل للوحدة. هل توجد أي أدوات قائمة بذاتها لتأليف الرسوم البيانية؟ أريد أن أرى أي نوع من الملفات يحفظ الرسم البياني أيضًا ، وكيف سينتقل إلى three.js و NodeMaterial في /src .

أعتقد أن pailhead في عزلة عن نقل NodeMaterials إلى النواة في هذه المرحلة الحالية. لا أعتقد أنه من المفيد للجميع أن يتجادلوا مع

هذا لم يتم التسرع فيه ولم يتم فرضه. أضاف Sunag هذا منذ سنوات. هناك الآن حاجة لهذا ولم تنجح البدائل الأخرى (على سبيل المثال مدمجة) ، لذلك دعونا نجرب هذا المسار.

كل أداة رئيسية ، 3DS Max ، UE4 ، Blender ، Unity ، Maya ، Sketchfab تستخدم الرسوم البيانية المظللة. إن القول بأن Three.js يجب أن يكون في وضع غير موات بشكل دائم في هذا الصدد يبدو غير عادل بالنسبة إلى three.js.

لست متأكدًا مما إذا كان نظام تظليل الرسم البياني هذا مثاليًا في هذا الوقت ، ولكن بمجرد أن يصبح في جوهره ، يمكننا جميعًا مواصلة العمل معه.

أنا أصر على أننا نواصل دعم واجهة برمجة التطبيقات الخاصة بـ PhoneMaterial ، و StandardMaterial ، وما إلى ذلك بطريقة ما للمضي قدمًا حتى لا نكسر 95٪ من المشاريع الثلاثة ، فإن القيام بذلك سيكون غير مسؤول. من الجيد أيضًا العمل مع واجهات مبسطة ومباشرة.

ليس لدي لا القدرة ولا الرغبة في منع هذا من الانتقال إلى الجوهر. أنا فقط آمل أن يتمكن من إلغاء حظر بعض العلاقات العامة غير ذات الصلة ، لأنه تمت الإشارة إليها على أنها مانع. bhouston ، لم أقصد أبدًا الجدال معك أيضًا ، كنت وتجاربك معها.

عندما ألتقي بفنان ثلاثي الأبعاد جائع ، أحب كل الأشياء التي تعتمد على العقدة. كان Nuke الملحن المفضل لدي ، وأود أن أتعلم كيفية صنع أدوات من هذا القبيل. أتمنى فقط أن يؤدي هذا إلى إلغاء حظر هذا على وجه الخصوص # 14231. أنا أستخدم هذا كمنصة تعليمية لنفسي ، ولكن إذا كان الأمر مزعجًا ، فسأتوقف عن النشر ، شكرًا لك.

pailhead لم أعمل معها مطلقًا ، لكن ربما سمعت عن مصمم المواد؟ بقدر ما أفهم ، فإن هذه الأداة تتجاوز أيضًا تأليف الرسوم البيانية / التظليل - لكنها تركز بشكل أساسي على التصميم الإجرائي للمواد - ربما يكون هذا دليلًا مثيرًا للاهتمام؟

بخلاف ذلك ، لا أعرف أدوات قائمة بذاتها من أعلى رأسي ، لكن بحث Google السريع أسفر عن هذين الأمرين:

• https://victhorlopez.github.io/editor/
• http://www.shaderplay.com/products/nodeflex/overview/overview.html
  يبدوا مثيرا للأهتمام.

ومع ذلك ، هناك أيضًا هذه الأداة الخاصة بعقد threejs ، والتي وجدتها في منشور على تويتر بواسطة

يبدو أنه تمت الإشارة إلى هذه الأداة هنا ، لكني لا أرى طريقة لتصدير أي شيء. يبدو الرابط الأول مذهلاً ، لكن الإخراج شديدي جدًا ، وليس مقروءًا جدًا مقارنة بـ GLSL. أتساءل عما إذا كان يمكن استخدام ذلك بالفعل لإعادة تجميع NodeMeterial ، أو حتى ShaderMaterial .

ألقيت نظرة على الوحدة ولكني لم أتمكن من العثور على أداة الرسم البياني التظليل ،

راجع للشغل إذا قمت بحظر هذا بطريقة أو بأخرى ، دعه يتم إلغاء حظره بكل الوسائل. العلاقات العامة من عام 2015 ، لقد استجبت لأول مرة منذ 8 أيام.

(آسف ، هذا بعيد المنال بعض الشيء ..)
pailhead لـ Unity shadergraph: أنت بحاجة إلى بدء مشروع وحدة باستخدام قالب خط أنابيب العرض الخفيف الوزن. تأكد من فتح Unity Package Manager وتحقق من أنك تستخدم أحدث إصدار من حزمة Render-pipelines.light.
إليك برنامج تعليمي لإعداده بدءًا من مشروع جديد قيد الإعداد: https://youtu.be/Ar9eIn4z6XE؟

محرر عقدة المواد Sea3D Flow (http://sea3d.poonya.com/flow/) هو بواسطة sunag ، نفس الشخص الذي كتب NodeMaterial.

شكرا جزيلاsunag
كيف يمكنني الحصول على الضوء غير المباشر؟ هل هي قيمة في العارض أم كيف يمكنني حسابها؟

أود تطبيق تأثير المعالجة اللاحقة على مجموعة مختارة من الكائنات فقط (أي تغيير التشبع).
ومع ذلك ، لا يمكنني العثور على أي شيء يتعلق بإخفاء العقد (إذا لم تكن هناك طريقة أخرى).
أقرأ حاليًا من خلال OutlinePass (بدون عقدة) التي تكتب مجموعة من الأشياء إلى مجموعة من المخازن المؤقتة ، والتي يمكنني رؤيتها كطريقة مجدية لتحقيق ما أريد - لكن ليس لدي أدنى فكرة عن كيفية الاقتراب هذا مع العقد.

سيكون محرر عقدة المواد Sea3D Flow مستقلاً مثل محرر three.js ، أم سيكون جزءًا منه؟ هل سيظل اسمه Sea3D أو أي شيء آخر متعلق بـ three.js؟ شكرًا لك sunag على إصدار هذا المحرر المرئي لمجتمع three.js.

لكن ليس لدي أدنى فكرة عن كيفية التعامل مع هذا مع العقد.

IARI

يبدو أنك تعرف GLSL لأنك قادر على قراءة OutlinePass وفهم ما يفعله. يبدو أيضًا أنك تفهم ذلك بشكل كافٍ لترى أنه لا يمكنك تحقيق ذلك باستخدام العقد. اعتقدت أنه إذا كنت تعرف كيفية ترميزها ، فستعرف كيفية ربطها. أكثر من ذلك ، إذا كنت لا تعرف كيفية ترميزها ، فقد تعرف كيفية عقدها. أين هو الانفصال؟

لم أر هذه المنشورات من عام 2016 على الإطلاق. من المثير للاهتمام أن نرى شادر الضفدع. أتساءل عما إذا كان يمكن اعتبار هذا على أنه vim vs emacs أو شيء من هذا القبيل. أحب استخدام Sublime Text ، فأنت ترغب في استخدام شيء آخر. يحب المرء استخدام shader frog ، وآخر يحب استخدام محرر Three.js's Sea3D.

أنا أحب الطريقة التي يخرج بها Shader Frog تظليلًا ، لكنه ليس مفتوح المصدر مثل Sea3D.

ثم هناك هذا.

يبدو وضع ميكانيكا منتجات الطرف الثالث في جوهر شركة Three ميزة غير عادلة ولا أفهمها سياسيًا.

بالنسبة لي ، حقيقة أن كل هذا يمكن تحقيقه بدون ثلاثة تغييرات تعني أنه غير ضروري ، ويؤدي إلى تشويش الخط الفاصل بين Three.js كونها واجهة برمجة تطبيقات لغلاف الويب وتحرك الآن ميزات محددة للتنفيذ. يعد تخزين بيانات عقدة التظليل محددًا للغاية للتطبيق وبقدر ما أعرف لا يوجد حاليًا تنسيق قياسي لمحرر العقدة الشائعة لأي برنامج؟ قد يكون فرض أحدها ضارًا بالتطبيقات الأخرى.

تضمين التغريدة
لا يمكنني الانتظار حتى NodeMaterial إلى

أعتقد أن pailhead في عزلة عن نقل NodeMaterials إلى النواة في هذه المرحلة الحالية.
أعتقد أن المشروع لا ينبغي أن يكون مدينًا بفرد واحد.

شكرا لك.

لا أرى أي سبب لعدم إمكانية تحقيقه مع العقد بنفس الطريقة التي يقوم بها outlinepass - ولكن بطريقة يمكن قراءتها ومفهومة وقياسية بحيث يمكن إعادة استخدام الأجزاء.
لماذا لا يوجد على سبيل المثال عقد الإخراج التي تكتب إلى المخازن المؤقتة والأشياء.

وأنا حقًا لا أعرف glsl جيدًا ، وأجده أيضًا - عفواً عن صياغتي - ألم شديد في المؤخرة لقراءة وكتابة كود التظليل. علاوة على ذلك ، سيكون الأمر مؤلمًا للغاية إذا تم تغليفه في مجموعة غبية في سلاسل في كود جافا سكريبت.

هل تستخدم حزمة الويب أو شيء من هذا القبيل؟

مجموعة غبية

إنه أمر غبي فقط إذا كان عليك استيراده إلى ملف .html. عندما تعمل مع حزمة الويب ولديك بنية JS الحديثة ، يمكنك الاحتفاظ بـ GLSL في ملفات .glsl و .vs و. fs والحصول على تمييز بناء الجملة وما شابه.

shader.fs:

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

جافا سكريبت (انظري يا أمي ، لا مصفوفات غبية)

import mShader from './shader.fs'

ما يقلقني هو أنني لا أرى قيمة كبيرة في حاجتك لأنك تسأل على وجه التحديد عن كيفية إنشاء تأثير ، وليس كيفية كتابة شيء ما. هل سيفتح NodeMaterial الأبواب أمام الآلاف من أسئلة "كيف يمكنني تظليل هذا التأثير" ، والتي سيكون لها إجابة عامة:

استخدم العقد ، لوك!

لا ، إن الاضطرار إلى قراءة (ناهيك عن الكتابة) رمز بلغتين مختلفتين في نفس الملف بالنسبة لي هو دائمًا أمر يصعب رؤيته. كما أن حزمة الويب لا تساعد شيئًا ، عندما تحاول دراسة كود تظليل ثلاثي الأبعاد على سبيل المثال والذي يتم تغليفه جميعًا بمصفوفات سلسلة قبيحة مرتبطة بفواصل الأسطر.
على أي حال ، هذه المشكلة تتعلق بنظام العقدة ، وقد طرحت سؤالًا بسيطًا حول العقد - وليس لمناقشة تفضيلات الترميز الشخصية - لا يقودنا إلى أي مكان.

IARI

معذرةً ، بطريقة ما لم أر أي علامات استفهام في منشورك ، لذا فاتني سؤالك.

لا ينبغي أن يكون هذا بالتأكيد مناقشة حول تفضيلات الترميز الشخصية ، ولكن يجب مراعاة حقيقة وجود اختلاف. كما أنني قلق قليلاً بشأن فورة أسئلة "كيف أجعل هذا التظليل".

من قبل ، كان هذا الشريط مرتفعًا جدًا ، كان الأشخاص يتخلون عن i don't know glsl أو عندما يرون "مصفوفة غبية في السلاسل". ولكن إذا كان أقل ، فسيحاول الجميع كتابة تظليل.

لم أجد سؤالك ، لكنني أشعر بالفضول لمعرفة ما هو. فعلا:

كيف أقوم بعمل ToonShader باستخدام NodeMaterial؟

في هذه الحالة ، أشعر بالفضول لمعرفة الإجابة.

لا يمكنك ذلك لأن NodeMaterial لا تدعم بعض التجريد.
يمكنك فقط استخدام NodeMaterial لربط العقد

ربما هذه المناقشة يمكن أن تستفيد من تفصيلها؟ إنه عدد كبير من المنشورات ، يعود حقًا إلى الوراء (2015). NodeMaterial موجودة في / أمثلة ، لذا يمكنك على الأرجح بناء تظليل toon الخاص بك منه. ربما يمكنك فتح مشكلة أخرى أو النشر على مكدس الفائض لذلك على وجه التحديد ، ويمكن أن تنتقل بقية المحادثة إلى مشكلة جديدة؟

يمكننا بكل سرور أن نأخذ هذه المناقشة في مكان آخر ، مثل قناة Slack أو أي شيء آخر - لدي شعور حقًا أنها لا تنتمي إلى هنا ، ولكنها ستزعج الناس في الغالب.

قد يكون المنتدى أفضل من الركود لهذه الحالة بالذات.

pailhead ، لقد خرجت هذه المناقشة بأكملها عن كونها منتجة. قد يتم إغلاق هذه المشكلة أيضًا وجعل واحدة جديدة تركز على المشكلة الفعلية المطروحة.

تضمين التغريدة

متفق عليه ، إلا أنني أعتقد أنها قضايا متعددة.

• كيفية تنفيذ nodematerial
• يجب حظر العلاقات العامة الأخرى ذات الصلة وغير ذات الصلة
• كيفية السماح للأشخاص الذين لا يعرفون كيفية كتابة التظليل بتنفيذ تأثيرات تظليل معينة

كيف أقوم بعمل ToonShader باستخدام NodeMaterial؟
في هذه الحالة ، أشعر بالفضول لمعرفة الإجابة.
لا يمكنك ذلك لأن NodeMaterial لا تدعم بعض التجريد.
يمكنك فقط استخدام NodeMaterial لربط العقد

مضحك جدا. أتفق معbhouston ... يمكن أن يكون هذا مجرد مزحة. هل يمكن أن ترى المثال webgl_materials_nodes قبل أن تقوله؟

وإذا كنت تريد استخدام التعليمات البرمجية ، فراجع التعبير باستخدام FunctionNode .

sunag أعتقد أنك أسأت فهمي. كنت أشعر بالفضول لمعرفة السبب ، إذا كان هذا حاليًا /examples وليس /src يتم تحويل هذا إلى مواطن من الدرجة الأولى. يبدو أن هذه المشكلة قد أثيرت من قبل AndrewRayCode مرة أخرى في عام 2015.

لقد قلت للتو أن هذه القضية مثقلة بالأعباء ، من امتدادها إلى عام 2015 ومن مناقشة مواضيع مختلفة مختلفة. إذا سأل أحدهم "كيف أقوم بعمل whatever " فسيتم إحالته إلى تجاوز سعة المكدس.

إذا كان هذا سيكون إصلاحًا شاملاً لـ three.js _ (حقيقة أن الوحدة يجب أن يتم تكوينها خصيصًا لهذا الأمر تخيفني إلى حد ما) _ فأعتقد أنه يجب أن تكون هناك مشكلة مستمرة مخصصة هنا على github لمثل هذه الأسئلة - usage of NodeMaterial . كما هو الحال ، تتم إحالة الأشخاص الذين يطلبون أشياء عشوائية (# 14232) إلى هذا الموضوع ، مما يجعل الاتصال فوضويًا :)

اضطررت مؤخرًا إلى كتابة تظليل toon ولكنه كان قائمًا على الخطوط ، وبشكل أكثر تحديدًا خطوط WestLangley السمينة. لذلك حتى مع الحاجة إلى "toon" shader ، كان من الممكن أن يكون المنجم مختلفًا تمامًا. قد يتضمن أيضًا نقل خطوط الدهون إلى NodeMaterial الأمر الذي قد يستغرق من يعرف كم من الوقت. هذه كلها مواضيع مختلفة معقدة هنا.

وإذا كنت تريد استخدام التعليمات البرمجية ، فراجع التعبير باستخدام FunctionNode.

إذا كنت سأستخدم نصًا ساميًا ، فإن ShaderMaterial جيد بالنسبة لي لا حاجة لـ FunctionNode . إذا قمت بإنشاء تأثيرات بصرية ، فربما سأبحث في محرر مرئي ، لكن هذا هو المفضل لدي. أنا هنا فقط لأن هذا منع العلاقات العامة الأخرى :) لقد أدركت منذ وقت ليس ببعيد أنه من مصلحة الثلاثة أن يهبط هذا في أسرع وقت ممكن. ربما يساعد فك تشابك هذه المحادثة في تسريع الأمور. في هذا أتفق مع bhouston يجب أن يكون هذا yolod في أسرع وقت ممكن!

شكرا لك.

للتسجيل: لست مهتمًا بـ toon shader أو أي شيء من هذا القبيل.
أقوم بتطبيق نظام يسمح للأشخاص الذين لا يكتبون رمزًا بتوصيل تأثيرات بسيطة محددة مسبقًا في مواقع معينة.

للأسف ، أخشى ألا يكون لدي الوقت لدراسة كيفية كتابة العقد في الوقت الحالي ، ولا بد لي من اللحاق بركب الترميز glsl الأساسي على أي حال ، لذلك في الوقت الحالي سأقوم بتنفيذ أشياء بدون عقد: لن يكون قابلاً للتمديد ، سيستخدم ممرات تصيير متعددة حيث من المحتمل أن يكون واحدًا كافيًا مع تنفيذ جيد للعقدة ، وسيكون أقل قابلية للقراءة ، ...

الكل في الكل للأسف ، أنا جديد في الموضوع العام وأحتاج إلى الحصول على فهم أساسي أكثر بكثير ، ولكن بناءً على ما أعرفه ، ستكون العقد هي أفضل طريقة للقيام بذلك بطريقة أنيقة وقابلة للتمديد حقًا.
أرغب تمامًا في الحصول على بعض المعلومات حول تنفيذ العقد مثل مقالة مدونة أو برنامج تعليمي.

إخلاء المسئولية: أنا لا أطالب بأي شيء ، فقط آمل أن أوضح طلبي الغامض من الأعلى.
شكراً لكم جميعاً على كل العمل المنجز هنا - إنه لأمر مدهش للغاية.

لقد طُلب مني في سلسلة الرسائل https://github.com/mrdoob/three.js/issues/14232 للتعليق على تنفيذ التظليل المستند إلى Node. أعتقد أنها فقيرة للغاية. تعجبني الفكرة ، لكن التنفيذ غير كافٍ تمامًا من وجهة نظري ، لذلك ، بما أنني سلبي جدًا ، سأقدم بعض الأسباب الملموسة للسبب.

القابلية للفهم

بعد قراءة بعض التعليمات البرمجية الخاصة بالعقد وفئات المرافق المختلفة - يمكنني القول بلا ريب إنه يمثل تحديًا كبيرًا لفهمه.

• أسماء المتغيرات غير وصفية
• لا يوجد تعليقات على الإطلاق
• أسماء الطرق غامضة أو مضللة تمامًا. (على سبيل المثال ، ما رأيك في طريقة "البناء"؟ - تخمين)

هيكل الكود غريب تمامًا. ضع في اعتبارك هذا المقتطف:
https://github.com/mrdoob/three.js/blob/e2b49c017b2d1f37ab34317033a27df7b5a71d4d/examples/js/nodes/FunctionNode.js#L39 -L50

يمكنك تحقيق الشيء نفسه مع:

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

"العمارة الناشئة"

ما هي "العقدة"؟ أنا أطلب تعريفًا لهيكل البيانات ، لأنه يبدو أنه مجرد مفهوم غامض نظرًا لوجود القليل من القواسم المشتركة بين "العقد" المختلفة ، يبدو الأمر مثل ducktyping ، إذا كان يندفع مثل العقدة - إنها عقدة.

فصل الاهتمامات

كيف تنتقل من Node إلى ShaderMaterial ؟ في الوقت الحالي ، هناك مزيج من المسؤوليات بين أجزاء مختلفة من المنطق من كل عقدة ، وبعض البناة ، وبعض ذاكرة التخزين المؤقت ، والموزعين ، إلخ. لا توجد مسؤولية واضحة عن هذه العملية. يستخدم العقدة NodeBuilder؟ ماذا ...؟ من الاسم الذي كنت سأحصل عليه على الرغم من أن NodeBuilder هو مصنع ينتج أو يبني العقد ، حيث اتضح أنه في الواقع بنية مساعدة. بقدر ما أستطيع أن أقول ، هناك وظائف متميزة إلى حد ما يجب القيام بها هنا:

• أنشئ رسمًا بيانيًا
• تحقق
• بناء تمثيل متوسط
• تحسين
• ترجمة إلى GLSL

هذا ليس على الإطلاق ما ستجده في الكود الحالي.

استنتاج

بدون وثائق وتعليقات جيدة ، أرى أن هذا التنفيذ غير كافٍ على الإطلاق. مع وجود هذه الأشياء في مكانها ، فإن الأمر يتعلق برمز السباغيتي ونقص التصميم. مع ما يقال - أقر بأنها أداة قوية وتنفيذ عملي لمفهوم مفيد للغاية.

Usnul لن نقوم

والسبب هو أن "=>" تنشئ وظيفة يجب استدعاؤها في كل إدخال. استدعاءات الوظائف بطيئة جدًا في JavaScript مقارنةً بحلقة for-loop أو while-loop. وبالتالي نقوم دائمًا بعمل حلقات صريحة بدلاً من التعليمات البرمجية الموجهة لرد الاتصال. أعلم أنه أكثر تفصيلاً ولكنه ضروري. الثلاثة .. JS مثل هذا وعن قصد.

Usnul ، مخاوف التصميم الخاصة بك مفيدة جدًا ، هل يمكنك المساعدة في بعض إعادة البناء بعد ذلك؟ أعتقد أن الجميع سيقدرون مساهماتكم ومساهماتكم في التصميم. :)

والسبب هو أن "=>" تنشئ وظيفة يجب استدعاؤها في كل إدخال. استدعاءات الوظائف بطيئة جدًا في JavaScript مقارنةً بحلقة for-loop أو while-loop. وبالتالي نقوم دائمًا بعمل حلقات صريحة بدلاً من التعليمات البرمجية الموجهة لرد الاتصال. أعلم أنه أكثر تفصيلاً ولكنه ضروري. الثلاثة .. 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 هل يمكنك المساعدة في إعادة تشكيل الكود لأخذ هذه الأمور في الاعتبار؟ أعتقد أن إعادة الهيكلة يجب أن تكون سهلة ، أليس كذلك؟ أنا مؤيد كبير لـ Code Complete ، وقد أثر هذا الكتاب علي كثيرًا.

usnul إذا كنت لا تحب هذا ، فأنت حر في إعادة بناء هذا؟ لا يهم ما إذا كان يبدو هكذا أم لا ، من المهم فقط أن يتم بناؤه فوق هذا ، حسب ما أفهمه.
لا أعرف ما إذا كان يجب أن تحدث المنكسرات أثناء وجود ذلك في أمثلة (أو ربما إعادة شراء أخرى) أم يجب نقلها إلى src على الفور كما

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 هل هناك أي شيء يمكن للآخرين القيام به لمساعدتك في هذا المشروع؟ سأكون على استعداد لكتابة الوثائق ، إذا كنت مستعدًا للمستندات ويمكنك مراجعتها.

سيكون هذا رائعا. لا شك أن يساعد كثيرا.

نظام المواد القائم على العقدة يبدو مذهلاً ، سوف يوسع قوة التعبير.

كيف سننتقل من نظام المواد الحالي إلى نظام المواد القائم على العقدة في النواة؟ هل سنستبدل النظامين الحاليين بالعقدة؟

عذرًا ، ربما لا أعتقد أنني سألتقط هذا الموضوع لأن هذا الموضوع ضخم جدًا ...

هل سنستبدل النظامين الحاليين بالعقدة؟

أرى أن الاستبدال هو الهدف النهائي ، وهو أفضل للأداء والصيانة. تتمثل الخطوة التالية في إنشاء MeshStandardNodeMaterial ومواد أخرى في النواة تعمل تمامًا مثل النواة في الشكل المرئي وبناء الجملة والأداء.

ويب https://github.com/mrdoob/three.js/pull/14333

يجب أن أعرض shadowMap في مشروعي.

لدي مشهد بضوء اتجاهي و 2 هندسة تستخدم MeshStandardNodeMaterial.

لقد فتحت
castShadow = صحيح للضوء
castShadow واستلام الظل لكلا الجسمين.
shadowEnabled = صحيح للعارض

لماذا لا يعمل؟
هل يجب علي استخدام خاصية الظل لـ MeshStandardNodeMaterial؟ هل هذا هو الغرض؟

يمكن لأي شخص أن يساعدني؟
شكرا!

تضمين التغريدة
أسئلة الدعم انتقل إلى منتدى stackoverflow.

sunag هل تعتقد أن NodeMaterial مستقر بدرجة كافية حتى نتمكن من البدء بتوفير ملفات إعلان TypeScript؟ إذا كنت لا تخطط لإجراء تغييرات رئيسية في واجهة برمجة التطبيقات في المستقبل القريب ، فسأبدأ بهذه المهمة نظرًا لأن NodeMaterial هي المجموعة الأخيرة من الوحدات التي لا تحتوي على دعم TS.

sunag هل تعتقد أن NodeMaterial مستقر بدرجة كافية حتى نتمكن من البدء بتوفير ملفات إعلان TypeScript؟ إذا كنت لا تخطط لتغييرات رئيسية في واجهة برمجة التطبيقات في المستقبل القريب ، فسأبدأ بهذه المهمة لأن NodeMaterial هي المجموعة الأخيرة من الوحدات التي لا تدعم TS.

@ Mugen87 نعم ، يجب أن يكون هناك إضافات أكثر من التغييرات. إضافة دعم TS سيكون رائعًا. 👍

حسنًا ، دعم TS جاهز للإصدار التالي R017 🙌