WEBGL3D GRAPHICS FOR THE WEB : AN INTRODUCTION

Shritesh Bhattarai@shritesh

WEBHTML + CSS + JavaScript + ...

JAVASCRIPTProgramming language of the web

C-like syntaxRuns on the web-browserDynamic, scripting languageCan run on the server tooNot to be confused with Java

function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1);}

COMPUTER GRAPHICSRendered Image

COMPUTER GRAPHICSWireframe Model

COMPUTER GRAPHICSMesh: Vertices and Polygons (Structure)Material: Textures (Appearance)Scene, Camera, Perspective, ...

OPENGLOpen Graphics LibraryAPI for rendering 2D and 3D graphicsProvides a way to interact with GPUAvailable on (almost) every platform.

OPENGL USERS

Games

Image Manipulation

Graphics Application

WEBGLWeb + OpenGL = WebGL

OBLIGATORY SPINNING CUBE

WEBGLOpenGL ES 2.0Javascript APIUses a <canvas> elementSupported by every modern browser

THREE.JSLibrary for WebGLMakes WebGL super easyOpen Source (MIT)http://threejs.org/

DEMO TIME/demos

WHY IS SHRITESH TALKING ABOUT WEBGL ONSOFTWARE FREEDOM DAY?

WEB: FREE AND OPENGaming is the only field holding OSS backWeb is the de facto platform for opennessNo restrictions / walled gardensPotential to reach billions of audiencesSupported by every other platform

THANK YOUFOLLOW @SHRITESH ON TWITTER AND GITHUB