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
Carl.Bateman@webglworkshop.com
@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

  1. Recap
  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?

  • 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 );
}