Workshop

Intro with WebGL Academy and
Pixel Spirit

Speaker: Carl Bateman

Tuesday, 3rd Oct 2017
Skills Matter | Code Node, 10 South Place, EC2M 2RB, London

Agenda

  • Khronos
  • WebGL News
  • WebGL Thing of the Month
  • WebGL Insights
  • Show ‘n’ Tell
  • WebGL Academy
  • Pixel Spirit

Before all that!

Help!!!

Suggestions

Show ‘n’ Tell

Volunteers

Talks / guests

Publicity

Sponsors

Meetup reports

WebGL Workshop
Khronos London Chapter

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

Participate


Ask questions


Takes photos

Tweet!!!

#WebGLWorkshop
@SkillsMatter

Carl Bateman

Software Engineer
    

Carl Bateman

Computer Graphics (3D)
    

Carl Bateman

Maths

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


Fun!!!

Carl Bateman

Software Engineer

Khronos

Khronos.org

Khronos.org

Khronos.org

Khronos.org

WebGL News

WebGL Thing of the Month

PlayCanvasAR - Fast and Easy AR for the Web

WebGL Thing
of the Month

WebGL Thing of the Month

3D Face Reconstruction from a Single Image

Moar stuff

WebGL Insights


WebGL Insights FREE download (intermediate to advanced)

Show ‘n’ Tell

Adding WebGL to Wordpress (WIP)

Show ‘n’ Tell

Add script tags to page or blog Find "page" element, insert <div>, append renderer.domElement 

var page = document.getElementById("page");
var div = document.createElement("div");
page.parentNode.insertBefore(div, page);
var renderer = new THREE.WebGLRenderer({ alpha: true });
div.appendChild(renderer.domElement);

WebGL Academy

WebGL Academy

WebGL Academy

2D coloured triangle Exercises
  • Add a second triangle to fill the canvas
  • Extra credit: use a triangle strip

WebGL Academy

3D coloured triangle Exercises
  • Rotate the triangle around each axis X,Y,Z
  • Change the triangle to a square
  • Move the square with a funky sinusoidal movement

WebGL Academy

3D coloured cube Exercises
  • Replace the cube by a cone
  • Make it grayscale by modifying only the fragment shader

Pixel Spirit

Pixel Spirit

Pixel Spirit

Pixel Spirit

Pixel Spirit

Pixel Spirit

Pixel Spirit

Contact

 

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