Menarik!

@sunag Kami sangat tertarik dengan hal seperti ini. Bagaimana saya bisa membantu? Saya dapat menambahkan dukungan untuk Standar setidaknya.

Saya tertarik untuk membuat grafik yang cukup arbitrer, sehingga node perantara juga mengambil input. Jadi Anda dapat memiliki grafik yang terlihat seperti ini:

Tekstur (tex1, uv1)
B Tekstur (tex2, uv2)
C Campuran (A, B, mode)
D Kebisingan(param1, param2)
E Campuran (C, D, mode)

Dan kemudian gunakan simpul terakhir E, sebagai input ke Material.

Jadi sangat arbitrer, tidak sebatas tekstur saja.

Tujuan saya adalah membantu membuat ini dalam beberapa minggu ke depan, semoga berkolaborasi dengan Anda di minggu depan atau lebih jika memungkinkan. Saya melihat melakukan ini melalui perpustakaan shadergraph di sini: https://github.com/mrdoob/three.js/issues/7339 Tapi saya menemukan membuatnya di dalam ThreeJS secara langsung. Benar-benar solusi apa pun baik selama itu fleksibel dan berfungsi.

Saya membaca kode Anda, itu dirancang dengan cukup baik. Saya memiliki beberapa umpan balik awal. Bisakah saya memulai PR menggunakan kode Anda sebagai basis untuk mulai berkolaborasi?

(1) Saya akan meminta materi menyelesaikan referensi. Pada dasarnya referensi akan memiliki nama yang akan mereka minta untuk diselesaikan materi mereka, dan materi tersebut akan memberikan kembali potongan kode tentang cara mengakses data itu. Ini juga akan memungkinkan materi untuk mengetahui variabel apa (seragam/variasi) yang digunakan node, sehingga dapat mengoptimalkan dengan tepat. Ini juga memungkinkan bahan yang berbeda untuk menyelesaikan referensi secara berbeda, sehingga membuat node lebih portabel, daripada harus tahu bagaimana bahan mengimplementasikan sesuatu, terutama ketika ada perbedaan antara implementasi fragmen dan simpul.

(2) Saya mencoba menggunakan objek GeometryContext yang saya buat di refactor lampu, ini memberikan akses yang konsisten ke banyak variabel lokal yang diperlukan. Tapi tentu saja itu bisa diatasi dengan materi itu sendiri.

(3) Saya sudah UV hanya menjadi referensi lain, yang diselesaikan oleh materi. Dan saya ingin NodeTexture benar-benar mengambil Input Node, sehingga memungkinkan UV yang dihasilkan secara prosedural.

(4) Saya akan memanggil NodeCube, NodeTextureCube agar konsisten dengan Three.JS lainnya. Dan saya akan menghapus logika tentang bagaimana benar-benar melepaskan gips darinya. Tapi saya suka ide peta kubus standar, jadi saya sebenarnya tidak akan menempatkan kueri lingkungan untuk specular atau menyebar di node, tetapi memilikinya di bahan dasar phong, dan Anda hanya dapat mengontrol normal yang digunakan untuk kueri, atau hasil cubemap itu sendiri (sehingga memungkinkannya menjadi warna yang ditentukan secara prosedural.) Apakah itu masuk akal? Jadi saya akan memiliki pluggable normal dalam materi dan tekstur kubus yang dapat dicolokkan (ditanyakan dengan arah dan bias/lod, dan mengembalikan warna). Dengan demikian seseorang dapat memberikan tekstur kubus ke peta radiasi dan lainnya ke peta specular. Kita bisa menukar sampleCube benar dengan @tschw 's fungsi cubeToUV2 hanya sebagai swap simpul.

(5) Saya akan mencoba menambahkan NodeFunction yang memungkinkan seseorang untuk memanggil fungsi arbitrer dengan parameter sebagai tambahan untuk NodeOp Anda (atau mungkin mereka dapat digabungkan dengan cara tertentu.)

(6) Saya akan menyingkirkan semua kelas individu NodeNormal, NodeTransform, NormalMap, dll verbose dan hanya memiliki beberapa konstruktor sederhana yang membuat NodeReference dengan nama yang diselesaikan oleh materi yang sesuai. NodeReference dapat menyelesaikan seragam, variasi, serta nilai yang dihitung dalam shader.

(7) Saya tidak mengerti perbedaan antara NodeEnvironment dan NodeCube. Saya pikir NodeEnvironment mungkin tidak lengkap?

(8) Membingungkan jika NodePhong tidak diturunkan dari NodeMaterial. Meskipun saya melihat bahwa NodeMaterial berasal dari ShaderMaterial. Saya ingin tahu apakah Anda menyebut turunan langsung dari ShaderMaterial, GraphMaterial (atau NodeGraphMaterial) yang akan lebih masuk akal -- karena semua simpul membentuk grafik, dan grafiklah yang menjadi materi, bukan simpul individu.

(9) Saya akan menyarankan mungkin beberapa terminologi yang lebih bervariasi. Saya akan memanggil simpul root, MaterialNode, dan orang dapat memperoleh PhongMaterialNode darinya. Saya memiliki Vector3Node, FloatNode, dll yang berasal dari ValueNode -- tidak harus konstan, tetapi hanya sebuah nilai. Dengan demikian, seseorang dapat menyalurkan tiga FloatNodes ke Vector3Node. Saya pikir Anda dapat memiliki pembantu yang akan mendeklarasikan masing-masing dari satu baris ini daripada 10 atau lebih saat ini.

(10) Saya akan memindahkan nama "Node" dari awal nama kelas ke belakang karena begitulah di sisa proyek ThreeJS.

(11) Saya akan membuat kelas MaterialNode baru dan itu akan diinisialisasi dengan daftar seragam dan variasi. Secara default dapat menyelesaikan ini dan juga melacak yang telah diselesaikan sehingga orang dapat melacak fitur mana yang diperlukan. Dengan demikian, seseorang dapat memiliki penyelesaian terbatas dalam PhongMaterialNode turunan yang akan menyelesaikan kasus khusus dan bergantung pada kelas yang mendasarinya untuk melakukan yang sederhana (bervariasi, seragam.)

(12) Saya agak bingung antara perbedaan antara NodePhong dan NodePhongMaterial. Saya tidak menyadari ada keduanya sampai sekarang.

(13) ada kode seperti ini:

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

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

Tetapi di atas cuplikan ini Anda sudah mendefinisikan generate untuk NodeGL dan Anda tidak mendefinisikannya untuk NodeGLPosition -- jadi menurut saya ini adalah kesalahan salin-tempel-edit.

(14) Saya akan menyingkirkan NodeReflectUVW dan NodeRefractVector dan sebagai gantinya hanya membuat ini sesuatu yang dapat diminta dari materi melalui penyelesaian Referensi. Menghitung vektor refleksi lurus ke depan. Saya telah menambahkannya ke GeometryContext di cabang ThreeJS eksperimental yang tidak digabungkan.

(15) Cara saya menerapkan refleksi dan refraksi adalah menjadikannya sebagai input warna pada Material. Seseorang akan menyelesaikan Refect, ReflectLOD, dan Refract, RefractLOD dengan cara sederhana Anda akan menyelesaikan variabel apa pun, dan kemudian meneruskannya ke dalam kubus tekstur yang setara (berbasis prosedural atau samplerCube) dan kemudian meneruskan warna yang dihasilkan ke Material. Apakah itu cara Anda melakukannya?

(16) Saya bingung tentang input cahaya -- biasanya tidak ada lampu yang dapat dicolokkan, melainkan parameter cahaya sepenuhnya ditentukan di kelas cahaya. Saya kira Anda membutuhkan fleksibilitas tambahan ini? Bagaimana Anda membayangkannya.

@bhouston woow, terima kasih banyak umpan baliknya.
Saya akan membutuhkan beberapa posting untuk menjawab :)

Saya tertarik untuk membuat grafik yang cukup arbitrer, sehingga node perantara juga mengambil input. Jadi Anda dapat memiliki grafik yang terlihat seperti ini:
Tekstur (tex1, uv1)
B Tekstur (tex2, uv2)
C Campuran (A, B, mode)
D Kebisingan(param1, param2)
E Campuran (C, D, mode)

Saat ini sintaksnya seperti ini. Contoh animasi offset UV1:
Saya pikir NodeMaterial ke MaterialNode dan THREE.PhongMaterialNode Akan lebih baik juga.

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;

Saya pikir membalikkan urutan dengan saran Anda menjadi lebih baik (mode, A, B) menjadi (A, B, mode). Saya sedang dalam proses membuat peta refleks, peta kubus, dan lainnya...

Lingkungan dan Cubemap tidak lengkap.

Saat ini bug itu mungkin lebih banyak terjadi karena format converter masih belum selesai. Ini bertanggung jawab oleh konversi vektor. vec3 ke vec4 atau vec4 misalnya.

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

Campuran "tekstur" misalnya: (Saya belum menguji kode ini)
Itu dapat diimplementasikan dalam THREE.NodeOperator yang sama

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() bertanggung jawab untuk pembuat kode. Kode calcs disimpan dalam cache jika Anda ingin menggunakan lebih dari satu input tanpa kehilangan performa.

Masih saya tidak mengatur pointer atau konstanta untuk optimasi...

Kompilasi dilakukan dengan propagasi di build() untuk vertex dan kode fragmen.

Saya dapat menempatkan Anda sebagai kolaborator? Jika Anda ingin mengedit kode dengan cara apa pun, saya akan mengerjakannya juga.

Saya dapat menempatkan Anda sebagai kolaborator? Jika Anda ingin mengedit kode dengan cara apa pun, saya akan mengerjakannya juga.

Terima kasih! Saya akan membuat PR untuk Anda sehingga Anda dapat menyetujui perubahan.

Saya telah menambahkan Anda (serta @mrdoob , @WestLangley dan @tschw) ke proyek sampingan saya yang mencoba mendefinisikan satu set node yang dapat digunakan kembali dan definisi material yang dapat ditransfer di antara berbagai render. Ini dapat dipetakan ke sistem grafik shader yang telah Anda buat.

Saya tidak berpikir Anda harus memperhatikan repo yang baru saja saya berikan kepada Anda jika Anda tidak mau. Inilah yang saya minati untuk diterapkan di atas ini.

(2) Saya mencoba menggunakan objek GeometryContext yang saya buat di refactor lampu, ini memberikan akses yang konsisten ke banyak variabel lokal yang diperlukan. Tapi tentu saja itu bisa diatasi dengan materi itu sendiri.

Saya berharap bahwa lampu adalah satu LightNode. Perhatian saya adalah untuk memanfaatkan kode yang sudah dikembangkan untuk Three.JS.

(3) Saya sudah UV hanya menjadi referensi lain, yang diselesaikan oleh materi. Dan saya ingin NodeTexture benar-benar mengambil Input Node, sehingga memungkinkan UV yang dihasilkan secara prosedural.

Anda dapat mengganti UV ke vec2 apakah ini?

(5) Saya akan mencoba menambahkan NodeFunction yang memungkinkan seseorang untuk memanggil fungsi arbitrer dengan parameter sebagai tambahan untuk NodeOp Anda (atau mungkin mereka dapat digabungkan dengan cara tertentu.)

ini akan sangat bagus. terutama untuk BlendNode.

(6) Saya akan menyingkirkan semua kelas individu NodeNormal, NodeTransform, NormalMap, dll verbose dan hanya memiliki beberapa konstruktor sederhana yang membuat NodeReference dengan nama yang diselesaikan oleh materi yang sesuai. NodeReference dapat menyelesaikan seragam, variasi, serta nilai yang dihitung dalam shader.

Dalam pemikiran ini saya pikir MaterialNode bisa menjadi bahan dasar Phong dan bahan Fisik.

(7) Saya tidak mengerti perbedaan antara NodeEnvironment dan NodeCube. Saya pikir NodeEnvironment mungkin tidak lengkap?

Saya masih tidak bisa menyelesaikan Nodes ini.

(8) Membingungkan jika NodePhong tidak diturunkan dari NodeMaterial. Meskipun saya melihat bahwa NodeMaterial berasal dari ShaderMaterial. Saya ingin tahu apakah Anda menyebut turunan langsung dari ShaderMaterial, GraphMaterial (atau NodeGraphMaterial) yang akan lebih masuk akal -- karena semua simpul membentuk grafik, dan grafiklah yang menjadi materi, bukan simpul individu.

NodeMaterial akan menjadi bahan simpul akar, perlu menggunakan simpul untuk simpul dan fragmen. NodePhong adalah hibrid dan NodePhongMaterial hanya kelas proxy. Ini kemudian dapat digabungkan.

(9) Saya akan menyarankan mungkin beberapa terminologi yang lebih bervariasi. Saya akan memanggil simpul root, MaterialNode, dan orang dapat memperoleh PhongMaterialNode darinya. Saya memiliki Vector3Node, FloatNode, dll yang berasal dari ValueNode -- tidak harus konstan, tetapi hanya sebuah nilai. Dengan demikian, seseorang dapat menyalurkan tiga FloatNodes ke Vector3Node. Saya pikir Anda dapat memiliki pembantu yang akan mendeklarasikan masing-masing dari satu baris ini daripada 10 atau lebih saat ini.

Kedengarannya bagus.

(16) Saya bingung tentang input cahaya -- biasanya tidak ada lampu yang dapat dicolokkan, melainkan parameter cahaya sepenuhnya ditentukan di kelas cahaya. Saya kira Anda membutuhkan fleksibilitas tambahan ini? Bagaimana Anda membayangkannya.

Ini untuk lightmap atau kemungkinan LightNode.

Ini untuk lightmap atau kemungkinan LightNode.

Saya suka ide lightmap yang dapat dicolokkan karena orang dapat mendefinisikan UV untuknya secara eksplisit. :)

@bhouston Perbaiki beberapa koreksi hari ini di file ini: Tapi masih banyak yang harus dilakukan.
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/three.node.js

Ini adalah taman bermain yang saya buat: seni: Tekstur dan tombol adalah seret dan lepas, hanya berfungsi di chrome

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

Luar biasa, barang! Sialan! Itu indah.

Apakah mungkin untuk membagikan kode dengan cara yang juga dapat saya sumbangkan? Sebagai PR publik atau apa?

Anda bekerja dengan proyek Sea3D di sini kan?

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

Jadi saya bisa membayarnya dan mulai berkontribusi? Apakah Anda akan menerima PR? Bagaimana kita bisa berkolaborasi secara efektif.

Saya belum bertanya tetapi @mrdoob mungkin (?) ingin memiliki ini dalam proyek ThreeJS itu sendiri.

Tentu saja!

Jadi saya bisa membayarnya dan mulai berkontribusi? Apakah Anda akan menerima PR? Bagaimana kita bisa berkolaborasi secara efektif.

Tentu saja, saya pikir bantuan Anda akan luar biasa. Saya juga harus membawa jenis node lain, seperti saturasi, kebisingan seperti yang Anda sarankan.

Anda bekerja dengan proyek Sea3D di sini kan?

Saya pikir dalam membuat PR untuk Three.JS dengan contoh jadi semua ini didefinisikan.

@mrdoob Bagaimana dengan nama materialnya, THREE.MaterialNode atau THREE.NodeMaterial?

Ini adalah jenis bahan, jadi seharusnya THREE.NodeMaterial .

Ke atas. Saya pikir saya dekat dengan PR?
https://github.com/sunag/sea3d/commit/55cf70aea38b2b72110abf96f7b96924dad81c54

Seret peta kubus ini ke taman bermain dan tekstur lainnya untuk pengujian
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png

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

contoh rim shader

contoh refleksi daerah

Ini sangat luar biasa @sunag!

@bhouston terima kasih! Anda pikir akan sulit untuk mengkonversi ke R74?

Ini adalah pekerjaan yang sangat mengesankan! Mengingatkan saya pada shaderforge .

Pekerjaan yang sangat bagus sejauh ini!

@sunag Ini akan menjadi sedikit pekerjaan, tetapi saya ingin membantu dan sebagian besar perubahan struktural besar dalam kode shader R74 adalah kesalahan saya. :)

@GGalanSmithee juga sangat mirip dengan apa yang dimiliki UE4: https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/ExpressionReference/index.html

terlihat pria cantik dan menyenangkan untuk dimainkan: mungkin saya menawarkan untuk inspirasi editor simpul Blender3D. Saya merasa ini sangat efisien, bahkan ada beberapa video hebat tentang PBR melalui sistem simpul Blender dan simpul apa yang paling berguna untuk membuat PBR dari awal:

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

Ini akan sedikit bekerja, tetapi saya ingin membantu dan sebagian besar perubahan struktural besar dalam kode shader R74 adalah kesalahan saya. :)

@bhouston Wow. Itu jauh lebih bersih dengan perubahan r74 baru. Saya menyelesaikan bagian pertama masih kehilangan StandardMaterial. Setiap masalah saya posting di sini :) Terima kasih
https://github.com/sunag/sea3d/commit/d544ad7993272348f8bbe2337cdceb52159a6a8

Hal lain yang masih kita lewatkan adalah refraksi. Saya sangat suka menggunakan buffer rendering sebagai pengganti Cubemap RTT sebagai default. Itu akan jauh lebih efisien.

@GGalanSmithee Saya punya beberapa referensi ShaderFX yang saya penggemar beratnya. Shader Forge dan UE4 terutama juga merupakan referensi yang bagus. Terima kasih!

@richardanaya Video luar biasa. Terima kasih!

@mrdoob Di folder mana Anda merekomendasikan meletakkan file-file ini? three.js root ( src/materials/node ) atau dalam contoh ?
https://github.com/sunag/sea3d/tree/gh-pages/Labs/Three.JS-NodeMaterial/node

Saya masih merekomendasikan menyebut ini sebagai "Graph Material" atau dalam gaya ThreeJS terbalik, "GraphMaterial." Atau jika Anda bersikeras menggunakan istilah "Node", saya akan menyebutnya "NodeBasedMaterial". Kedua nama ini memperjelas bahwa materi tersebut mengandung node, daripada menjadi Node itu sendiri.

Saya masih merekomendasikan menyebut ini sebagai "Graph Material" atau dalam gaya ThreeJS terbalik, "GraphMaterial." Atau jika Anda bersikeras menggunakan istilah "Node", saya akan menyebutnya "NodeBasedMaterial". Kedua nama ini memperjelas bahwa materi tersebut mengandung node, daripada menjadi Node itu sendiri.

Bagi saya keduanya terlihat bagus. Saya menyerahkan keputusan kepada @mrdoob bagaimana menurut Anda?

BTW @sunag Saya akan tetap menggunakan peta kubus untuk pembiasan jika memungkinkan, lebih mudah dan lebih akurat. Saya pikir hampir semua orang melakukannya dan kami membutuhkan hal-hal RTT untuk refleksi yang akurat juga. Saya pikir itu hanya perlu render cepat pada 128^2 atau 256^2.

BTW @sunag Saya akan tetap menggunakan peta kubus untuk pembiasan jika memungkinkan, lebih mudah dan lebih akurat. Saya pikir hampir semua orang melakukannya dan kami membutuhkan hal-hal RTT untuk refleksi yang akurat juga. Saya pikir itu hanya perlu render cepat pada 128^2 atau 256^2.

Ya, kita bisa membiarkan keduanya. akan menjadi diskusi antara kinerja x akurasi. Masih untuk pembiasan bidang (gelas, air) saya merekomendasikan buffer di tempat CubeMap (untuk kebanyakan kasus).

NodeStandard untuk menganalisis perlu untuk menyeret CubeMap.
https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/skyboxsun25degtest.png
http://sea3d.poonya.com/flow/

Sumber:
https://github.com/sunag/sea3d/blob/gh-pages/Labs/Three.JS-NodeMaterial/node/NodeStandard.js

@mrdoob Di folder mana Anda merekomendasikan meletakkan file-file ini? three.js root ( src/materials/node ) atau dalam contoh ?

Saya akan memasukkannya ke dalam contoh untuk memulai. Setelah terdefinisi dengan baik, nanti kita dapat memindahkannya ke src 😊

Saya masih merekomendasikan menyebut ini sebagai "Graph Material" atau dalam gaya ThreeJS terbalik, "GraphMaterial." Atau jika Anda bersikeras menggunakan istilah "Node", saya akan menyebutnya "NodeBasedMaterial".

Bagi saya keduanya terlihat bagus. Saya menyerahkan keputusan kepada @mrdoob bagaimana menurut Anda?

Saya sudah menyukai NodeMaterial ... Mungkin NodesMaterial ? NodeGraphMaterial ? @WestLangley ada saran?

Saya akan mengganti nama node saat ini... NodeColor , NodeFloat , NodeTexture , ... menjadi ColorNode , FloatNode , TextureNode

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

Saya tidak bisa memuat ini

Saya akan memasukkannya ke dalam contoh untuk memulai. Setelah terdefinisi dengan baik, nanti kita dapat memindahkannya ke src :blush:

@mrdoob itu akan bagus.

Saya akan mengganti nama node saat ini ... NodeColor, NodeFloat, NodeTexture, ... menjadi ColorNode, FloatNode, TextureNode

Saya akan meneruskannya kalau begitu.

ini adalah url lokal :blush: , coba ini:
http://sea3d.poonya.com/flow/

@WestLangley ada saran?

Saya sarankan THREE.FlowMaterial .

Pilihan kedua saya adalah THREE.CustomMaterial .

Sebagai pengamat yang benar-benar acak. NodeMaterial terdengar sangat intuitif bagi saya, karena itulah yang disebut di Blender3D

Jika @mrdoob menyukai NodeMaterial, kami dapat tetap menggunakannya. :)

NodeMaterial kalau begitu 😁

Proyek ini luar biasa! Baru saja melihat demo di Twitter dan itu sangat mengesankan.

Saya ingin tahu apakah node harus menjadi sesuatu yang masuk ke Tiga inti. Mereka sangat spesifik implementasi. Saya juga sedang membangun editor grafik shader Three.js (belum dirilis) untuk ShaderFrog.com, dan solusi yang saya miliki adalah hanya mengekspor kode GLSL dan semua metadata yang diperlukan seperti nama seragam, ke dalam file JSON kecil, dan memuatnya dengan perpustakaan runtime eksternal

Editor grafik ini dapat bekerja dengan shader penuh dengan menganalisis kode sumbernya, yang berarti tidak diperlukan jenis node shader khusus. Bisakah tipe NodeMaterial ini ditangani sepenuhnya di luar inti Three juga? Yang benar-benar harus Anda hasilkan adalah RawShaderMaterial bagi seseorang untuk menggunakannya dalam proyek mereka sendiri.

Bisakah tipe NodeMaterial ini ditangani sepenuhnya di luar inti Three juga? Yang benar-benar harus Anda hasilkan adalah RawShaderMaterial bagi seseorang untuk menggunakannya dalam proyek mereka sendiri.

@DelvarWorld Hai. Ya secara teori, tetapi masih sangat dini untuk membuat shader yang bagus dari mentah. Pada saat itu lebih baik dengan antarmuka awal. Ini juga membantu untuk tetap kompatibel dengan Skin / Morph dan komponen asli lainnya dari Three.JS.

Saya berpikir untuk mencatat masalah kecil:
Dalam "Aliran", konektor tidak muncul ke tingkat atas saat menyeret node satu sama lain.
Mungkin masalah ini sedang menunggu lapisan atau sesuatu yang lain.

Saya ingin tahu apakah ada cara untuk menyatukan kedua pendekatan? Saya tertarik pada shader berlapis-lapis dan untuk itu Anda perlu memiliki beberapa BSDF yang berkontribusi terhadap hasil akhir. Ini berarti bahwa kita perlu lebih memisahkan model shading -- sekarang ini cukup erat digabungkan dalam desain @sunag saat ini. Saya pikir kita harus menuju ke arah di mana seseorang tidak perlu memiliki bahan Standar atau Phong yang ditentukan, itu bisa mentah seperti yang dimiliki @DelvarWorld . Saya pikir kita bisa pindah ke sana secara bertahap, jadi apa yang dimiliki @sunag adalah awal yang baik.

Ini bukan jawaban yang sempurna, tetapi beberapa waktu yang lalu saya membuat proposal kasar untuk format shader portabel yang menyertakan metadata, seperti nama seragam, tipenya, tipenya di Three.js, dll. https://github.com /DelvarWorld/ShaderFrog-Runtime/blob/master/THREE_SHADER_FORMAT.md

Semua shader benar-benar perlu dijalankan di lingkungan nyata adalah kode sumber shader mentah (sejak GPU mengkompilasinya) dan, untuk kenyamanan, seragam apa yang dapat diatur pengguna dengan nilai apa. Proposal kasar ini tidak mencakup gagasan membangun shader secara terprogram, ini hanya pengiriman sederhana untuk GLSL dan metadata. Ini kompatibel dengan Three.js karena Anda hanya perlu memasukkannya ke dalam RawShaderMaterial pada akhirnya.

Saat ini tidak ada cara untuk membuat shader portabel di Three.js atau mengekspornya dari aplikasi apa pun, itulah yang memberi saya ide untuk mengusulkan standar, dan saya pikir itu bisa menyelesaikan kedua masalah kami, karena kami sedang membangun aplikasi eksternal yang pada akhirnya memuntahkan bahan yang telah ditentukan. Ini juga berarti detail implementasi dari kompilasi kombinasi spesifik dari grafik diserahkan kepada aplikasi, bukan Three.js.

Apakah standar shader yang diusulkan ini memiliki tempat di Tiga? Saya tidak punya ide. Saat ini mungkin lebih berguna bagi saya daripada untuk inti Three, karena Three membangun shadernya sendiri dengan caranya sendiri.

@DelvarWorld Saya memulai proyek ini dengan cara membuat set standar node grafik shader:

https://github.com/OpenMaterialGraph/OpenMaterialGraph

Spesifikasi simpul di sini:

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

Spesifikasi BSDF minimalis di sini:

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

Ini berorientasi pada rendering berbasis fisik.

Perasaan saya adalah bahwa seseorang perlu memiliki cangkang shader untuk ThreeJS yang levelnya lebih tinggi daripada shader mentah tetapi levelnya lebih rendah daripada shader Phong. Pada dasarnya shader default akan dapat melakukan target morph, tulang, dll. Dan kemudian semua shader skema pencahayaan khusus ini (Basic, Lambert, Phong, Standard) akan menggunakan template itu. Saat ini ada shader template tersirat (kami menyertakan hal yang sama di setiap shader) -- tapi saya pikir kami bisa memperjelas di mana harus memasang sesuatu. Anda dapat memasang skema pencahayaan (phong, lambert, basic, atau berlapis-lapis) dan Anda dapat memasukkan properti ke skema pencahayaan yang merupakan simpul umum Anda.

@bhouston oh bagus, sepertinya kami memiliki banyak persyaratan yang tumpang tindih, alias nilai default, nama tampilan, deskripsi yang dapat dibaca manusia, dll. Saya tidak tahu apa yang akan terjadi di masa depan tetapi itu akan menjadi perubahan yang cukup mudah bagi saya untuk menggunakan a format lebih seperti apa yang Anda usulkan.

Format shader formal sangat masuk akal. Itu harus hidup dengan lib, sehingga dapat berkembang dengan lebih mudah. Untuk seseorang yang baru mengenal three.js, apakah ada alasan khusus mengapa hal seperti itu belum ada? Seharusnya menarik bagi editor jika tidak ada yang lain.

*EDIT Mungkin memiliki spesifikasi di three.js akan mengalahkan tujuannya jika dimaksudkan untuk dikonsumsi oleh pipa rendering lainnya.

Saat ini mungkin lebih berguna bagi saya daripada untuk inti Three, karena Three membangun shadernya sendiri dengan caranya sendiri.

Anda dapat menghasilkan materi yang sama dalam bahasa lain jika Anda membuat modifikasi di dalam THREE.NodeGL.prototype.generate setelah NodeMaterial(*Flow) adalah bahasa visual. NodeBuilder bisa menjadi pintu untuk itu. Saat ini adalah perantara data antara Node.

Saya membersihkan contoh NodeMaterial "mentah": Masih dapat menghasilkan beberapa bug.
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

Saya pikir untuk memajukan ini dengan partikel membuat simpul akar. NodePass untuk Multi-Pass dan NodeMaterialD setelah PR apa yang harus saya lakukan dalam beberapa hari.

Saya menyarankan THREE.ShaderFrogLoader alih-alih shader runtime.

Dalam "Aliran", konektor tidak muncul ke tingkat atas saat menyeret node satu sama lain.

@MasterJames Terima kasih! Aku akan melihatnya.

:+1:

Saya mulai membuat contoh. Mudah-mudahan minggu ini selesai. :keringat_senyum:
http://sunag.github.io/sea3d/Labs/Three.JS-NodeMaterial/webgl_materials_nodes.html

Pikiran?

@sunag +1 :- )

+1!

Ini luar biasa. Saya akan default pada tekstur tanaman + dinding daripada perpindahan seperti berawan. :) Itu hanya indah.

Saya akan default pada tekstur tanaman + dinding daripada perpindahan seperti berawan.

Anda mengacu pada contoh 'lapisan'? Namun saya akan memposting lebih banyak contoh untuk kami

tubuh lunak GPU

Sebagai perbandingan dengan pendekatan yang berbeda, editor grafik Shader Frog sekarang aktif, dan sedang dalam fase "menendang ban". Saya ingin menggarisbawahi bahwa itu tidak memerlukan perubahan apa pun pada inti Three.js.

ShaderFrog saat ini memiliki kekuatan lebih dari editor node tradisional. Ini memiliki jenis simpul tak terbatas untuk digunakan karena dapat mengurai dan memahami shader apa pun . Misalnya, untuk menerapkan pantulan hanya ke tepi objek, Anda dapat dengan mudah mengambil glow shader , yang merupakan

...dan kalikan dengan shader refleksi ...

...menggunakan grafik shader...

Dan ta-da! Sebuah shader pelek refleksi .

Anda juga dapat, misalnya, menutupi dua shader menggunakan shader lain , dan seterusnya:

Perhatikan bahwa satu-satunya "tipe simpul" yang diperlukan oleh proses ini adalah simpul berlipat ganda (ada yang lain di ShaderFrog), yang hampir seluruhnya independen dari GLSL. ShaderFrog dapat bekerja dengan shader apa pun , itulah sebabnya ia memiliki tipe node tak terbatas. Pendekatan teknologi canggih ini memungkinkan manipulasi ini terlepas dari perubahan Three.js.

ShaderFrog memiliki dukungan ekspor kelas satu ke Three.js, gratis. Semua tanpa mengubah kode sumber Three.js. Sea3D adalah produk pihak ketiga, seperti ShaderFrog. Menempatkan mekanik produk pihak ketiga ke dalam inti Three sepertinya merupakan keuntungan yang tidak adil dan saya tidak memahaminya secara politis.

@DelvarWorld Saya benar-benar tidak melihat abstraksi konstruksi shader berbasis simpul sebagai teknologi khusus pihak ketiga. Jika ada, ini memungkinkan lebih banyak pesaing untuk terlibat dalam teknologi shader berbasis node dan untuk semua mendapat manfaat dari manfaat lebih lanjut dari pekerjaan masing-masing (lebih banyak node, konstruksi yang dioptimalkan, dll.).

Sebagai programmer grafis seperti saya yang memahami shader pada tingkat tinggi (dari alat seperti Blender 3D), tetapi tidak pada tingkat rendah, abstraksi berbasis simpul sepertinya merupakan cara yang bagus bagi saya untuk berinteraksi secara terprogram dengan shader menggunakan pengetahuan pemodelan 3D saya. Saya memahami pengaturan simpul untuk PBR misalnya, tetapi Tuhan tolong saya jika saya ingin menulisnya di GLSL.

@DelvarWorld Menakjubkan. Saya suka editor baru.

@DelvarWorld +1 Sangat bagus! : - )

Terima kasih! :)

Saya benar-benar tidak melihat abstraksi konstruksi shader berbasis simpul sebagai teknologi khusus pihak ketiga.

Saya memahami pengaturan simpul untuk PBR misalnya

Bagian dari contoh penghitung saya di sini adalah Anda bisa mendapatkan kedua hal ini secara gratis terlepas dari Three.js. Semua shader ShaderFrog adalah open source sehingga setiap node yang menjadi bagian dari implementasi PBR juga dapat dipelajari, diedit dan ditingkatkan dari waktu ke waktu (serta disusun dengan shader lain, bukan hanya beberapa subset di inti Three.js). Bagi saya, fakta bahwa semua ini dapat diselesaikan tanpa Tiga perubahan berarti itu tidak perlu, dan mengaburkan batas antara Three.js sebagai API pembungkus webgl dan sekarang mendorong fitur-fitur khusus implementasi. Menyimpan data node shader sangat spesifik untuk aplikasi dan sejauh yang saya tahu saat ini tidak ada format standar editor node umum untuk perangkat lunak apa pun? Menegakkan satu mungkin berbahaya bagi implementasi lain.

@DelvarWorld Seperti yang saya pahami perubahan ini, ShaderFrog masih dapat berfungsi dan akan terus dapat melampaui GraphMaterial jika diinginkan. Saya melihat contoh kode sumber untuk GraphMaterial, dan saya dapat memahami kesederhanaan cara kerjanya bahkan tanpa harus memikirkan solusi/editor pihak ketiga. Sebagai pengembang grafis, saya prihatin dengan cara membuat materi yang terkesan cepat secara terprogram, saya merasa bahwa ini adalah perhatian yang tepat dari ThreeJS.

Saya pikir NodeMaterial dan Flow memiliki dua fokus yang berbeda. Flow dan ShaderFrog keduanya editor visual solusi pihak ketiga saat ini dalam sumber tertutup (saya pikir terutama di seniman untuk ini) selain itu NodeMaterial adalah editor shader open-source untuk programmer dilakukan untuk Three.JS. Saya setuju dengan @richardanaya dalam arti bahwa ShaderFrog dapat melampaui NodeMaterial jika diinginkan. Sama seperti saya pikir Flow tidak perlu hanya menjadi editor materi. Saya sangat berharap peningkatan besar dari ShaderFrog di masa depan seperti biasa.

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

@sunag Saya sedang membaca kode sumber Anda malam ini. Saya sangat menyukainya. Beberapa umpan balik singkat dari bacaan saya malam ini:

• Saya ingin melihat PR lebih cepat daripada nanti. Saya dapat membantu. :)
• Mungkin keren untuk mengizinkan atribut sewenang-wenang daripada hanya atribut standar (uv, uv2, normal, posisi, dll.) Saya tahu bahwa banyak shader dapat mengambil manfaat dari vec4 tangen, lebih dari hanya 2 uv dan juga banyak warna atribut. Jadi saya akan menggeneralisasi kebutuhanPosition ke dalam array yang dimintaAttributes atau sesuatu.
• Saya akan menyarankan beberapa organisasi node ke dalam NodeMaterial utama, BRDFs (Phong, Standard, dll), node tekstur (NodeCubeTexture, NodeTexture), accessor (?) node (NodePosition, NodeNormal), node matematika (NodeOperator, dll.. ), node utilitas (NodeSwitch, ...), dan ekstra (?) (NodeVelocity, ...) Saya pikir ini akan banyak membantu.
• Akan menyenangkan untuk memiliki pengakses matriks untuk matriks Proyeksi, Tampilan, dan Dunia.
• Anda kehilangan beberapa operator: % ^ & << >> ~ |
• Saya tidak yakin saya melihat nilai di NodePhongMaterial ketika kelasnya sangat kecil, saya hanya meminta pengguna untuk membuatnya menggunakan simpul NodePhong yang dikombinasikan dengan NodeMaterial (walaupun saya masih tidak suka nama itu, GraphMaterial terasa banyak lebih alami bagi saya, tetapi saya bisa hidup dengannya.)
• Saya akan memanggil NodeTimer -> NodeTime ... tetapi sekali lagi preferensi pribadi.
• Saya ingin tahu apakah ada cara untuk menggabungkan banyak node variabel menjadi satu seperti yang Anda lakukan dengan NodeMath#, NodeOperator. Ini tampak sangat mirip: NodeViewPosition, NodeWorldPosition, NodeViewNormal, NodeTransformedNormal, NodeTransformedPosition, NodeProjectPosition...
• Saya ingin melihat kumpulan argumen opsional untuk NodeMath#, NodeOperator dalam bentuk yang dapat berupa daftar, sehingga orang dapat dengan mudah mengisi kotak dropdown dengannya. Saat ini karena mereka adalah anggota yang hanya memanfaatkan kelas, agak sulit untuk mengidentifikasi mereka. Saya tidak yakin solusi bagus yang masih nyaman untuk pengkodean. Mungkin hanya mengumpulkan mereka ke dalam daftar setelah definisi mereka sebagai anggota kelas, jadi tambahkan saja daftar itu?
• NodeTransformedNormal, NodeTransformedPosition sulit bagi saya untuk mengetahui apa itu tanpa melihat kodenya. Apakah mereka berada di ruang dunia, ruang pandang, ruang objek? "Transformed" adalah istilah yang sangat umum, yang berarti dikalikan dengan matriks. Saya akan melihat kode untuk mereka sekarang ....
• Saya akan mengizinkan NodeUV dan NodeColor untuk mengambil indeks daripada dibatasi masing-masing pada 2 dan 1 saluran. Sekali lagi saya ingin melihat ini dibuat generik, benar-benar Anda memasukkan string atau salah satu dari sejumlah preset daripada membuatnya sulit dikodekan ke satu set saluran tertentu. Anda masih dapat memiliki beberapa jalur kode khusus untuk beberapa variabel, tetapi akan kembali ke sesuatu yang umum untuk nama yang tidak dikenali untuk penanganan kasus khusus.

