1 of 28

WebGL

with Three.js

2 of 28

Hola, Montevideo!

I’m Martin from Zurich, CH

Love the web and 3D

Working @ Archilogic

@g33konaut

bit.ly/jsconfuy-threejs

3 of 28

What we’ll cover

  • Introduction
  • Getting started
  • Light, Camera, Action!
  • Materials and textures
  • Meshes
  • Advanced Three.js
  • Three.js performance
  • GLSL
  • Wrap up

4 of 28

Introduction

https://www.chromeexperiments.com/globe

5 of 28

Introduction

I hope you’ve got

  • WebGL - check https://get.webgl.org
  • OPTIONAL: node.js installed (+npm)
  • curiosity for WebGL

6 of 28

Sooo - what’s WebGL anyway?

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“2d”);

// do 2D operations on the canvas

</script>

7 of 28

Sooo - what’s WebGL anyway?

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“2d”);

// do 2D operations on the canvas

</script>

8 of 28

Sooo - what’s WebGL anyway?

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“webgl”);

// do 3D operations on the canvas

</script>

9 of 28

Sooo - what’s WebGL anyway?

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“webgl”)

|| canvas.getContext(“experimental-webgl”);

// do 3D operations on the canvas

</script>

10 of 28

WebGL =

  • OpenGL ES 2.0
  • GLSL 1.1 (some 1.2 features)

WebGL 2 = OpenGL ES 3.0 / GLSL 3.3+

11 of 28

Getting started

12 of 28

Coordinate system

13 of 28

Vertices, Faces & shading

Vertices are points in 3D space

14 of 28

Vertices, Faces & shading

Faces connect vertices to areas

15 of 28

Vertices, Faces & shading

Shading determines how things are drawn

16 of 28

Shaders

  • Vertex shaders: manipulate vertices
  • Fragment shaders: manipulate pixels on faces

17 of 28

The pipeline

18 of 28

Aha, so how do I use that?

Very “wordy” API… let’s use something slightly more high level

19 of 28

Why?

gl.clearColor(0.0, 0.0, 0.0, 1.0); �gl.enable(gl.DEPTH_TEST); �gl.depthFunc(gl.LEQUAL); �

20 of 28

Why? (cont)

var triangleVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

var vertices = [� 0.0, 1.0, 0.0,� -1.0, -1.0, 0.0,� 1.0, -1.0, 0.0� ];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

triangleVertexPositionBuffer.itemSize = 3;�triangleVertexPositionBuffer.numItems = 3;

21 of 28

Why? (cont)

function render() {

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

}

// and I left out some stuff (matrices for perspective rendering)

22 of 28

How about Three.js?

var camera = new THREE.PerspectiveCamera(45, width/height, 1, 2000);

var scene = new THREE.Scene();

var light = new THREE.AmbientLight();

var renderer = new THREE.WebGLRenderer();

// some more configuration

23 of 28

How about Three.js?

var camera = new THREE.PerspectiveCamera(45, width/height, 1, 2000);

var scene = new THREE.Scene();

var light = new THREE.AmbientLight();

var renderer = new THREE.WebGLRenderer();

// some more configuration

Conveniently wrapped in three-world

24 of 28

Off we go!

Everybody please start your engines now…

github.com/avgp/h2g2three

Three.js livecoding

25 of 28

Advanced Three.js

26 of 28

Three.js performance

  • Use BufferGeometry
  • Share geometries & materials
  • Use Level-of-detail
  • Use compressed textures
  • Lightmaps & Environment maps ftw!

27 of 28

GLSL

  • Example
  • ShaderToy

28 of 28

Done! / Thank you!

  • Twitter: @g33konaut
  • Slides: bit.ly/jsconfuy-threejs