Workshop

Insert witty title here...

Speakers: Carl Bateman,
Marco Trivellato and
Hugues Evrard

Tuesday, 23rd February 2017
68 Middle Street, Brighton

Slides & Files

WebGL.io/26

Thanks to...

• For the pizza & beer
• With whom I am affiliated

• Venue
• With whom I am in no way affiliated

• 45% discount "WebGL Programming Guide" eBook edition
• Check out the MeetUp page

Upcoming

WebGL - An Introduction to
Programming 3D with WebGL and HTML5
Tuesday, 28th March
London JavaScript Community

All about models - glTF
Tuesday, 25st April

TBD
Tuesday, 16st May

Skills Matter | Code Node, London

Carl Bateman

Software Engineer

Carl Bateman

Computer Graphics (3D)

Carl Bateman

Maths

   eπi +1 = 0
   i² = j² = k² = ijk = -1


Fun!!!

Carl Bateman

Carl Bateman

       

WebGL Workshop
Khronos London Chapter


Google meister

WebGL Workshop
Khronos London Chapter


Oh God! How is this relevant???

WebGL Workshop
Khronos London Chapter

♠ Learning ♠
♣ Networking ♣
♥ Easier than googling ♥
♦ Beer ♦

Contact

 

meetup.com/WebGL-Workshop-London
[email protected]
@CarlBateman

Help!!!

Suggestions

Show 'n' tell

Volunteers

Talks / guests

Publicity

Sponsors

Meetup reports

Participate


Ask questions


Takes photos

Tweet!!!

#WebGLWorkshop
@68MiddleSt

WebGL Workshop


After workshop drinkies and

further networking

Agenda

  1. Me -- Khronos
  2. Marco -- Unity WebGL: What it is, current status and roadmap
  3. Hugues -- GraphicsFuzz: assessing WebGL robustness and safety
  4. Me again -- Basic WebGL & Babylon.js

Khronos.org

Executive Summary

"There's a freaking supercomputer in your browser,
and nobody seems to have noticed!"

Steve Sanderson




Jasmine Kent

Executive Summary

CPU bad (slower) (click to zoom) GPU good (faster) (mouse-wheel to zoom)
Refresh page if panel(s) blank

Executive Summary

Executive Summary

Freely mix HTML and 3D elements

Executive Summary

Pretty patterns

What is WebGL?

WebGL - OpenGL ES 2.0 for the Web

“WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces.
“It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content.
“It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers.”

Khronos.org

What is WebGL?

Web standard
Cross-device
Cross-platform
Combination of JavaScript API
and GLSL language

What is WebGL?

Canvas based
GPU access from browser
Control via shader programs
Rasteriser - 2D and 3D graphics
and more

How WebGL Works

JavaScript

Create Context/Canvas

Draw commands

Data control

GLSL

Shader program

Vertex shader

   transform vertices

Fragment (pixel) shader

   transform pixels

How WebGL Works

How WebGL Works

How WebGL Works

GLSL

Language features

C-like

Strongly typed

Optimised for geometry

Native support of vectors and matrices (no quaternions)

Built-in geometry functions e.g. cos, sin, dot, cross, reflect

Swizzle: 

vec3 v1, v2;
v1[0] = v2.r;
v1.xyz = v2.rgb;
v1.zyx = v2.bbb;

Textures via sampler2D and texture2D (no 1D or 3D textures)

Code time

Your html page will look something this...


<html>
  <head>
    
     

    

    
  </head>
  <body>
    
  </body>
</html>


Obvs, JavaScript can go in separate .js file

Shaders can be loaded with XHR

Shaders

Simple vertex shader


Simple fragment shader

JavaScript

Get a WebGL context


var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
for (var i = 0; i < names.length; ++i)  {
  try {
    gl = canvas.getContext(names[i]);
  }
  catch (e) { }
  if (gl) break;
}

Error check


if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) 
  console.log(gl.getShaderInfoLog(vs));
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) 
  console.log(gl.getShaderInfoLog(fs));
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 
  console.log(gl.getProgramInfoLog(program));
 gl.useProgram(shaderProgram);

JavaScript

Get data location


gl.useProgram(shaderProgram);
shaderProgram.uColor = gl.getUniformLocation(shaderProgram, "uColor");	
shaderProgram.aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");	
gl.enableVertexAttribArray(shaderProgram. aVertexPosition);

Define Geometry


var vertices = new Float32Array([-0.5, 0.5, 0.5, -0.5, -0.5, -0.5]);
cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 2;
cubeVertexPositionBuffer.numItems = vertices.length / cubeVertexPositionBuffer.itemSize;

JavaScript

Send data to GPU and draw


gl.uniform4fv(shaderProgram.uColor, [0.0, 1.0, 0.0, 1.0]);
gl.vertexAttribPointer(shaderProgram.aVertexPosition,
                       cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0.5, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, cubeVertexPositionBuffer.numItems);


Ta da!