Lebih banyak umpan balik:

• Saya ingin memiliki grafik dengan lebih dari satu BRDF, pada dasarnya dua BRDF Standar dan kemudian melakukan pelestarian energi di antara keduanya. Setelah Anda mendapatkan PR, saya ingin menambahkan fungsi ini. Ini akan membuat sistem lebih umum dan lebih kuat.

@bhouston Wow! Terima kasih!

Atribut permintaan, organisasi folder, NodeTime, NodePosition, NodeNormal, NodeView telah direvisi. Menambahkan +3 contoh juga.

di operator dan matriks kita harus menambahkan kompatibilitas dengan konversi integer dan matrix . Untuk ini dilakukan secara otomatis seperti pada float / vectors#. Kami memiliki cukup pekerjaan untuk pembaruan berikutnya.. :sweat_smile:

Besok saya akan membuat PR. Saya harus meninjau beberapa hal lagi.

@sunag :

Saya percaya ini adalah bug:

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

                        roughnessA.number = val;

                    }, false, 0, 1 );

Saya percaya ini adalah bug:

Terima kasih!

Saya baru saja pusing membuka halaman contoh dan melihat grafik simpul PBR <3

<3
Perubahan dari revisi terakhir
https://github.com/sunag/sea3d/commit/a2e3813b53902331e91dbc0f6bae0136a384ad0c

NodeMaterial rev 4 + NodePass

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

Bagus!

Saya akan menyarankan menggunakan node untuk pasca-pemrosesan tetapi saya menunggu bagian pertama selesai. Astaga, itu indah!

NodeMaterial rev 5 + LightNode

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

Kulit

Bayangan Toon

++ color-adjustment dan plush contoh.

Bagus!

subsurface scattering :sweat_smile:

Ini adalah jenis shader yang dapat berfungsi di pembaruan mendatang.

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

!

Terima kasih untuk NodeMaterial yang luar biasa!

Saya memiliki beberapa komentar/bug:

• trailing whitespace break node fungsi

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

• masalah dengan parameter int di simpul fungsi

contoh kerja dengan parameter 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;

contoh rusak dengan parameter 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;

• saran: berikan parameter fungsi di konstruktor 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) ] );

• apakah PhongNodeMaterial kompatibel dengan peta benjolan?

beberapa catatan lagi:

• masalah dengan PositionNode.LOCAL di fragmen shader di NodeMaterial "mentah":

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

shader yang dihasilkan:

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);
}

Mungkin fungsionalitas yang "diubah" harus dipindahkan dari material node Phong/Standar ke NodeMaterial

• Penggunaan 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 ) )
    );

Dalam hal ini shader hasil mengandung
gl_Position = ((projectionMatrix * modelViewMatrix * vec4( posisi, 1.0 ))*DUA);
tapi DUA konstanta tidak dideklarasikan. Apakah ini kesalahan saya atau bug?
Juga, ConstNode sensitif terhadap titik koma, jadi "float TWO = 2.0" tidak diuraikan.

Terima kasih @dimarudol ! Jika Anda ingin merasa bebas dengan catatan sesegera mungkin akan membuat revisi baru.

tapi DUA konstanta tidak dideklarasikan. Apakah ini kesalahan saya atau bug?

Saya akan mempertimbangkan cara penggunaan ini dan dalam materi misalnya material.include( node )

Pada saat mencoba konstanta global:

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 ) )
    );

Hai @sunag , Saya telah bermain dengan Sea3d Flow dan terlihat sangat keren. Hanya ingin bertanya apakah ada repo resmi di suatu tempat untuk itu.
Salam.

Hai @rraallvv , belum, itu sudah siap. Sesegera mungkin saya memposting berita.

Terima kasih @sunag , ini sangat dihargai.

Hai @sunag ! Anda melakukan pekerjaan yang sangat bagus!
Saya punya pertanyaan: untuk proyek saya, akan sangat bagus untuk menggunakan struktur node Anda, tetapi saya membutuhkan warna per titik (dan nilai float kustom per titik), tetapi dalam sistem node Anda, Anda hanya menerapkan colorNode dan floatNode ke seluruh mesh .. Apakah menurut Anda ada cara untuk mengimplementasikan sesuatu seperti bufferColorNode (menggunakan THREE.BufferAttribute) dengan mudah?

Misalnya saya punya adegan ini:

Setiap simpul memiliki warna tersendiri. Hal ini dimungkinkan dengan THREE.BufferAttribute dan THREE.ShaderMaterial tetapi tidak ada yang setara dalam kode Anda.

