Carl Bateman

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

GLSL

Agenda

  1. What is WebGL?
  2. What is a shader?
  3. A basic shader
  4. A custom shader THREE.js
  5. Vertex Shader - Vertex Displacement - A basic shader - SIMD
  6. Sphering the cube - animated
  7. Woozy cube - animated
  8. Fragment Shader - texture - vs Vertex Shader
  9. Image Processing
  10. Light

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

Shaders

Simple vertex shader


Simple fragment shader

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

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

GLSL

Vectors and Matrices

Vectors - vec2, vec3, vec4

Swizzle: 

vec3 v1, v2 = vec3(1.0, 2.0, 3.0);
v1[0] = v2.r;    // v1 == (1.0, 0.0, 0.0)
v1.xyz = v2.rgb; // v1 == (1.0, 2.0, 3.0)
v1.zyx = v2.bbb; // v1 == (2.0, 2.0, 2.0)

Square matrices - mat2, mat3, mat4

Usual operations:

vec4 v3 = vec4((v1 + v2), 1.0); // v3 == (3.0, 4.0, 5.0)
v3 *= 2.0// v3 == (6.0, 8.0, 10.0)

GLSL

Uniform, varying, attribute

Uniform - constant for shader program

Varying - passed from vertex shader to fragmen shader, usally interpolated

Attribute - passed per vertex to vertex shader

WebGL Workshop

Online Shader Editors

GLSL.io (transitions)

ShaderFrog

glsl sandbox

shadertoy

shdr

glslb.in

Pixel Shader (on-line book)

WebGL Workshop

In-browser Shader Editors

Mozilla FireFox

WebGL Inspector

shdr (Chrome Web Store)

Shader Editor (Chrome Web Store)