[email protected]

Agenda How and when to use WebGL WebGL in Internet Explorer 11 Best practices

What is WebGL?

An immediate mode JavaScript API for programming the GPU’s rendering pipeline Like 2D , but… Steeper learning curve More performance potential

How WebGL (GPUs) work: A quick intro

Programming shaders with GLSL GLSL is like C ….without pointers, recursion, dynamic memory allocation… …but with vector, matrix and bitmap sampler types

When to use WebGL WebGL is the best choice for web content that absolutely requires 3D or GPU programming Always consider: CSS Transforms, 2D or SVG Simpler, helps you avoid gratuitous 3D DirectX app Powerful native APIs and tools (PIX) Windows Store benefits

WebGL in Internet Explorer 11 Preview • • • Common WebGL/three.js functionality work Check F12 tools for messages Some performance is not optimized WebGL is on by default on all IE11 devices WebGL will be available in Windows applications

Internet Explorer 11 WebGL Architecture

WebGL Security • • • • • • • Specification updates: CORS for loading images, context loss Complete GLSL translation Smart limits to shader functionality GPU Recovery DirectX11 Runtime GPU Driver source code audits Software rendering

Frameworks x3dom O3D

Cubemaps

Writing WebGL for all devices

• Writing interoperable WebGL code Test on a variety of devices • Use ‘feature detection’ – for shaders and extensions • Use premultiplied 32bpp images, floating point vertices • • Drawing Points & Lines: gl_PointSize > 1.0 and LineWidth(>1) gl.getParameter(ALIASED_LINE_WIDTH_RANGE) is [1, 1] gl.getParameter(ALIASED_POINT_SIZE_RANGE) is [1, 1]

• Writing interoperable WebGL code Not all GPUs/environments support vertex texturing gl. getParameter(MAX_VERTEX_TEXTURE_IMAGE_UNITS) = 0 • Check max texture size gl.getParameter(MAX_TEXTURE_SIZE) gl.getParameter(MAX_CUBE_MAP_TEXTURE_SIZE)

Writing good WebGL code • Use requestAnimationFrame Avoid background rendering Avoid unnecessary rendering (The same pixels again?) • Handle resizes and zoom • Handle context loss – some hybrid devices require this • Use F12 profiling tools to optimize your rendering loop

Related talks ID WCL-067 WCL-068 WCL-069 WCL-073 WCL-141 Title New platform capabilities for advancing web development Web runtime performance Web compatibility and same markup Inspecting & debugging using IE’s new F12 developer tools Debugging Direct3D in your game

Resources www.learningwebgl.com

html5canvastutorials.com/three Internet Explorer Blog MSDN WebGL Developer guide MSDN WebGL Reference @frankolivier

Good lessons and a good blog Three.js lessons

[email protected]

• •

here here

Right click and use the Format Shape menu to change the color of the shape. This text box will automatically center to align beside the color shape.

Charts For content: Type is what articulates the message. Text doesn’t need to be bulleted. Text size can reinforce and impact.

Charts For content: Type is what articulates the message. Text doesn’t need to be bulleted. Text size can reinforce and impact.

Table This is a content box, always 24pts and sentence case Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Diagram with text This is a content box, always 24pts and sentence case Diagram example Audio/video source Video decoder Audio decoder Video effect 1 Audio effect 1 Video effect n Audio effect n Video encoder Audio encoder Audio/video sink

Diagram without text – example Audio/video Video Audio Video Audio Video Audio Video Audio Audio/video

Slide title here Code content here in 24pt Consolas font. Always use this white slide for code.