Skip to content Skip to sidebar Skip to footer

Using A Different Vertex And Fragment Shader For Each Object In Webgl

I have a scene with multiple objects in webgl. For each object I want to use a different vertex and a fragment shader. My first question is, is it possible to have a shader for eac

Solution 1:

You can look up pretty much any WebGL example and turn it into a multiple shader example.

Pseudo code

//At init timeforeach shader program
    createand compile vertex shader
    createand compile fragment shader
    create program and attach shaders
    link program
    record locations of attributes and uniforms

foreach model/setof geometry/points/data 
    create buffer(s) for model
    copy data into buffer(s) for model

foreach texture
    create texture
    usually asynchronously load textures

//at draw time
clear

foreach model
   useProgram(program for model)
   setup attributes for model
   setup textures for model
   set uniforms for model
   draw

This is no different than drawing 1 model with 1 shader program. Just do the same setup.

a little more code...

For setting up attributes would look something like

for each attribute used by model
   gl.enableVertexAttribArray(attribLocation);
   gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute);
   gl.vertexAttribPointer(attribLocation, ...);

Setting up textures (might) look something liek this

for each texture used by model
   gl.activeTexture(gl.TEXTURE0 + ndx);
   gl.bindTexture(gl.TEXTURE_2D, texture);

Finally you'd use the program

gl.useProgram(programForModel);
for each uniform
   gl.uniform???(uniformLocation, uniformValue);

gl.drawArrays(...) 
or 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferOfIndicesForModel);
gl.drawElements(...);

Post a Comment for "Using A Different Vertex And Fragment Shader For Each Object In Webgl"