Drawing many shapes in WebGL

by

In pseudo code

At init time

  • Get a context (gl) from the canvas element.
  • for each shader
    • create shader
    • look up attribute and uniform locations
  • for each shape
    • initialize buffers with the shape
  • for each texture
    • create textures and/or fill them with data.

At draw time

  • for each shape
    • if the last shader used is different than the shader needed for this shape call gl.useProgram
    • For each attribute needed by shader
      • call gl.enableVertexAttribArray, gl.bindBuffer and gl.vertexAttribPointer for each attribute needed by shape with the attribute locations for the current shader.
    • For each uniform needed by shader
      • call gl.uniformXXX with the desired values using the locations for the current shader
    • call gl.drawArrays or if the data is indexed called gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferOfIndicesForCurrentShape) followed by gl.drawElements

Common Optimizations

1) Often you don’t need to set every uniform. For example if you are drawing 10 shapes with the same shader and that shader takes a viewMatrix or cameraMatrix it’s likely that viewMatrix uniform or cameraMatrix uniform is the same for every shape so just set it once.

2) You can often move the calls to gl.enableVertexAttribArray to initialization time.

More Related Contents:

  1. Learning WebGL and three.js [closed]
  2. WebGL: How to correctly blend alpha channel png
  3. WebGL Read pixels from floating point render target
  4. Rendering meshes with multiple indices
  5. Canvas toDataURL() returns blank image
  6. How does the calculation of the light model work in a shader program?
  7. Emulating palette based graphics in WebGL v.s. Canvas 2D
  8. Multiple transparent textures on the same mesh face in Three.js
  9. How to get the absolute position of a vertex in three.js?
  10. Three.js / WebGL – transparent planes hiding other planes behind them
  11. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  12. How do I clean up and unload a WebGL canvas context from GPU after use?
  13. How to write a web-based music visualizer?
  14. webgl readpixels is always returning 0,0,0,0
  15. Three.js/WebGL: Large spheres appear broken at intersection
  16. How to do batching without UBOs?
  17. Transparent textures behaviour in WebGL
  18. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  19. How to get object in WebGL 3d space from a mouse click coordinate
  20. Javascript Typed Arrays and Endianness
  21. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  22. Antialiasing not working in Three.js
  23. Read pixels from a WebGL texture
  24. Alpha rendering difference between OpenGL and WebGL
  25. How to detect if user has enabled full screen in browser
  26. Threejs: assign different colors to each vertex in a geometry
  27. Texture splatting with Three.js
  28. “Tainted canvases may not be loaded” Cross domain issue with WebGL textures
  29. How do I convert a vec4 rgba value to a float?
  30. Why do shaders have to be in html file for webgl program?

Leave a Comment