do I need to write a shader for phong,
Well I know I do but, when using THREE.js do i need one?
I have been reading this book (http://shop.oreilly.com/product/9781849699792.do) it explains how to write a phong shader.
I thought I would try it out, but then found this: http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial
Are there any differences between the two? How about if I had a large detailed model, as opposed to a sphere?
Thanks
You do not need to write a phone shader. The Phong material provided by three.js is an implementation of the Blinn–Phong shading model, and you can use it for any of your models.
Implementing your own would not result in any difference, but it likely would be great to further your understanding.
Related
What is the current solution in r136 to blend lights, shadows and color in a ShaderMaterial ? I already found the solution for the fog support.
I found some examples in previous revision (r108) like this codesandbox.
Actually, I'm looking for this kind of result : codesandbox.
Should I copy MeshPhongMaterial shaders as code base for my own shaders ?
The usage of custom shaders is mandatory in my projects, that's why i'm not using built-in materials.
Any idea or example ?
Thanks !
This question is huge, and does not have a single answer. Creating lights, shadows, and color varies from material to material, and includes so many elements that it would require a full course to learn.
However, you can look at the segments of shader code used by Three.js in this folder called /ShaderChunk. If you look up "light", you'll see shader segments (or "chunks"), for each material, like toon, lambert, physical, etc. Some materials need parameters to be defined at the beginning of the shader code, (those are the _pars files), some are calculated in the vertex shader, some in fragment, some need to split the code between _begin and _end, etc:
Shadows are even more complex because they require a separate render pass to build the shadowmap. Like I said, re-building your own lights, shadows, and color is a huge undertaking, and it would need a full course to learn. I hope this answer at least points you in the right direction.
After simplifying glb successfully with the answer in this post.
The textures in are not being applied to the model any more (it appears completely black and unreflective(no material)
How would I programmatically get the textures to work with this new simplified geometry?
I think its something to do with the uv's but im not to sure how to have it work according to simplified geometry, if even possible.
THREE.SimplifyModifier currently does not preserve UVs in the geometry, which you'll need for textures to work. See: https://github.com/mrdoob/three.js/issues/14058. There is a workaround suggested in that issue (via changes to SimplifyModifier) but as discussed there, some artifacts will likely be visible in the result. If you can do the simplification in Blender or another modeling tool, you may have more control over the process and can get better results.
I'd like to have a dynamic GLSL shader texture to be used as a reference map (for displacement and other stuff) on multiple, different materials on different Meshes.
My approach would be to do the computation one time, using a THREE.WebGLRenderTarget, setup a ortho cam, a 1X1 plane with a THREE.ShaderMaterial, and access the WebGLRenderTarget.texture, that I'd embed in a "master" object, whenever and wherever I need.
Is there any "official" object I can / may use for this? I seen the postprocessing objects are pretty similar (EG ShaderPass) but I'm unsure if and how to use them.
Thank you.
It might be me, as I'm not very experienced with Three.js, but the Three.js instancing example seems very vague.
I thought BufferGeometries were automatically created from Geometries in the new Three.js, and I don't understand why a shader is being added to the example.
The documentation says nothing about instancing. Searching up 'inst' in the Three.js docs already gives 0 results.
Is there someone who would give me a simple example?
I've always found lighting and shading to be the most difficult part of WebGL / Three.js to get right – I feel like I'm making it up.
What combination of lighting and shading do you think I would need to achieve a similar look and feel to the following image? It's so soft and yet well-defined, whereas my attempts always come out harsh and haphazard.
http://threejs.org/examples/#webgl_shadowmap
http://threejs.org/examples/#webgl_morphtargets_horse
This examples use the same lightning effect, check out the Code.