Saya akan membutuhkan sesuatu seperti:
`biarkan bahan = baru TIGA.StandardNodeMaterial();
biarkan texColorMap = new TIGA.TextureNode( baru TIGA.TextureLoader().load("colorMap.jpg"));
biarkan customData = new THREE.BufferFloatNode(new Float32Array(...), "data"); // Parameter kedua adalah nama atribut

biarkan colorMap = baru TIGA.FunctionNode([
"vec3 colorMap(sampler2D texColorMap, float data){",
" return vec3(texture2D(texColorMap, customFunc(data)));", // customFunc mengembalikan vec2 tergantung pada data
"}"
].join("n"));

biarkan colorMapCall = baru TIGA.FunctionCallNode(colorMap);
colorMapCall.inputs.texColorMap = texColorMap;

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

Omong-omong, sepertinya saya tidak bisa menggunakan parameter sampler2D untuk FunctionNode...

Apakah saya melewatkan sesuatu?
Saya pikir saya bisa membantu jika diperlukan :)

@martinRenou Terima kasih! Hmm, mungkin sesuatu seperti untuk saat ini:

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

Saya belum berpikir untuk menetapkan atribut geometri dinamis dengan node.js. Tapi saya pikir ini ide yang bagus... mungkin sesuatu seperti THREE.BufferAttributeNode ...

@sunag terima kasih atas jawaban Anda :)
Saya akan mencobanya. Jika Anda setuju, saya akan mulai mengerjakan THREE.BufferAttributeNode, untuk saat ini saya masih membaca kode Anda dan mencoba memahami strukturnya.

1. Mengenai THREE.FunctionNode, seperti yang saya katakan, saya benar-benar perlu mengatur sampler2D dalam parameter saya karena digunakan sebagai colorMap.. Warna piksel dihitung dengan texture2D() dan parameter kedua texture2D() dihitung menggunakan data kustom saya (yang misalnya suhu).
   Saya mengerti bahwa ide menggunakan parameter vec3 adalah untuk ramah dengan pengguna, tetapi FunctionNode juga dapat mendukung parameter sampler2D, bukan begitu?
2. Selain itu, THREE.FunctionNode hanya menulis di shader fragmen, tetapi bukankah menyenangkan juga bisa menulis di vertex shader?

Ini akan menjadi kasus penggunaan saya, ini disebut IsoColor, karena warnanya sesuai dengan data (suhu, tekanan ...) merah -> suhu tinggi, biru -> suhu rendah :

1. Saya sedang berpikir untuk menulis THREE.IsoColorNode (yang akan menggantikan FunctionNode diagram saya), dan node lain yang akan sangat menarik untuk visualisasi ilmiah. Apakah Anda tertarik dengan itu? @mrdoob apakah Anda tertarik juga?

Mengenai THREE.FunctionNode, seperti yang saya katakan, saya benar-benar perlu mengatur sampler2D dalam parameter saya karena digunakan sebagai colorMap.. Warna piksel dihitung dengan texture2D() dan parameter kedua texture2D() dihitung menggunakan data kustom saya (yang misalnya suhu). Saya mengerti bahwa ide menggunakan parameter vec3 adalah untuk ramah dengan pengguna, tetapi FunctionNode juga dapat mendukung parameter sampler2D, bukan begitu?

Saya mengerti kebutuhan Anda sekarang! Saya akan membuat PR untuk ini dan catatan lain dari @dimarudol ...

Selain itu, THREE.FunctionNode hanya menulis di shader fragmen, tetapi bukankah menyenangkan juga bisa menulis di vertex shader?

Saya tidak menguji ini tetapi saya kira begitu.

Saya menambahkan lebih banyak dua contoh:

• sampler2D ada di triangle-blur contoh
• custom BufferAttribute ada di custom-attribute contoh

Ini berfungsi tetapi saya masih akan memberikan kode yang dipoles ...

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

Wow ! Anda benar-benar melakukan pekerjaan dengan baik, itu juga berhasil untuk saya :senyum:

Terima kasih lagi untuk pekerjaan Anda!

Hai @sunag ,

Untuk saat ini kami tidak dapat memiliki FunctionNode dengan tipe "void" karena kami perlu mengirimkannya ke material sebagai parameter (warna, alfa...). Misalnya jika saya ingin mengimplementasikan clip plane FunctionNode, yang ingin saya lakukan hanyalah membuat bagian shader seperti ini:

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

Tapi itu tidak mungkin untuk memberikannya pada materi... Solusinya adalah mengembalikan pelampung yang merupakan kanal alfa, tapi itu tidak bersih dan dioptimalkan. Tidakkah menurut Anda akan keren untuk menambahkan beberapa fungsi kosong ke materi seperti itu:

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];

Untuk contoh lebih "desain", jika saya ingin membuat lubang di teko saya dengan tekstur ini:

Saya ingin melakukan sesuatu seperti itu:

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;

Hal lain adalah bahwa kita tidak memiliki kontrol atas urutan fungsi di shader. Jika saya memiliki fungsi yang tidak komutatif, saya tidak memiliki kontrol pada hasilnya ...

mari lihat contoh ini:

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;

Jika sebuah titik berada di belakang bidang transparansi dan melampaui karena perpindahan, dalam kasus yang disebut "transparencyPlaneCall" sebelum "displacementCall" alpha = 1., dan dalam kasus yang disebut setelah alpha = 0.5.
Jadi saya ingin mengatur urutan pemanggilan fungsi... Tahukah Anda apa yang saya maksud?

Hai @martinRenou

Hmm, sekitar void berfungsi mungkin ProxyNode untuk digunakan di slot karena ini perlu mengikuti urutan atau inisialisasi di awal atau akhir kode, mungkin functionsStart atau functionsEnd slot...

Menggunakan slot alpha jika alpha adalah 0 dibuang secara otomatis.
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L180

Jadi saya ingin mengatur urutan pemanggilan fungsi...

Ada urutan lihat di sini:
https://github.com/mrdoob/three.js/blob/dev/examples/js/nodes/materials/PhongNode.js#L122

Urutan fungsi dilakukan secara otomatis menggunakan algoritma dependencies sederhana, harus menempatkan FunctionCall di slot sebelumnya, color adalah yang pertama specular adalah yang kedua misalnya.

Contoh ini adalah dua kode shader yang berbeda: fragment hingga transparencyPlaneCall dan vertex hingga displacementCall .

Itu membuat saya berpikir menggunakan variabel ( varying dan lokal) untuk memperluas bukan input dan hanya const akan sangat menarik. Mungkin VarNode ...

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

Menggunakan slot alpha jika alpha adalah 0 dipisah secara otomatis.

Maaf untuk itu, tidak melihatnya.

Urutan fungsi dilakukan secara otomatis menggunakan algoritma dependensi sederhana, harus menempatkan FunctionCall di slot sebelumnya, warna specular pertama adalah yang kedua misalnya.

Saya mengerti, sebenarnya saya hanya ingin memastikan bahwa fungsi yang membuang piksel dipanggil terlebih dahulu. Kedengarannya bagus bagi saya untuk menggunakan alpha jika Anda membuangnya tepat setelah fungsi saya :smiley:

Contoh ini adalah dua kode shader yang berbeda: fragmen ke transparentPlaneCall dan vertex ke displacementCall.

Benar ! Jadi itu bukan contoh yang baik. Kesalahanku.

Selesai r6 - #9636

Dingin ! Terima kasih atas jawaban Anda.

Itu membuat saya berpikir menggunakan variabel (bervariasi dan lokal) untuk memperluas bukan input dan const saja akan sangat menarik. Mungkin VarNode...

Kedengarannya bagus juga, mungkin menarik untuk dapat secara eksplisit membuat fungsi di shader vertex, menggunakan varNode, dan menggunakannya dengan fungsi di shader fragmen. Tidakkah menurutmu?

@sunag
Saya pikir ada masalah dengan penggunaan AttributeNode dengan FunctionNode di vertex shader..

Jika saya memiliki kode seperti ini:

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;

Shader ditulis dalam urutan ini:

...
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;
...
}

Perbaikan sederhana adalah menginisialisasi nVdata ke data ?

Kedengarannya bagus juga, mungkin menarik untuk dapat secara eksplisit membuat fungsi di shader vertex, menggunakan varNode, dan menggunakannya dengan fungsi di shader fragmen. Tidakkah menurutmu?

Ya! Idenya adalah komunikasi yang lebih baik dengan vertex/fragment shader menggunakan varying sebagai VarNode . Ini sangat cocok sekarang dengan fitur keywords .

Saya membuat contoh minimal varying tetapi belum ada solusi untuk void function .

Saya pikir ada masalah dengan penggunaan AttributeNode dengan FunctionNode di vertex shader..

Diperbaiki - https://github.com/mrdoob/three.js/pull/9681

Hai @sunag , Saya melihat contoh variasi Anda, dan kedengarannya aneh bagi saya untuk menempatkan variasi di mtl.transform seperti yang Anda lakukan... Mungkin Anda akan mengubah ini ketika dimungkinkan untuk membuat fungsi batal?
Namun, terdengar ide bagus bahwa kata kunci menampilkan :smiley:

Sebenarnya, saya pikir itu akan menjadi ide yang baik untuk menempatkan variasi-variasi itu di mtl.varyings (mtl.varyings adalah array) seperti itu : mtl.varyings.push(myVar) . Menggunakan ide yang sama, kita bisa meletakkan fungsi di vertex dan fragment shader seperti ini : mtl.vertexFunctions.push(myVertexFunctionCall) , cara yang sama dengan mtl.fragmentFunctions .

Dengan cara ini kita bisa melakukan banyak perhitungan pada variasi tersebut dan kemudian menggunakannya untuk efek. Fungsi-fungsi itu akan menjadi fungsi batal.

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

Seperti pada tangkapan layar di atas di mana node terhubung secara visual, bagaimana kita membuat ulang ini secara mental dengan API ini? Saya melihat bahwa konstruktor menerima node lain. Apakah itu cara output dari satu node (diteruskan ke konstruktor) adalah input untuk node lain (menerima node di konstruktornya)? Apakah sebuah node memiliki paling banyak satu output? Berapa banyak node yang dapat dimasukkan ke node lain melalui konstruktor, atau terbatas?

@trusktr Tentu saja tidak terbatas berapa banyak lagi node yang menghabiskan lebih banyak CPU pada waktu pembuatan dan GPU saat runtime. Node disesuaikan dengan nilai input dan output, konversi float menjadi vec2 atau vec3 misalnya otomatis, dan disimpan dalam cache jika digunakan lebih dari sekali untuk optimasi (lihat TempNode ).

Dalam tangkapan layar, setiap simpul adalah kelas, misalnya: PositionNode ditampilkan adalah:
https://github.com/mrdoob/three.js/blob/789efa65bafe022e178c7e93e0985a7607a54403/examples/js/nodes/accessors/PositionNode.js#L5

@mrdoob @sunag apakah Anda bersedia mengomentari status kode NodeMaterial saat ini, dan bagaimana kesesuaiannya dengan peta jalan three.js?

Secara teori, kita bisa menggunakan node untuk beberapa hal sekarang, seperti:

• Implementasikan material PBR spec/gloss glTF sebagai NodeStandardSGMterial.
• Mendukung set dan transformasi UV per peta
• Sederhanakan penggunaan bahan bawaan dengan pembuatan instan

Tetapi sulit untuk membenarkan penambahan ketergantungan pada GLTFLoader untuk semua file node. Dan mungkin sulit untuk membenarkan menempatkan node ke src/* tanpa penggunaan yang lebih aktif. Telur ayam. 😅

Akan sangat membantu untuk mengetahui rencana jangka panjang untuk NodeMaterial, untuk menebak fitur apa yang (atau tidak) terkait... apakah ini perlu pengembangan lebih lanjut? Adakah hal-hal yang dapat dilakukan kontributor lain untuk membantu?

@sunag ya, saya juga ingin tahu apakah Anda memiliki rencana lebih lanjut saat ini.

Secara teori, kita bisa menggunakan node untuk beberapa hal sekarang, seperti:

• Implementasikan material PBR spec/gloss glTF sebagai NodeStandardSGMterial.
• Mendukung set dan transformasi UV per peta
• Sederhanakan penggunaan bahan bawaan dengan pembuatan instan

Masalah khusus ini sekarang memiliki contoh bagaimana diselesaikan dengan API yang ada, tanpa perlu memodifikasi inti:

Instance:
https://github.com/mrdoob/three.js/pull/10750 (penuh sesak, menyentuh inti, tetapi bisa ditambal monyet)
https://github.com/mrdoob/three.js/pull/14166 (ekstensi materi sederhana melalui onBeforeCompile)
https://github.com/mrdoob/three.js/pull/14012 (sederhana, ekstensi perpustakaan melalui mokey-patching)

set per-peta-uv
https://github.com/mrdoob/three.js/pull/14174

spec-gloss sebagai kelasnya sendiri
https://github.com/mrdoob/three.js/pull/14099

Mungkin ini bisa membantu menghilangkan rasa urgensi untuk memasukkan NodeMaterial ke dalam inti :).

Bagi mereka yang mengikuti topik ini, ada beberapa diskusi yang sedang berlangsung di https://github.com/mrdoob/three.js/pull/14149.

Bergabung dengan utas dari #14149:

tl;dr — NodeMaterial menurut saya merupakan langkah selanjutnya yang sangat menjanjikan untuk sistem material. Saya menduga adopsi NodeMaterial saat ini dibatasi oleh beberapa hal:

• gesekan termasuk banyak file individu
• kurangnya editor visual
• relatif sedikit contoh, docs

Saya akan meninggalkan pertanyaan kapan/apakah NodeMaterial harus di src/ ke @mrdoob dan @sunag , tapi saya pikir kita harus bergerak maju dengan (setidaknya) mengatasi tiga masalah di atas. Akan sangat membantu untuk mengetahui apakah orang lain melihat NodeMaterial sebagai alternatif dari sistem material saat ini atau pengganti penuh.

Massa kritis tampaknya dibentuk oleh pemegang saham GLTFLoader, dan pengamatan (subyektif) saya adalah bahwa kebutuhan itu muncul karena didokumentasikan secara tidak tepat diBeforeRender (beberapa contoh) dan bahkan kurang didokumentasikan diBeforeCompile (satu contoh).

@pailhead Saya mulai memelihara GLTFLoader untuk mengatasi masalah alur kerja di A-Frame, di mana saya juga seorang pengembang. Saya setuju sistem materi yang lebih berguna adalah tujuannya, bukan memuat format tertentu. Memutuskan cara mengintegrasikan (atau tidak mengintegrasikan) materi simpul harus didasarkan pada manfaat bagi pengguna akhir pustaka three.js — fitur, fleksibilitas, API yang dapat dipahami.

Anda benar bahwa onBeforeCompile dan onBeforeRender sangat fleksibel; tidak ada batasan praktis seberapa jauh Anda dapat memanipulasi atau mengganti shader yang mendasarinya. Tetapi keduanya sama-sama cacat sebagai API bahan utama:

1. Memaksa sintaks WebGL ke dalam API material bahkan untuk fitur yang relatif sederhana
2. Tergantung pada manipulasi string shader bahan inti, membuat perubahan pada bahan inti lebih sulit dari waktu ke waktu, dan lebih rapuh
3. Kurang mudah didekati oleh seniman
4. Praktis tidak dapat diserialisasi

Dekorator (mis. #14206) tentu meningkatkan ini dari sudut pandang pengguna — tetapi jika pengembangan fitur material di masa mendatang akan didasarkan pada dekorator yang semakin rumit di atas shader material yang ada, menurut pendapat saya, itu adalah bahaya pemeliharaan.

Material node tidak sempurna, tetapi diadopsi secara luas di alat grafis lain, dan memiliki keunggulan utama:

1. Fleksibel dan dapat dikomposisi
2. Mempertahankan lapisan abstraksi dari shader WebGL internal perpustakaan tanpa menghapus akses ke shader biasa jika diperlukan
3. Representasi materi yang sangat populer untuk seniman dan pengembang game
4. Setidaknya agak serializable (walaupun konversi ke format lain masih sulit)

Ini mungkin terdengar seperti saya mengatakan onBeforeCompile harus ditinggalkan, dan saya tidak bermaksud demikian — saya akan senang melihatnya bertahan, dan contoh diterima. Tapi itu bukan API yang ingin saya tunjukkan kepada pengguna A-Frame atau three.js untuk lebih banyak kasus daripada yang diperlukan; Saya tidak berpikir itu sebanding dengan sistem material di alat 3D lainnya.

• gesekan termasuk banyak file individu

Ini seharusnya tidak menjadi gesekan. Saya pikir akan berguna untuk melakukan semacam survei atau sesuatu, untuk melihat berapa banyak orang yang menggunakan bundler dan membangun alat. Mengimpor file js dalam file html secara manual seharusnya tidak menjadi pendekatan pada tahun 2018. Ini adalah satu-satunya nomor yang dapat saya temukan , dan saya pikir asumsi dapat dibuat bahwa semua pengguna ini menggunakannya dengan sesuatu yang berjalan dengan node.js.

Saya akan berusaha lebih keras, melakukan goyangan pohon dan dengan benar dapat import/export ini, daripada khawatir tentang bagaimana ini akan bekerja ketika memasukkan file skrip secara manual.

• kurangnya editor visual
• relatif sedikit contoh, docs

Saya pikir ini harus terjadi sebelum ini menjadi inti. Bahan gloss specular harus menjadi contoh yang tidak digabungkan dengan GLTFLoader . Fakta bahwa itu ada di /src atau /examples seharusnya tidak relevan?

@donmccurdy

Anda benar bahwa hook onBeforeCompile dan onBeforeRender sangat fleksibel; tidak ada batasan praktis seberapa jauh Anda dapat memanipulasi atau mengganti shader yang mendasarinya.

Saya tidak benar-benar mengklaim ini, saya mengklaim bahwa pengait seperti onBeforeRender memungkinkan pendekatan yang berbeda untuk menyusun kode, tetapi itu tidak boleh digunakan seperti yang digunakan sekarang di GLTFLoader (karenanya #14099).

onBeforeCompile pasti memiliki batasan, dan mungkin namanya tidak tepat. Hal yang baik untuk ditunjukkan dalam konteks ini adalah PR #14214 baru-baru ini. Segera setelah saya melihat apa yang hilang ( build() mendukung needsUpdate ) saya tahu saya akan melihat onBeforeCompile di sana. Saya menggunakannya sebagai onBeforeParse karena jika saya tidak mengganti pernyataan #include <foo> , pernyataan tersebut masih dapat diuraikan setelah fungsi ini dan sebelum kompilasi yang sebenarnya. Dalam PR ini digunakan sebagai onWillRefreshMaterial .

Filosofi yang saya coba sampaikan adalah bahwa mungkin harus ada lebih banyak perincian dengan panggilan balik semacam ini. Seharusnya ada lebih banyak dari mereka, dan harus sangat berhati-hati saat memberi nama mereka.

#14214 adalah contoh bagus mengapa NodeMaterial tidak harus ada di inti. Setidaknya tidak digabungkan dengan apa pun di /renderer , dan tidak dibundel dengannya.

1. Memaksa sintaks WebGL ke dalam API material bahkan untuk fitur yang relatif sederhana

Saya pernah mendengar masalah ini sebelumnya tetapi tidak dijelaskan lebih lanjut. Mengapa ini menjadi masalah? Apa itu "API material"? Saya selalu melihatnya sebagai "ini adalah beberapa bahan pelindung permukaan yang umum".

Jika Anda menginginkan peta yang dinamis, saya tidak melihat alasan mengapa material.map , atau 'material.color' tidak dapat menerima 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. Tergantung pada manipulasi string shader bahan inti, membuat perubahan pada bahan inti lebih sulit dari waktu ke waktu, dan lebih rapuh

Maksud saya adalah bahwa ini sudah agak mungkin dengan onBeforeCompile tetapi membuat perubahan ini lebih sulit, dan lebih rapuh daripada yang Anda gambarkan. Saya sudah menjangkau ini dalam kehidupan profesional saya dan memiliki beberapa kode yang bergantung padanya. Betapa rapuhnya itu, menyebabkan banyak stres :(

Dekorator yang Anda tunjukkan #14206 telah terhenti selama lebih dari setahun karena PR ini, yang telah terhenti selama 3 tahun. Perasaan subjektif saya adalah bahwa #14206 akan membuat penulisan dekorator ini menjadi mungkin, tidak terlalu membosankan, dan tidak terlalu rapuh. Ini adalah 30 baris kode yang sama sekali tidak memengaruhi apa pun, kecuali jika properti phantom ini ditentukan. Jika kita sudah diberi tali untuk menggantung diri kita dalam bentuk onBeforeCompile kenapa tidak membuatnya sedikit lebih manusiawi? :senyum:

Pada akhirnya, saya ingin memutuskan sendiri apa tingkat rapuh yang dapat diterima dan apa yang tidak.

1. Kurang mudah didekati oleh seniman

Inilah sebabnya mengapa seniman harus memiliki alat visual, dan semacam format untuk menyimpan grafik. Mengkonsumsinya sebagai GLSL "panggang" atau sesuatu yang membangun NodeMaterial saat runtime harus menjadi pilihan yang diberikan kepada pengguna.

Seorang seniman dapat membuat shader, seorang insinyur dapat memintanya untuk "dikompilasi" untuk mengoptimalkan proses pemuatan. Seorang seniman yang bekerja sendiri hanya dapat memuat grafik, dengan asumsi itu karena alasan tertentu lebih mudah ("dikompilasi" membutuhkan lebih banyak usaha).

Juga, mengapa dan bagaimana artis dipertimbangkan di sini? Apakah ada beberapa statistik, seperti apa rata-rata pengguna "artis", mengapa mereka bekerja dengan three.js dan bukan unity, mis. pipa jenis apa itu. Apakah ada insinyur yang terlibat, mengapa bukan alat mandiri yang berkomunikasi dengan three.js entah bagaimana yang diadopsi oleh beberapa direktori teknologi, dll. Saya berasumsi unduhan 40k npm per minggu bukan artis. Asumsinya adalah bahwa penginstalan semacam itu digunakan oleh beberapa alat build dan sangat tidak mungkin diimpor secara manual.

Baik ini dan poin 2, kasus penggunaan saya tidak melibatkan artis, dan biasanya tidak ada pengguna lain. Saya sedang mengembangkan sistem material, dibangun di atas material bawaan. Saya menggunakan pembongkaran normal saya sendiri dengan atribut tangen, pengelupasan kedalaman, kliping yang berbeda, dll. Yang saya pedulikan hanyalah menyusun kode itu di rumah, dan mengekspos sebagai internal kecil ke kelas-kelas di atas.

1. Praktis tidak dapat diserialisasi

Saya tidak tahu banyak tentang ini dan saya pernah mendengar argumen ini sebelumnya. Saya akan dengan senang hati melihat beberapa kode jika seseorang dapat mengarahkan saya ke area yang bermasalah. Dengan pemahaman saya yang sangat terbatas (hampir tidak ada) masalah, saya tidak mengerti mengapa itu tidak cukup untuk menulis

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

Katakanlah Anda memiliki bahan gloss spec yang dibuat dengan NodeMaterial , Anda tidak ingin membuat serial seluruh grafik, hanya inputnya? Apa pun serialisasi materi SpecGloss , seharusnya terlihat sama? Saya mungkin kehilangan banyak hal di sini, akan sangat menghargai beberapa petunjuk.

Re: serialisasi

Apakah cukup untuk menambahkan:

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

customSerializer( data )

Dan kemudian sesuatu seperti

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

specularMap sebenarnya akan diserialkan karena hardcoded:
https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L213

Tapi ini terasa agak aneh, kelas Material mengetahui internal dari semua bahan bawaan sepertinya?

@donmccurdy jika Anda ingin melakukan diskusi ini mungkin lebih baik melakukannya di PR dekorator, #14206. Offline saya tersedia untuk sesi kerja sambil minum bir atau kopi di mana saja di Bay Area :slightly_smiling_face:

Setuju bahwa banyak file _tidak boleh_ menjadi gesekan, dan itu bukan argumen dengan sendirinya untuk memasukkan NodeMaterial ke src/ . Ini hanyalah salah satu dari beberapa alasan NodeMaterial belum banyak digunakan, dan ada cara lain untuk menyelesaikannya. Dan saya tentu setuju bahwa lebih banyak dokumen akan menjadi prasyarat untuk menempatkan NodeMaterial di src/ , atau bahkan untuk mendorong adopsi di examples/js atau output build terpisah.

Saya optimis tentang NodeMaterial sebagai arahan umum, meskipun saya menduga ada beberapa hal lagi yang diperlukan sebelum masuk akal dalam src/ . Saya sangat khawatir menggunakan onBeforeCompile dan manipulasi string sebagai jalur untuk menempatkan fitur baru dalam sistem material, seperti dijelaskan di atas, dan terutama saat kami bergerak ke arah mendukung WebGL2 dan (akhirnya) WebGPU . Bukan berarti dua pilihan ini adalah satu-satunya pilihan, tetapi (dari keduanya) ini adalah pemikiran saya.

Di sisi lain, sepertinya kami saling memahami kekhawatiran dan preferensi satu sama lain, tetapi masih tidak setuju. Saya telah menulis semua yang saya punya waktu untuk menulis pada saat ini, dan akan duduk ini untuk sementara dan membiarkan orang lain menimbang. Terima kasih untuk diskusi yang menyeluruh dan sopan tentang hal ini. 🙂

Saya ingin menempatkan tekstur ambient oklusi dengan Multiply pada tekstur difus, jadi saya mencoba ini:

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

Ini tekstur AO saya

Sayangnya saya telah melihat oklusi ambien pada model saya.

Apakah Anda punya ide untuk melakukan itu?
Semoga ini adalah tempat yang tepat untuk memposting pertanyaan saya.

Terima kasih!

Saya ingin dapat berpikir ke arah pemetaan dari alat berbasis simpul yang ada ke materi dalam threejs. Akibatnya saya ingin melihat NodeMaterial di src/ bersama dengan dokumentasi yang tepat.

@IARI

Bisakah Anda membuat daftar alat berbasis simpul yang ada?

@donmccurdy

Terima kasih atas balasannya :)

Sayangnya saya pikir kita masih tidak mengerti satu sama lain. Jika Anda punya waktu untuk membaca posting ini, hal-hal ini:

Saya sangat khawatir menggunakan onBeforeCompile dan manipulasi string sebagai jalur untuk menempatkan fitur baru di sistem material,

onBeforeCompile mengerikan, saya setuju, satu-satunya alasan saya terlibat dalam salah satu utas ini adalah karena saya ingin #13198 yang saya lihat lebih unggul daripada manipulasi string onBeforeCompile .

Ini seharusnya tidak menjadi pola untuk menambahkan fitur baru ke three.js. Ini harus memungkinkan pengguna untuk menambahkan fitur baru ke aplikasi mereka. Saya sedih @bhouston tidak membagikan temuan apa pun tentang mempertahankan garpu untuk melakukan beberapa hal ini. Saya ingin tahu apakah mereka membuat kerangka kerja yang lebih baik untuk mengubah shader, atau benar-benar meretas inti untuk fitur ini.

Dalam hal transformasi uv per saluran, saya akan menjadikannya contoh, atau modul npm. Jika 3 orang mengunduhnya setiap minggu, itu mungkin sesuatu yang tidak seharusnya ada di intinya. Jika 20k orang mengunduhnya, mungkin begitulah seharusnya three.js dirancang.

onBeforeCompile sepertinya akan sangat penting untuk materi simpul, https://github.com/mrdoob/three.js/pull/14214 , jadi itu tidak hanya digunakan untuk manipulasi string .

Saya memiliki onBeforeCompile dan NodeMaterial untuk melakukan ini, saya meminta opsi ketiga. Jauh lebih nyaman daripada onBeforeCompile dan jauh lebih kecil dari NodeMaterial .

Dengan contoh terbaru:
https://github.com/mrdoob/three.js/pull/14206

Diskusi lama:
https://github.com/mrdoob/three.js/pull/13198

@pailhead Sebagai permulaan, saya akan memikirkan beberapa Node Siklus Blender dasar.
Saya juga akan tertarik untuk bermain-main dengan Unitys Shadergraph.

@claudioviola Anda dapat menambahkan material.shadow atau mengalikan dengan difus material.color = diffuse * oclusion . Oklusi bergantung pada cahaya tidak langsung, AmbientLight , HemisphereLight ...

@IARI

Saya mengunduh 7,5 gigs Unity untuk melihat ShaderGraph :slightly_smiling_face: : Saya tidak yakin apakah itu akan memenuhi syarat sebagai alat untuk membuat grafik shader, saya pikir ini adalah alat untuk membuat grafik shader untuk kesatuan. Apakah ada alat mandiri untuk membuat grafik? Saya ingin melihat jenis file apa yang menyimpan grafik ini juga, dan bagaimana itu akan ditransfer ke three.js dan NodeMaterial di /src .

Saya pikir @pailhead berada dalam isolasi terhadap perpindahan NodeMaterials ini ke inti pada saat ini. Saya tidak berpikir itu berguna bagi semua orang untuk berdebat dengan @pailhead selama berhari-hari. Saya pikir proyek tidak boleh terikat pada satu individu.

Ini tidak terburu-buru dan tidak dipaksakan. Sunag menambahkan ini tahun lalu. Saat ini ada kebutuhan untuk ini dan alternatif lain belum berhasil (misalnya digabungkan) jadi mari kita coba jalan ini.

Setiap alat utama, 3DS Max, UE4, Blender, Unity, Maya, Sketchfab menggunakan grafik shader. Berdebat bahwa three.js harus berada pada kerugian permanen dalam hal ini tampaknya tidak adil bagi three.js.

Saya tidak yakin apakah sistem shader berbasis grafik ini sempurna saat ini, tetapi setelah berada di inti, kita semua dapat terus bekerja dengannya.

Saya bersikeras bahwa kami terus mendukung API PhoneMaterial, StandardMaterial, dll dalam beberapa mode ke depan sehingga kami tidak merusak 95% dari proyek three.js, melakukan hal itu tidak bertanggung jawab. Ini juga bagus untuk bekerja dengan antarmuka lurus ke depan yang disederhanakan.

Saya tidak memiliki kemampuan atau keinginan untuk mencegah ini pindah ke inti. Saya hanya berharap itu bisa membuka blokir beberapa PR yang tidak terkait, karena telah dirujuk sebagai pemblokir. @bhouston , tidak pernah bermaksud berdebat dengan Anda juga, saya hanya ingin tahu tentang garpu dan pengalaman Anda dengannya.

Ketika saya memenuhi kebutuhan sebagai seniman 3d yang kelaparan, saya menyukai semua hal yang berbasis simpul. Nuke adalah komposer favorit saya, dan saya ingin belajar cara membuat alat seperti itu. Saya hanya berharap ini membuka blokir ini khususnya #14231. Saya menggunakan ini sebagai platform pembelajaran untuk diri saya sendiri, tetapi jika mengganggu saya akan berhenti memposting, Terima kasih.

@pailhead Saya belum pernah bekerja dengannya, tetapi Anda mungkin pernah mendengar tentang perancang zat? Sejauh yang saya mengerti, alat itu juga melampaui pembuatan grafik/shader - tetapi ini terutama berfokus pada desain bahan prosedural - mungkin itu petunjuk yang menarik?

Selain itu, saya tidak tahu alat mandiri dari atas kepala saya, tetapi pencarian google cepat menghasilkan dua ini:

• https://victhorlopez.github.io/editor/
• http://www.shaderplay.com/products/nodeflex/overview/overview.html
  terlihat menarik.

Namun, ada juga alat ini untuk node threejs, yang saya temukan di posting twitter oleh @mrdoob dari tahun 2015 - meskipun tampaknya tidak pernah diperbarui, saya bertanya-tanya mengapa ....

Alat itu tampaknya telah dirujuk di sini, tetapi saya tidak melihat cara untuk mengekspor apa pun. Tautan pertama terlihat luar biasa, tetapi hasilnya cukup buruk, tidak terlalu mudah dibaca dibandingkan dengan GLSL. Saya ingin tahu apakah itu sudah bisa digunakan untuk memasang kembali NodeMeterial , atau bahkan ShaderMaterial .

Saya melihat unity tetapi saya tidak dapat benar-benar menemukan alat grafik shader,

Btw jika saya entah bagaimana memblokir ini, tentu saja biarkan itu tidak diblokir. PR dari 2015, saya pertama kali merespon 8 hari yang lalu.

(Maaf ini agak keluar dari topik..)
@pailhead Untuk Unity shadergraph: Anda perlu memulai proyek unity dengan template pipa render yang ringan. Pastikan Anda membuka Unity Package Manager dan periksa apakah Anda menggunakan versi terbaru dari paket Render-pipelines.light.
Berikut tutorial untuk mengaturnya dimulai dengan proyek baru yang sedang disiapkan: https://youtu.be/Ar9eIn4z6XE?t=98

Editor simpul materi Sea3D Flow itu (http://sea3d.poonya.com/flow/) dibuat oleh @sunag , orang yang sama yang menulis NodeMaterial.

Terima kasih banyak @sunag
Bagaimana saya bisa mendapatkan cahaya tidak langsung? Apakah itu nilai dalam penyaji atau bagaimana saya bisa menghitungnya?

Saya ingin menerapkan efek postprocessing pada objek pilihan saja (yaitu mengubah saturasi).
Namun, saya tidak dapat menemukan apa pun yang terkait dengan masking (jika tidak ada cara lain) dengan node.
Saat ini saya sedang membaca OutlinePass (non-simpul) yang menulis banyak hal ke sekelompok buffer, yang dapat saya lihat sebagai metode yang layak untuk mencapai apa yang saya inginkan - tetapi saya tidak memiliki ide sedikit pun tentang cara mendekati ini dengan node.

Editor simpul materi Sea3D Flow akan berdiri sendiri sama dengan editor three.js, atau akan menjadi bagian darinya? Apakah masih akan diberi nama Sea3D atau yang terkait dengan three.js lainnya? Terima kasih @sunag telah merilis editor visual itu ke komunitas three.js.

tapi saya tidak punya ide sedikit pun tentang bagaimana mendekati ini dengan node.

@IARI

Sepertinya Anda mengetahui GLSL karena Anda dapat membaca OutlinePass dan memahami fungsinya. Anda juga tampaknya cukup memahaminya untuk melihat bahwa Anda tidak dapat mencapainya dengan node. Saya pikir jika Anda tahu cara mengkodekannya, Anda akan tahu cara membuat simpulnya. Terlebih lagi, jika Anda tidak tahu cara mengkodekannya, Anda mungkin tahu cara membuat simpul. Di mana pemutusan?

Saya tidak melihat posting ini dari 2016 sama sekali. Menarik untuk melihat Shader Frog. Saya ingin tahu apakah ini dapat dilihat sebagai vim vs emacs atau sesuatu. Saya suka menggunakan Sublime Text, Anda suka menggunakan yang lain. Yang satu suka menggunakan shader frog, yang lain suka menggunakan editor Sea3D three.js.

Saya suka bagaimana Shader Frog hanya mengeluarkan shader, tetapi itu bukan open source seperti Sea3D.

Lalu ada ini.

Menempatkan mekanik produk pihak ketiga ke dalam inti Three sepertinya merupakan keuntungan yang tidak adil dan saya tidak memahaminya secara politis.

Bagi saya, fakta bahwa semua ini dapat dicapai tanpa Tiga perubahan berarti bahwa itu tidak perlu, dan mengaburkan batas antara Three.js sebagai API pembungkus webgl dan sekarang mendorong fitur-fitur khusus implementasi. Menyimpan data node shader sangat spesifik untuk aplikasi dan sejauh yang saya tahu saat ini tidak ada format standar editor node umum untuk perangkat lunak apa pun? Menegakkan satu mungkin berbahaya bagi implementasi lain.

@bhouston
Saya tidak sabar menunggu NodeMaterial mendarat, karena ini dapat membuka blokir PR lain dan kehidupan dapat kembali normal. Tampaknya suara-suara lain telah mencoba untuk memblokir ini di masa lalu.

Saya pikir @pailhead berada dalam isolasi terhadap perpindahan NodeMaterials ini ke inti pada saat ini.
Saya pikir proyek tidak boleh terikat pada satu individu.

Terima kasih.

Saya tidak melihat alasan mengapa itu tidak dapat dicapai dengan node dengan cara yang persis sama seperti yang dilakukan outlinepass - tetapi dengan cara yang dapat dibaca, dimengerti, dan modular sehingga bagian-bagiannya dapat digunakan kembali.
Mengapa tidak ada misalnya node keluaran yang menulis ke buffer dan sebagainya.

Dan saya benar-benar tidak tahu glsl dengan baik, dan juga saya merasa - maafkan kata-kata saya - sangat sulit untuk membaca dan menulis kode shader. Dan di atas itu ekstra menyakitkan jika dibungkus dengan array bodoh dalam string dalam kode javascript.

Apakah Anda menggunakan webpack atau sesuatu?

susunan bodoh

Bodoh jika Anda harus mengimpornya ke dalam file .html. Ketika Anda bekerja dengan webpack dan Anda memiliki sintaks JS modern, Anda dapat menyimpan GLSL Anda dalam file .glsl, .vs, .fs dan memiliki penyorotan sintaks dan semacamnya.

shader.fs:

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

javascript (lihat ibu, tidak ada array bodoh)

import mShader from './shader.fs'

Kekhawatiran saya adalah bahwa saya tidak melihat banyak nilai dalam kebutuhan Anda karena Anda bertanya secara khusus bagaimana cara membuat efek, bukan cara membuat kode sesuatu. Akankah NodeMaterial membuka pintu bagi ribuan pertanyaan "bagaimana cara menaungi efek ini", yang hanya akan memiliki jawaban umum:

Gunakan simpul, Luke!

Tidak, harus membaca (apalagi menulis) kode dalam dua bahasa berbeda dalam file yang sama bagi saya selalu menyusahkan untuk dilihat. Juga webpack tidak membantu apa-apa, ketika Anda mencoba mempelajari kode shader contoh threejs yang semuanya dibungkus dengan stringarray jelek yang digabungkan dengan linebreak.
Bagaimanapun, Masalah ini adalah tentang sistem simpul, dan saya mengajukan pertanyaan sederhana tentang simpul - bukan untuk diskusi tentang preferensi pengkodean pribadi - yang tidak mengarah ke mana pun.

@IARI

Maaf, saya entah bagaimana tidak melihat tanda tanya di posting Anda jadi saya melewatkan pertanyaan Anda.

Ini jelas bukan diskusi tentang preferensi pengkodean pribadi, tetapi fakta bahwa ada perbedaan harus dipertimbangkan. Saya juga agak khawatir dengan kebingungan pertanyaan "Bagaimana cara membuat shader ini".

Sebelumnya, bilah ini cukup tinggi, orang menyerah begitu saja dengan i don't know glsl atau ketika mereka melihat "array bodoh dalam string". Tetapi jika lebih rendah, maka semua orang akan mencoba menulis shader.

Saya tidak menemukan pertanyaan Anda, tetapi saya ingin tahu apa itu. Apakah itu:

Bagaimana cara membuat ToonShader dengan NodeMaterial?

Dalam hal ini saya ingin tahu apa jawabannya.

Anda tidak bisa karena NodeMaterial tidak mendukung beberapa abstraksi.
Anda bisa, cukup gunakan NodeMaterial, untuk menghubungkan node

Mungkin diskusi ini bisa mendapat manfaat dari putus? Ini adalah jumlah posting yang tinggi, sangat jauh ke belakang (2015). NodeMaterial ada di /examples, jadi Anda mungkin bisa membuat shader toon Anda darinya. Mungkin Anda dapat membuka masalah lain atau memposting di stack overflow untuk itu secara khusus, dan sisa percakapan dapat beralih ke masalah baru?

Kita dapat dengan senang hati membawa diskusi ini ke tempat lain, seperti saluran kendur atau apa pun - saya benar-benar merasa itu tidak pantas di sini, tetapi sebagian besar akan mengganggu orang.

Forum mungkin lebih baik daripada kendur untuk kasus khusus ini.

@pailhead , seluruh diskusi ini telah keluar dari jalur produktif. Sebaiknya tutup masalah ini dan buat masalah baru yang berfokus pada masalah aktual yang dihadapi.

@bhouston

Setuju, kecuali bahwa saya pikir itu banyak masalah.

• bagaimana menerapkan nodematerial
• haruskah PR terkait dan tidak terkait lainnya diblokir
• cara mengizinkan orang yang tidak tahu cara menulis shader untuk menerapkan efek shader tertentu

Bagaimana cara membuat ToonShader dengan NodeMaterial?
Dalam hal ini saya ingin tahu apa jawabannya.
Anda tidak bisa karena NodeMaterial tidak mendukung beberapa abstraksi.
Anda bisa, cukup gunakan NodeMaterial, untuk menghubungkan node

Tertawa terbahak-bahak. Saya setuju dengan @bhouston... ini hanya lelucon. Anda bisa melihat contoh webgl_materials_nodes sebelum Anda mengatakannya?

Dan jika Anda ingin menggunakan kode, lihat ekspresi menggunakan FunctionNode .

@sunag saya pikir Anda salah paham. Saya ingin tahu mengapa, jika ini saat ini di /examples dan bukan /src apakah ini dibuat menjadi warga negara kelas satu. Masalah ini tampaknya telah diangkat oleh @AndrewRayCode pada tahun 2015.

Saya baru saja mengatakan bahwa masalah ini terlalu berlebihan, mulai dari jauh ke tahun 2015 dan dari membahas berbagai topik yang berbeda. Jika seseorang bertanya "bagaimana cara membuat whatever " mereka akan dirujuk ke stack overflow.

Jika ini akan menjadi perombakan besar-besaran dari three.js _(fakta bahwa kesatuan harus dikonfigurasi secara khusus untuk ini agak membuat saya takut)_ maka saya pikir harus ada masalah berkelanjutan yang didedikasikan di sini di github untuk pertanyaan seperti itu - usage of NodeMaterial . Seperti, orang yang menanyakan hal-hal acak (#14232) dirujuk ke utas ini, itu membuat komunikasi menjadi berantakan :)

Saya baru-baru ini harus menulis shader toon tetapi didasarkan pada garis, dan lebih khusus lagi garis lemak @WestLangley . Jadi bahkan dengan kebutuhan akan shader "toon" milik saya akan sangat berbeda. Ini juga akan melibatkan porting garis lemak ke NodeMaterial yang bisa memakan waktu lama. Ini semua adalah berbagai topik yang berbelit-belit di sini.

Dan jika Anda ingin menggunakan kode, lihat ekspresi menggunakan FunctionNode.

Jika saya kode saya akan menggunakan teks luhur, ShaderMaterial baik untuk saya tidak perlu FunctionNode . Jika saya membuat efek visual, saya mungkin akan mencari editor visual, tetapi ini adalah preferensi saya sendiri. Saya di sini hanya karena ini menghalangi PR lain :) Saya menyadari belum lama ini bahwa sebenarnya tiga kepentingan terbaik untuk ini mendarat secepat mungkin. Menguraikan percakapan ini mungkin akan membantu mempercepat segalanya. Dalam hal ini saya setuju dengan @bhouston ini harus yolod secepatnya!

Terima kasih.

Sebagai catatan: Saya tidak tertarik dengan shader toon atau semacamnya.
Saya menerapkan sistem, yang memungkinkan orang yang tidak menulis kode untuk memasang efek sederhana yang telah ditentukan sebelumnya di posisi tertentu.

Sayangnya saya khawatir saya tidak akan punya waktu untuk mempelajari cara menulis node sekarang, dan saya harus mengejar pengkodean dasar glsl, jadi untuk saat ini saya akan mengimplementasikan hal-hal tanpa node: itu tidak dapat diperpanjang , itu akan menggunakan beberapa render pass di mana satu pass mungkin cukup dengan implementasi node yang baik, itu akan kurang mudah dibaca, ...

Secara keseluruhan sayangnya saya baru mengenal topik umum dan perlu mendapatkan lebih banyak pemahaman dasar, tetapi menilai dari apa yang saya ketahui, node akan menjadi cara terbaik untuk melakukan ini dengan cara yang benar-benar elegan dan dapat diperpanjang.
Saya sangat ingin memiliki beberapa informasi tentang implementasi node seperti artikel blog atau tutorial.

Penafian: Saya tidak menuntut apa pun, hanya berharap untuk mengklarifikasi permintaan saya yang tidak jelas dari atas.
Terima kasih untuk semua pekerjaan yang dilakukan di sini - ini benar-benar menakjubkan.

Saya diminta di utas https://github.com/mrdoob/three.js/issues/14232 untuk mengomentari implementasi shader berbasis Node. Saya pikir itu sangat miskin. Saya suka idenya, tetapi implementasinya sama sekali tidak memadai menurut saya, jadi, karena saya sangat negatif, saya akan memberikan beberapa alasan konkret mengapa.

Dapat dimengerti

Setelah membaca beberapa kode untuk Node dan berbagai kelas utilitas - saya dapat dengan jelas mengatakan bahwa ini adalah tantangan besar untuk dipahami.

• nama variabel tidak deskriptif
• tidak ada komentar sama sekali
• nama metode tidak jelas atau benar-benar menyesatkan. (misalnya menurut Anda apa yang dilakukan metode "build"? - tebak)

Struktur kode benar-benar aneh. Pertimbangkan cuplikan ini:
https://github.com/mrdoob/three.js/blob/e2b49c017b2d1f37ab34317033a27df7b5a71d4d/examples/js/nodes/FunctionNode.js#L39 -L50

Anda dapat mencapai hal yang sama dengan:

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

"Arsitektur Baru"

Apa itu "Node"? Saya meminta definisi struktur data, karena tampaknya itu hanya konsep yang samar-samar karena ada sedikit kesamaan antara "Node" yang berbeda, sepertinya mengetik bebek, jika itu seperti Node - itu adalah Node.js.

Pemisahan kekhawatiran

Bagaimana Anda beralih dari Node ke ShaderMaterial ? Saat ini, ini merupakan campuran tanggung jawab antara berbagai bagian logika dari setiap node, beberapa pembangun, beberapa cache, parser, dll. Tidak ada tanggung jawab yang jelas untuk proses ini. Node menggunakan NodeBuilder? Apa ...? Dari nama saya akan memiliki meskipun NodeBuilder adalah pabrik yang memproduksi atau membangun node, ternyata itu sebenarnya sebuah struktur tambahan. Sejauh yang saya tahu ada pekerjaan yang cukup berbeda yang harus dilakukan di sini:

• Buat grafik
• Mengesahkan
• Bangun representasi perantara
• mengoptimalkan
• kompilasi ke GLSL

Sama sekali bukan itu yang akan Anda temukan dalam kode saat ini.

Kesimpulan

Tanpa dokumentasi dan komentar yang baik, saya melihat implementasi ini sama sekali tidak memadai. Dengan hal-hal di tempat, ini masalah kode spageti dan kurangnya desain. Dengan itu - saya mengakui bahwa ini adalah alat yang ampuh dan implementasi kerja dari konsep yang sangat berguna.

@Usnul kita tidak akan pernah membuat kode seperti ini di Three.JS "return this.inputs.find(input => input.name === name);"

Alasannya adalah bahwa "=>" membuat fungsi yang harus dipanggil pada setiap input. Panggilan fungsi sangat lambat dalam JavaScript dibandingkan dengan for-loop atau while-loop. Jadi kami selalu melakukan loop eksplisit alih-alih kode berorientasi panggilan balik. Saya tahu ini lebih bertele-tele tetapi itu perlu. Semua Tiga..JS seperti ini dan sengaja.

@Usnul , masalah desain Anda sangat berguna, dapatkah Anda membantu dengan beberapa refactoring? Saya pikir semua orang akan menghargai masukan dan kontribusi desain Anda. :)

Alasannya adalah bahwa "=>" membuat fungsi yang harus dipanggil pada setiap input. Panggilan fungsi sangat lambat dalam JavaScript dibandingkan dengan for-loop atau while-loop. Jadi kami selalu melakukan loop eksplisit alih-alih kode berorientasi panggilan balik. Saya tahu ini lebih bertele-tele tetapi itu perlu. Semua Tiga..JS seperti ini dan sengaja.

itu poin yang adil. Secara pribadi, saya memiliki filosofi bahwa kinerja dan keterbacaan harus dalam skala dan bukan satu atau yang lain, tetapi konsistensi itu baik. Masalah utama saya dengan contoh spesifik itu adalah bahwa ini bukan cara umum untuk mengulangi array. Inilah cara idiomatik:

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

atau katakanlah Anda memiliki sepotong kode yang panjangnya 50 baris dengan bentuk:

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

itu tidak dapat dibaca seperti:

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

@Usnul dapatkah Anda membantu memperbaiki kode untuk memperhitungkannya? Saya pikir refactoring seharusnya mudah, bukan? Saya adalah pendukung besar Code Complete, buku itu sangat mempengaruhi saya.

@usnul jika Anda tidak menyukai ini, Anda bebas melakukan refactor ini? Tidak masalah jika terlihat seperti ini atau tidak, yang penting dibangun di atas ini, adalah pemahaman saya.
Saya tidak tahu apakah refraktor harus terjadi saat ini dalam contoh (atau mungkin repo lain) atau haruskah dipindahkan ke src langsung seperti yang disarankan @bhouston .

@IARI

Saya benar-benar tidak tahu glsl dengan baik , dan juga saya merasa - maafkan kata - kata saya - sangat sulit untuk membaca dan menulis kode shader .

tetapi menilai dari apa yang saya ketahui , node akan menjadi cara terbaik untuk melakukan ini dengan cara yang benar-benar elegan dan dapat diperpanjang.

Saya juga tidak dapat mengklaim bahwa saya mengenal GLSL dengan baik, tetapi saya cukup mengetahuinya untuk menyelesaikan masalah saya. Dari apa yang saya tahu, saya kebanyakan setuju dengan apa yang ditulis @usnul di sini, dan apa yang ditulis oleh verbose dibandingkan dengan GLSL.

Jika Anda tidak tahu GLSL, saya pikir akan sangat sulit untuk membandingkannya dengan yang lain. Seperti yang Anda tulis sendiri, jika kami judge on what you know , dan Anda mengatakannya sendiri you don't know glsl saya pikir masukan Anda harus diambil dengan penafian :)

Ini seperti jika saya berkata:

Jepang adalah tempat terburuk di planet ini... tapi sebenarnya saya belum pernah ke Jepang".

Terima kasih.

nama metode tidak jelas atau benar-benar menyesatkan. (misalnya menurut Anda apa yang dilakukan metode "build"? - tebak)

Wow, saya bahkan tidak menyadari bahwa ini adalah ShaderMaterial bawahnya. Dugaan saya adalah ini melakukan semua hal yang dilakukan THREE.WebGLRenderer dengan template shader.

Saya benar-benar tidak tahu glsl dengan baik, dan juga saya merasa - maafkan kata-kata saya - sangat sulit untuk membaca dan menulis kode shader.
tetapi menilai dari apa yang saya ketahui, node akan menjadi cara terbaik untuk melakukan ini dengan cara yang benar-benar elegan dan dapat diperpanjang.

@pailhead Maksudnya adalah bahwa ada tingkat menengah di antara berbagai hal.

Saya tidak mengerti mengapa alarm ini. @mrdoob tidak akan pernah menggabungkan sesuatu selain solusi yang bagus. Semua PR yang bagus, peningkatan dari siapa pun di NodeMaterial atau tidak, sangat berguna bagi komunitas. Jika ini masih belum menyatu di inti itu karena kita perlu memperbaikinya dengan lebih banyak pekerjaan.

@sunag apakah ada yang bisa dilakukan orang lain untuk membantu Anda dengan proyek ini? Saya bersedia menulis dokumentasi, jika Anda siap untuk dokumen dan dapat meninjaunya.

@sunag apakah ada yang bisa dilakukan orang lain untuk membantu Anda dengan proyek ini? Saya bersedia menulis dokumentasi, jika Anda siap untuk dokumen dan dapat meninjaunya.

Ini akan menjadi besar. Tidak diragukan lagi banyak membantu.

Sistem material berbasis simpul terlihat luar biasa, itu akan memperluas kekuatan ekspresi.

Bagaimana kita akan beralih dari sistem material yang ada ke sistem material berbasis simpul di inti? Akankah kita berdua menjadi dua sistem atau mengganti yang sudah ada dengan node satu?

Maaf, mungkin saya tidak berpikir untuk mengejar utas ini karena utas ini terlalu besar ...

Akankah kita berdua menjadi dua sistem atau mengganti yang sudah ada dengan node satu?

Saya melihat penggantian sebagai tujuan akhir, lebih baik untuk kinerja dan pemeliharaan. Langkah selanjutnya adalah membuat MeshStandardNodeMaterial dan materi simpul lainnya di inti berjalan persis seperti inti dalam visual, sintaks dan kinerja.

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

Saya sudah menunjukkan shadowMap di proyek saya.

Saya memiliki pemandangan dengan cahaya terarah dan 2 geometri yang menggunakan MeshStandardNodeMaterial.

Saya telah mengaktifkan
castShadow = benar untuk cahaya
castShadow dan menerimaShadow untuk kedua objek.
shadowEnabled = benar untuk Renderer

Mengapa tidak berhasil?
Apakah saya harus menggunakan properti bayangan dari MeshStandardNodeMaterial? Apakah ini tujuannya?

Adakah yang bisa membantu saya?
Terima kasih!

@claudioviola
pertanyaan dukungan pergi ke forum stackoverflow.

@sunag Apakah menurut Anda NodeMaterial cukup stabil sehingga kita bisa mulai dengan menyediakan file deklarasi TypeScript? Jika Anda tidak merencanakan perubahan API besar dalam waktu dekat, saya akan mulai dengan tugas ini karena NodeMaterial adalah grup modul terakhir tanpa dukungan TS.

@sunag Apakah menurut Anda NodeMaterial cukup stabil sehingga kita bisa mulai dengan menyediakan file deklarasi TypeScript? Jika Anda tidak merencanakan perubahan API besar dalam waktu dekat, saya akan mulai dengan tugas ini karena NodeMaterial adalah kelompok modul terakhir tanpa dukungan TS.

@Mugen87 Ya, harus ada lebih banyak penambahan daripada perubahan. Tambahkan dukungan TS akan sangat bagus. 👍

Oke, dukungan TS sudah siap dengan rilis berikutnya R017