WebGL (1.0). Using multiple programs to render both a 3D object and a small drawing application

Question

We are currently working on a project, which requires us to render a 3D object and a small drawing application next to each other. We are drawing them in the same canvas and use viewport and scissor to give them their separate area. So far, we have managed to render both, but our drawing application does not draw the points that are put into the buffer (it works when used on it's own).

We are currently using the approach described in the WebGL fundamentals guide: https://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html

At Init time:

create all shaders and programs and look up locations.
create buffers and upload vertex data.
create textures and upload texture data.

At Render Time

clear and set the viewport and other global state (enable depth testing, turn on culling, etc..)
For each thing you want to draw
- call gl.useProgram for the program needed to draw.
- setup attributes for the thing you want to draw
  - for each attribute call gl.bindBuffer, gl.vertexAttribPointer, gl.enableVertexAttribArray
- setup uniforms for the thing you want to draw
  - call gl.uniformXXX for each uniform
  - call gl.activeTexture and gl.bindTexture to assign textures to texture units.
- call gl.drawArrays or gl.drawElements

In the pseudo implementation as seen below, the clicks in the drawing application (event handler not shown, but working) are registered and put into the buffer (the program used at this time is the correct one and the correct buffer is bound before the subdata is added), but when we reach the point of rendering, the points ect. are not appearing?

function render(){
  switchProgram()
  render3Dobject()

  switchProgram()
  renderDrawingApplication()
}

function switchProgram(){
  gl.enable(gl.SCISSOR_TEST);
  
  // Set viewport and scissor. 

  // Bind buffer
  // Set vertexAttributePointer
  // EnableVertexAttributeArray

  // Setup uniform textures. 

}

function render3Dobject(){
  // Handle rotation, matrices ect. 
  // Draw object using DrawElements. 
}

function renderDrawingApplication(){
  // Draw all points and objects from drawing program using drawArrays. 
}

WebGL (1.0). Using multiple programs to render both a 3D object and a small drawing application

0 Answers0