6 ms·
I really like three.js, I use it, and I like that people are doing good things like this with it. But... I wonder if someone was building a 3D library for the
by onion2k 5y ago
I really like three.js, I use it, and I like that people are doing good things like this with it.
But...
I wonder if someone was building a 3D library for the web today if they'd do things the same way as three.js does things. Under the bonnet three.js is effectively a bunch of string concatenations that build up GLSL shaders for things like materials. It works well, but if you look through the code it really is a massive series of if statements (and loops? :) ) like "if a lambert material else if phong else if standard else if physical, and if lights > 0, and if env maps.." Hundreds of them, all smooshed together. The external API that you use to access everything is quite clear and easy, but doing things extending a material is much harder than it needs to be (you essentially use a regex to modify the big concatenated GLSL shader string..).
I can understand wanting to use the API in another language, but I'm less sure about wanting to use the internals.
- OskarS 5y agoThis is a reasonably common technique in game engines, actually, usually referred to as an “uber shader”. The idea is to have one massive shader with a bunch of if’s that does everything, and then you don’t have to pay the cost of shader state changes. There are lots of arguments for/against the uber shader technique, but I’m guessing it was probably intentional for performance reasons, not just an accident of development.
- pjmlp 5y agoIn regards to WebGL APIs I rather use BabylonJS or PlayCanvas for the tooling.
- dagw 5y agoCould you elaborate? I've done a fair bit of Threejs and would love to hear about better tools/libraries.
- pjmlp 5y agoPlayCanvas is like using an Unity like tooling that was developed for WebGL as only target. BabylonJS is more high level, you can use it from either JavaScript or TypeScript, it has a playground which is more IDE like than the threejs editor, and it follows a scenegraph approach, with additional tooling for working with meshes, GUIs (early steps), animations, ... Since it is also used by the Office team, effort is being taken to make it work on top of React Native as well. Microsoft has a YouTube channel with BabylonJS tutorials.
- mrdoob2 5y agoWe are slowly moving away from that approach. Have a look at the NodeMaterial API that it's being designed right now: https://threejs.org/examples/?q=nodes#webgl_materials_nodes_playground https://threejs.org/examples/?q=nodes#webgl_materials_nodes_...
- Donckele 5y agoHmmm, not working on my latest iphone mobile safari. All other examples are working…
- pierrec 5y agoI've added custom materials building upon THREE's shader code, and found this part more organized than you're describing, though undocumented. They're using a custom shader preprocessor, and shaders use it to include different "chunks" based the type of material, whether it has lighting/shadows enabled, etc. Some parts are a bit messy, but overall a decent compromise to generate efficient shader code for each material (and I don't think it counts as an "uber shader"). Note this is all without using the new NodeMaterial, which I didn't even realize existed due to the also missing documentation.