I have a GL Shader to create instances. The instances get a random rotation, but then the shading goes all weird. The solution I thought would cure this, was rotating the normals in the same way. But looking at the example below, it seems to make things worse.
It seems you forked the pen from some older topic, i fixed it there actually since the transformed variable isn’t updated, but also normal instead vNormal should be passed and multiplied by the normalMatrix.
https://codepen.io/Fyrestar/pen/JQpGEM?editors=1010
2 Likes
I see, but when you zoom in, it looks like the balls are no longer smooth shaded, now they look flat shaded to me.
[editted] I think the smoothing is not what’s wrong here. It looks like all instances take the same lighting as if they are all at (0,0,0).
Here I have a new version where I put the light right above the center of the plane. All balls look like they take light from right above, even those that are clearly above the only light in the scene.
Can you show a screencap how it looks for you? It shows smooth for me on all devices.
It is a directional light, it doesn’t matter if balls are behind the light. (for shadows: as long as they are inside the frustum)
Which balls are above the light? In your pen the light shines in sidewards.
Somehow the Codepen went wrong again, here I use a pointlight. The helper shows the location of the light. As you can see, some of the balls clearly are above the pointlight and still receive light from above:
The mvPosition wasn’t correctly set, transformed with the offset has to be used. Also notice you added the light helper to the light, that made it appear at the wrong position as well.
1 Like
Thanks, that is a big help, but it also made clear that the codepen does not fully emulate the situation I have in my actual project.
First: your solution does, as we can all see, work in the codepen. However, in my project the light appeared on the sides that were not facing the light at all. When I changed one line from
vNormal = normalize(transformedNormal);
to
vNormal = - normalize(transformedNormal);
The instanced objects were all lit correctly. I have no clue why, my instancing shader code in my project does not differ from the one in the codepen example.
That I could let go, it works even though I can not figure out why. Now there is one other thing, and that has to do with my earlier remark about the shading not being smooth. In the codepen I was wrong, the shading was smooth. But now consider this image from my actual project:
On the left you see a number of rocks rendered by the default phong shader. They are smooth shaded. On the right you see the same rocks, but now they are rendered by the instancing shader - the same as in the codepen. And as you can see, these rocks show their triangulated faces and are not flat shaded at all.
Before your solution it was even worse, lighting was wrong and the outline was missing or just partially rendered, so we came a long way. But would you have some suggestions were to look for this last part of the puzzle?
You might check if you didn’t made a mistake somewhere, are you sure flat shading isn’t enabled? You might try to isolate the issue, try to use the exact same shader in the pen.
I can’t help further from that with just a screencap. One reason also could be the InstancedBufferGeometry missing the index getting turned into a non-indexed?