I am trying to implement new custom features to the MeshStandardMaterial, in particular I would like to add the possibility to add two normal map that use different UV sets. Then I will combine them inside the fragment shader.
So far I have "doubled" meshstandardmaterial and make WebGLProgram insert keyword like "Use NormalMap2". The next step would be to mess around with actual glsl code.
Is there some way to print fragment shader or some how look what has been passed to it?
The easiest way to debug my code was to use webGL inspector, it shows me what texture has been passed to the shader and also it shows me all shader code
Related
Thansks to #Mugen87, I managed to create a dynamic mask on my scene using a post processing method : https://jsfiddle.net/40gef6sz/ (if you move the camera you will see the cube disappear behind and invisible circle, made with this image : https://i.imgur.com/sJwKYvZ.jpg)
I would like to add some effects on my mask using a fragment shader script. On this fiddle you can see my texture moving (I replaced a THREE.MeshBasicMaterial with a THREE.ShaderMaterial) : https://jsfiddle.net/grc_michael/ghmf5sdo/
When I combine this new material with the post processing method, I can't reach the same result than the first jsfiddle. I don't know where to add my #define ALPHATEST value inside my fragment shader.
You can see the result here : https://jsfiddle.net/grc_michael/82bkLn96/
I think I'm quite close the expected result. Does anyone know where to add the ALPHATEST value properly inside my fragment shader ? Thank you
Here us the original, updated fiddle with your custom shader material: https://jsfiddle.net/k2c5upfo/1/
When using an image as an alpha map, you can sample it in the same way like built-in materials. Meaning the alpha test looks like so:
if (texture2D(texture1,xy).g < 0.5) discard;
I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object.
As this texture is not meant to change over time, I want to process it only once.
I think that GPUComputationRenderer could do the trick but I don't figure out how and what is the minimal code that can achieve this.
I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object.
Sounds like you just want to perform basic RTT. In this case, I suggest you use THREE.WebGLRenderTarget. The idea is to setup a simple scene with a full-screen quad and a custom instance of THREE.ShaderMaterial containing your shader code that produces the texture. Instead of rendering to the screen (or default framebuffer), you render to the render target. In the next step, you can use this render target as a texture in your actual scene.
Check out the following example that demonstrates this workflow.
https://threejs.org/examples/webgl_rtt
GPUComputationRenderer is actually intended for GPGPU which I don't think is necessary for your use case.
I'm currently working on something along the lines of a plugin for another program to add 3D capability to it, so I'm trying to put all the functionality i can from three.js into it, with the added goal of this being a good way to learn all the functionality of three.js firsthand.
I'm running into an issue now as i implement textures and materials that with mesh basic material, setting some things which the documentation on the main threejs.org site shows are features, doesn't actually do anything.
when i set a texture for either specularmap or lightmap nothing is actually showing up. Im pretty sure its not a mistake im making because setting the texture of the map works, but trying to set this same texture for the specularMap or lightMap is doing nothing. Does a regular texture work for these, or do i have to do something different?
I'd also like to know what the shading property does for mesh basic, because as far as i can see setting it to smoothshading/flatshading/noshading is doing nothing aswell.
MeshBasicMaterial does not respond to lights. Change your material to MeshLamberMaterial or MeshPhongMaterial, for example.
For MeshBasicMaterial and MeshLambertMaterial, the specularMap is used only to modulate the reflection when an environment map is used.
For any material, lightmaps require a second set of UVs. geometry.faceVertexUvs[ 0 ] contains the usual set of UVs; for a lightmap, you need to add geometry.faceVertexUvs[ 1 ], a second set of UVs.
For MeshBasicMaterial, the shading property only applies when an environment map is used. SmoothShading will yield smooth reflections; FlatShading will yield faceted reflections.
three.js r.66
thanks for reading.
I have a WebGLRenderTarget that I render to. At a subsequent stage in the rendering process I use that texture as input to a shader.
I would like to be able to use that same render target with multiple wrappings/filterings. I have looked some at the internals of three.js, and am not sure that it is possible.
It seems like in webGL I would be able to just bind the same texture multiple times with different parameter settings. I figure I can fork three.js to support a new type of texture that just uses another texture with new parameters, but wanted to see if there was some way I could do this without forking.
Thanks in advance!
I would like to extend the default lambert material shader of three.js.
I basically would like to add some custom code at the end of the default fragment shader so the last line will apply my color transformations.
It's there any simple way to do that? Or should I rewrite a completely new one adding the default code on it?
I've created a custom ShaderMaterial using the predefined blocks from the default materials.