WebGL 2 Development with PicoGL.js

Tarek Sherif

BioDigital

Big, high-detail anatomy visualizations
Our male base anatomy contains:
- 2230 objects
- 3.3 million triangles

BioDigital

Things we're excited about in WebGL 2:
- UBOs
- Instanced drawing
- Occlusion queries
- (i.e. reduce number of draws/draw overhead)

WebGL 2 is a BIG Update

New shading language
Uniform buffer objects
Transform feedback
Query objects
Multiple render targets
etc, etc, etc...

How to get started?

PicoGL.js

Just simplify management of the rendering layer
- No math, scene graph, physics, etc.
User manipulates GL constructs
- Programs, VAOs, UBOs, transform feedbacks, queries, etc.
PicoGL.js just provides a friendly API, helps with layout and works around implementation bugs

PicoGL.js 101

                
  // App manages global GL state
  var app = PicoGL.createApp(canvas)
  .clearColor(0.0, 0.0, 0.0, 1.0);
  
  // Program, VBO, VAO
  var program = app.createProgram(vertexShaderSource, fragmentShaderSource);
  var positions = app.createVertexBuffer(PicoGL.FLOAT, 2, positionData);
  var vertexArray = app.createVertexArray()
  .vertexAttributeBuffer(0, positions);

  // Draw call manages per-draw state
  var drawCall = app.createDrawCall(program, vertexArray);

  app.clear();
  drawCall.draw();

Raw Uniform Buffer Objects

                
  var uniformsLocation = gl.getUniformBlockIndex(program, "myUniforms");
  gl.uniformBlockBinding(program, uniformsLocation, 0);

  // HAVE TO KNOW STD140 LAYOUT!!!
  var uboData = new Float32Array(24);
  uboData.set(viewProjMatrix);
  uboData.set(eyePosition, 16);
  uboData.set(lightPosition, 20);

  var uniformBuffer = gl.createBuffer();
  gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uniformBuffer);
  gl.bufferData(gl.UNIFORM_BUFFER, uboData, gl.STATIC_DRAW);

PicoGL.js Uniform Buffer Objects

                
  // PicoGL.js handles layout.
  var uniformBuffer = app.createUniformBuffer([
      PicoGL.FLOAT_MAT4,
      PicoGL.FLOAT_VEC4,
      PicoGL.FLOAT_VEC4
  ])
  .set(0, viewProjMatrix)
  .set(1, eyePosition)
  .set(2, lightPosition)
  .update();

  drawCall.uniformBlock("myUniforms", uniformBuffer);

Examples

Thanks!

Some Resources: