Im working on a deferred rendering pipeline using three.js WebGL Renderer. I currently got all gBuffer textures working, sending normals, diffuse color, etc. Now I’m trying to implement lighting and I want to integrate as much of Three.js built-in features as possible. The idea is to use Three.js shader chunks inside of deferred pipeline shaders. I have “ported” lighting chunks into the fullscreen quad shading pass fragment shader (where all the shading is done), replaced variable names and made it work without errors. However, here is my issue: Lights’ colors are always pure black. Let me explain.
I checked and debugged a lot and I know
NUM_OF_LIGHTS is correctly sent to the shader, and the corresponding uniform arrays of type of lights (e.g.
directionalLights ) are of correct length. However each light’s color parameter is always pure black (debugged it and it is exactly
0.0, 0.0, 0.0 ). No matter what I set in the 3js constructor (e.g.
new THREE.DirectionalLight( 0xff0000, 2.0 ); ) its always the same. I output the color to test directly (bottom left corner)
finalColor = vec4( directionalLights[ 0 ].color, 1.0 );
and its always black (I even checked specifically with
if ( directionalLights[ 0 ].color.r == 0.0) -> true for each channel). Other values like normals or diffuse color are correct, so it seems like an issue with light uniforms not being sent with correct values?
Does anybody know what could be the problem?
I can send a github repo, but a lot of it is still messy work in progress I have yet to commit, so I wanted to ask first if its maybe something theoretical.
Update: I pushed the changes to github to branch
light-chunks-test. Please feel free to check it out at GitHub - DolphinIQ/Ogar-Engine at light-chunks-test. How to run is easy & specified in the Readme. For this, use the example
examples/phongMaterial.html. As I mentioned, it’s work in progress and still messy with console logs, debugging, commented code, etc.
Most important files:
src/Main.js - main setup of MRT and everything else. Currently lights are added to the MRT scene for simplicity (so they can be read inside shading pass). Later on obviously they wil be added through user files, like
src/shaders/finalRender.glsl.js - the fragment shader of the fullscreen quad. This is where gBuffer data is read and where shading is going to happen. This is also where the light chunks are being added. Currently the only chunks added are those absolutely necessary to get the things working, ie. bare minimum.
src/shaders/chunks/light_fragment_begin.glsl.js - this is almost exactly like the one at three.js, but some chader chunks need to be slightly edited for different variable names (gBuffer data) or to comment out features which are not implemented yet
examples/phongMaterial.html - the example to run, where the actual scene and cubes are added.
If anything is unclear, feel free to ask
Thank you in advance for taking a look
It might be something simple, but I feel really stuck with this one
I shared this in Discord but just to make this more visible, it seems that the lights uniforms aren’t initialized or set at all in the visible render.
WebGLLights#setup keeps getting called with a populated and empty lights array:
And I notice the same behavior when logging
currentRenderState.state.lightsArray in the WebGLRenderer render loop.
I’m suspecting state is being reset or toggled somehow, but I wonder if the problem will go away if we have access to the populated lights array.
I guess this topic was more about integrating Three.js lighting into custom shaders. After looking more and more through the web, testing solutions and hours of debugging I found a way to make this work