CODEWITHSUNDEEP
opengl-es3dthree.jswebglshader
user4124520
user4124520

Reputation:

Three.js doesn't use different shader programs for different mesh objects, why?

I've tried to figure out, how three.js is working and have tried some shader debugger for it.

I've added two simple planes with basic material (single color without any shading model), which are rotating within rendering process.

enter image description here

First of all, my question was... Why is three.js using a single shader program (look at the WebGL context function .useProgram()) for both meshes. I suppose, that objects are the same, and that's why for performance reasons a single shader program is using for similar objects.

But... I have changed my three.js application source code, and now there are a plane and a cube in scene, which are rotating.

And let's look in shader debugger again:

enter image description here

Here you can see, that three.js is using again one shader program, but the objects are different right now. And this moment is not clear for me.

If to look at that shader, it seems to be very generic and huge shader program, and there are also two different shader programs, which were compiled, but not used.

So, why is three.js using a single shader program? What are those correct (or maybe not) reasons?

Upvotes: 1

Views: 199

Answers (1)

vals
vals

Reputation: 64164

Most of the work done in a shader is related to the material part of the mesh, not the geometry.

In webgl (or opengl for that matter) the geometry as you understand it (if it is a cube, a sphere, or whatever) is pretty irrelevant.

It would be a little bit more relevant if you talk about how the geometry is constructed. But in these days where faces of more than 3 vertices are gone, and triangle strips are seldom used, that are few different geometries... face3 geometries, line geometries, particle geometries, and buffer geometries.

Most of the time, the key difference to use a different shader will be in the material.

Upvotes: 2

Related Questions