The Power of WebGL

@raphamundiHACKING YOUR GPU WITH JAVASCRIPT

RAPHAEL AMORIM

raphamundi raphamorim

raphamorim.com

Shaders

Graphic procedures

e.g: surfacing and texturing, lighting and shadowing, texture and geometry generation.

The "3D" Effect

* A thanks Jaume Sanchez for the awesome resource!

[ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]

Vertex shader takes this data, and some other values

(model-view and projection matrix, and others)

and turns the 4 points into 4 projected points

We need to specify how to draw it: points, wireframe or solid

The solid projected square gets "discretised" base on the output display

The system fills the space connecting these dots and calculates what pixels on your display

need to be drawn

The rest is up to the fragment shader

It gets called for each of these small squares, and the correct output color is calculated.

GPUGraphics Processing Unit

GPURun! Run! As fast as you can!

WebGLWeb Graphics Library

<canvas/>WebGL Context

Define the Geometry and Store it in the Buffer Objects

Create and Compile the Shaders( Vertex && Fragment )

Atributes

Atributes

Uniforms

Atributes

Uniforms

Varyings

WebGL Waterhttp://madebyevan.com/webgl-water/

WebGL Blossomhttp://www.bongiovi.tw/experiments/

webgl/blossom/

Google Maps Cubehttp://www.playmapscube.com/

WebGL is very hotDamn God!“ ”

~= 80ºC!!!

~= 80ºC!!!WebGL makes your macbook hot. Yeah,

literally.

FPSFrame Per Second

Where are the graphics costs?

The first rule of any optimization is to find

where the performance problem is.

Strategies for optimizing for GPU vs. CPU are quite different.

CPU optimization

GPU: Optimizing Model Geometry

GPU: Texture Compression and Mipmaps

DrawCalls

WebVRBringing Virtual Reality to the Web

Okay, we already tried a lot.

till now:

WebVR is an APIhttp://mzl.la/1IK6pnf

WebVR• Sechelt (http://mozvr.com/projects/sechelt/)

• Quake III (http://media.tojicode.com/q3bsp/)

• vizor.io (http://vizor.io/fthr/vr_cube/edit)

• Primoseeditor (https://www.primroseeditor.com/#fullscreen)

• Inspirit (http://inspirit.unboring.net/)

MozVRmozvr.com

bit.ly/1lDsdLR

Thanks! :)

References:• Shaders! What are they and what can they do for me? -

Jaume Sanchez (https://www.clicktorelease.com/talks/scotlandjs-2015/)

• Dive into 0.016 seconds of WebGL - @yomotsu (https://speakerdeck.com/yomotsu/dive-into-0-dot-016-seconds-of-webgl)

• Getting started with three.js and WebGL - Jaume Sanchez (https://www.clicktorelease.com/talks/jsconfbp-2015/)

References:• The Road To WebVR • Replacing reality with JavaScript -

Jaume Sanchez (https://www.clicktorelease.com/talks/fullstackfest-2015/slides/#0)

• WebGL tutorial MDN (https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial)

• The Rise and Fall and Rise of Virtual Reality (http://www.theverge.com/a/virtual-reality/oral_history)

References:

• 6 Virtual Reality Devices From the Past (http://www.cheatsheet.com/technology/a-trip-down-virtual-reality-road-6-systems-of-the-past.html )