Carl Bateman

Carl Bateman

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

Carl Bateman

Thanks to...

Khronos.org

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

Skills Matter (venue)

• With whom I am in no way affiliated

Pearson

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

WebGL Workshop

After workshop drinkies

and further networking

across the road

WebGL Workshop

Agenda

• Who are Khronos?
• What is WebGL?
• Sites using WebGL
• Uses
• Demos
• Code
• APIs

This slide deck at:

webglworkshop.com/18

Khronos.org

Who are Khronos?

Khronos.org

Who are Khronos?

Khronos.org

Who are Khronos?

Khronos.org

Who are Khronos?

What is WebGL?

• Canvas based
• JavaScript API
• Renders 2D and 3D graphics
• Giving access to the GPU
• Integrated into all web standards

Why WebGL?

Executive summary:

CPU bad - GPU bad!

Simple site decoration

WebGL Paris 2015

Pixel Shaders

tamapolis : Javi Agenjo's personal blog

TWGL: A Tiny WebGL Helper Library

WebGL Fundamentals

Decidely more ambitious site decoration

OTT

What the what?

What is WebGL (part 2)?

OpenGL ES 2.0 for the browser

Programmable pipeline

Great power

Great responsilbility

Which means what exactly?

Code time (nearly)

Canvas

Shader program (glsl)

Vertex shader

Fragment shader (pixels)

Your html page will look something this...

Obvs, JavaScript can go in separate .js file

Shaders can be loaded with XHR

Simple vertex shader

Simple fragment shader

Get a WebGL context

Error check

Get data location

Define Geometry

Send data to GPU and draw

With a bit more effort

Coloured cube

Feelin' lucky?

Models and glyphs

We have such sites to show you

May seem long winded

Scales well

Plenty of utility libraries

Langauge features

C-like

Strongly typed

Optimised for geometry

Native support of vectors and matrices (but no quaternions)

Swizzle vec3 a; a.xyz = a.rgb; a.zyx = a.bbb;

Built-in functions like dot, cross, reflect

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

• GLAM
  • A Declarative Language for 3D Web Content
    Tony Parisi
    
    
• jQuery Three
  • See also A case for WebGL Markup

CSS

body{
  margin: 0px;
  background-color: #000;
}
#sun {
  width-segments: 64;
  height-segments: 64;
  vertex-shader: url(../../shaders/sun.vs);
  fragment-shader: url(../../shaders/sun.fs);
  shader-uniforms: time f 0 
                   texture1 t url(../../images/cloud.png) 
                   texture2 t url(../../images/lavatile.jpg);
}
  
@-webkit-keyframes kfRotateY {
  from {
    -webkit-transform: rotateY(0deg);
  }  
  to {
    -webkit-transform: rotateY(360deg);
  }
}
.animRotateY {
  -webkit-animation-duration: 90s;
  -webkit-animation-name: kfRotateY;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function:linear;
}
            

JavaScript

var theSun = null;
var startTime = Date.now();
window.addEventListener('load', function(){
  glam.ready();
  theSun = document.getElementById("sun");
  run();  
},
false);
function run() {
  requestAnimationFrame(run);
  if (theSun.material) {
    var now = Date.now();
    var elapsed = (now - startTime) / 1000;
     theSun.material.uniforms.time.value = elapsed;
  }
}
            

HTML

Oh so very many...

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

var createScene = function () {
  var scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color3(0,0,0.2);
  var camera = new BABYLON.ArcRotateCamera("Camera", 1.0, 1.0, 12, BABYLON.Vector3.Zero(), scene);
  camera.attachControl(canvas, false);
  var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
  light.groundColor = new BABYLON.Color3(0.5, 0, 0.5);
  var box = BABYLON.Mesh.CreateBox("mesh", 3, scene);
  box.showBoundingBox = true;
  var material = new BABYLON.StandardMaterial("std", scene);
  material.diffuseColor = new BABYLON.Color3(0.5, 0, 0.5);
  box.material = material;
  return scene;
};
        

• Pixi.js (2D)
• PlayCanvas
• Away3D (Flash replacement)
• XTK (JS implementation of ITK / VTK)
• GLGE
• SpiderGL
• CopperCube
• TWGL: A Tiny WebGL helper Library

• PlayCanvas
• Clara.io
• Goo / GooCreate
• WebGLStudio.js
• Three.js
• Babylon.js
• Unity !?! (via export)
• 3D tin

• http://www.kickjs.org/example/shader_editor/shader_editor.html
• http://shdr.bkcore.com/
• http://pixelshaders.com/editor/

Techniques

"Just" a renderer / rasteriser, but can be bent to our will

• Enliven web pages
• 2D/3D rendering
• Image processing
• Volumetric rendering (Lebarba lib)
• Iso surfaces
• Point cloud
• GPGPU
• WebVR

• Games
• More games
• Medical
• Data visualisation
• Architecture
• Fashion
• Mining
• Weather
• Dinosaurs... with lasers!

get.WebGL.org

CanIuse.com/#search=WebGL

BrowserLeaks.com/WebGL

WebGLreport.com

WebGLstats.com

• Yobi 3D (google for models)
• SketchFab (model hosting and embedding)

Thank you

Questions?