WebGL Workshop: PEX & GLSL

Workshop

GLSL

Speaker: Carl Bateman

Tuesday, 17th May 2016
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London

Next: TBA

Carl Bateman

By day

Software Engineer (desktop and web)
C#, C++, VB, MySQL, .NET, Linq, blah, blah... blah...

JavaScript, CSS, HTML, WebGL, jQuery, Three.js, blah, blah... blah...

By night

Software Engineer (still)
OpenGL, Unity, JavaScript, PHP, CSS, HTML and, of course, WebGL

Carl Bateman

WebGL Workshop Organiser
Khronos London Chapter Coordinator
Self-appointed WebGL Evangelist
- Nerd
  - Zealot
    - Looney

Basically

I love to code
I love to graphic
I love to math†

e^πi +1 = 0 and i² = j² = k² = ijk = -1 ... FUN!!!

I love to web

Caveat: I approach WebGL from a mathematical, progamming perspective rather than a web design perspective

† the verb form is the only correct use of “math” all other forms are an abomination before man and God

Contact

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

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

WebGL Workshop

After workshop drinkies and

further networking

WebGL Workshop

Ask questions

Takes photos

Tweet!!!

#WebGLWorkshop

Khronos.org

WebGL Workshop

GLSL part 2

Website

WebGLWorkshop.com/22

Download

WebGLWorkshop.com/22/workshop22.zip

GLSL

Agenda

Recap
What is a shader?
A basic shader
A custom shader THREE.js
Vertex Shader - Vertex Displacement - A basic shader - SIMD
Sphering the cube - animated
Woozy cube - animated
Fragment Shader - texture - vs Vertex Shader
Image Processing
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?

Combination of JavaScript and GLSL
Canvas based
JavaScript API
Browser access to the GPU
Control the GPU via shader programs
Part of web standards
Available on all devices and browsers
Renders 2D and 3D graphics

“Just” a renderer / rasteriser, but can be bent to our will
e.g. image processing

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

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)

Three.js


var camera, scene, renderer, mesh;
  
init();
animate();
  
function init() {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 400;
  
  scene = new THREE.Scene();
  
  var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
  var geometry = new THREE.BoxGeometry( 200, 200, 200 );
  var material = new THREE.MeshBasicMaterial( { map: texture } );
  
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}
  
function animate() {
  requestAnimationFrame( animate );
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );
}