FIRST STEPS INTO WEB 3D
GRAPHICS WITH THREE.JS
Pavel Kolev
 Software Developer @ Telerik
 Working on Telerik Platform (Telerik AppBuilder
Web Client)
 Die hard JavaScript fan
 Love huskies
Table of Contents
 What is WebGL
 Materials, Textures and Lights
 Camera, Perspective, Viewports, Projection
 Scene
 Shaders
 Anathomy of a WebGL App
 ThreeJS to save the day
 Common problems
WebGL
 Standart for 3d graphics on the web
 Supported by all major browsers + mobile
 Based on OpenGL (Kronos Group)
 Api
 Combines with other web content
 Royalty free
 It is for mortal developers
3D Graphics
 3D Coordinate System
 Mesh – an object composed of one or more
polygonal shapes, constructed out of vertices
Materials, Textures and Lights
 Material - defining the surface properties of a
mesh
 Can be really simple – just color
 Textures define the literal surface look
 Rely on the presence of lights
Transforms and Matrices
 Animations – move your mesh without
looping through every vertex
 Support for scale, rotation, translation(move)
 Represented by a matrix – array of values,
used to compute the transformed position of
vertices
Cameras, Perspective, Viewports, and Projections
 Camera – a point of view relative to the scene
 Perspective – the size of the field
 Camera properties combined deliver what
you see rendered in 2D viewport
 Position and orientation
 Translation (projection matrix) –
 how to translate from 3D to 2D
Anatomy of a WebGL Application
1. Create a canvas element
2. Obtain a drawing context for the canvas
3. Initialize the viewport
4. Create one or more buffers containing the data
to be rendered
5. Create one or more matrices to define the
transformation from vertex buffers to screen
space
6. Create one or more shaders
7. Initialize the shaders
8. Draw
three.js
 +Hides details for 3D rendering
 Scene, light, mesh and camera









+Object-oriented
+Feature-rich – tons of prebuilt objects
+Fast – using best practices
+Support interaction
+Does the math for you
+Built in file format support
-Not a game engine
-No built network support
-No physics
Common problems
 Object position
 Light
 Scale
 Coordinate system
Thank you
i.pavelkolev@gmail.com