This document discusses using WebGL for 3D graphics on the web. It introduces basic 3D graphics concepts like scenes, cameras, and lights. It then explains how to build a 3D model viewer using the Three.js library. Key steps include loading a texture, 3D model, setting up the scene, camera and renderer, and adding animation with requestAnimationFrame to continuously render the scene. The document provides code examples for setting up the different 3D objects and rendering the scene.

1. WebGL 3D player
Vasilika Klimova
Frontend Developer
Artec Group
@lik04ka
MoscowJS 21

2. Contents
2
The use of WebGL
Advantages
Basic concepts in 3D graphics
Library Three.js
Player to view 3D models

3. • HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES
• 2D/3D
3
WebGL

4. 4
caniuse.com/webgl
IEWebGL

5. Games
5
gooengine.com/pearl-boy

6. 6

7. 7

8. 8

9. 9

10. 10

11. Navigation
11
bookcase.chromeexperiments.com

12. Editors
12
3dtin.com

13. 13
Infographics
globe.chromeexperiments.com

14. 14
3D technology
O3D

15. Advantages
15

16. • Open standard
• Cross-platform
• High perfomance
16
Advantages

17. • Automatic memory management
• No compilation
17
Advantages

18. 18
GLSL

19. Basic concepts
• Scene
• Light
• Camera
19

20. Interconnection objects
20
Camera Light
Scene

21. Interconnection objects
21
Camera 3D objectsLight
Scene

22. Interconnection objects
22
Camera 3D objectsLight
Scene
Renderer

23. Interconnection objects
23
Camera 3D objectsLight
Scene
Renderer

24. 3D object
24
Geometry

25. 3D object
25
Polygon mesh
Geometry Material

26. 3D object
26
Polygon mesh
Geometry Material Texture

27. Visualization
• Renderer
• Shader
• Animation
27

28. Three.js
28
• three.min.js 420 kb
• OBJLoader.js
• TrackballControls.js 14 kb
threejs.org@mrdoob
8 kb

29. Data-in
29
texture.jpg object.obj

30. Algorithm
30
Load texture
Rendrer, canvas
Load 3D object
Scene, Camera, Light
Animation

31. Scene
31
Player.container = document.getElementById("webgl-player");
Player.size = {
width: Player.container.offsetWidth,
height: Player.container.offsetHeight
};
Player.scene = new THREE.Scene();

32. Algorithm
32
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation

33. Camera
33
// PerspectiveCamera( fov, aspect, near, far )
aspect = Player.size.width / Player.size.height;
Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);

34. Camera
34
Player.camera.position.z = 300;
Player.scene.add(Player.camera);
// PerspectiveCamera( fov, aspect, near, far )
aspect = Player.size.width / Player.size.height;
Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);

35. 35
Perspective projection
PerspectiveCamera
Orthographic projection
OrthographicCamera
Camera types

36. Algorithm
36
Load texture
Render, canvas
Load 3D object
Scene, Camera, Light
Animation

37. Light, renderer, canvas
37
Player.light = new THREE.AmbientLight();
Player.scene.add(Player.light);
// canvas
Player.container.appendChild(Player.renderer.domElement);
Player.renderer = new THREE.WebGLRenderer({alpha: true});
Player.renderer.setSize(Player.size.width, Player.size.height);

38. 38
// Player.scene.add(Player.light)
Player.scene.add(Player.light)
Light

39. 39
THREE.WebGLRenderer({alpha: true})
THREE.WebGLRenderer()
WebGLRenderer

40. Algorithm
40
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation

41. Texture
41
Player.textureLoader = new THREE.TextureLoader();
Player.textureLoader.load("texture.jpg", function(texture) {
Player.texture = texture;
Player.loadModel();
});

42. Algorithm
42
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation

43. Load 3D model
43
loadModel: function() {
objectLoader = new THREE.OBJLoader();
objectLoader.load("object.obj", function(object) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = Player.texture;
}
});
Player.scene.add(object);
});
}

44. Load 3D model
44
loadModel: function() {
objectLoader = new THREE.OBJLoader();
objectLoader.load("object.obj", function(object) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = Player.texture;
}
});
Player.scene.add(object);
});
}

45. Load 3D model
45
loadModel: function() {
objectLoader = new THREE.OBJLoader();
objectLoader.load("object.obj", function(object) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = Player.texture;
}
});
Player.scene.add(object);
});
}

46. Algorithm
46
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation

47. Animation
47
animate: function() {
requestAnimationFrame(Player.animate);
Player.renderer.render(Player.scene, Player.camera);
}
Player.animate();

48. Animation
48
Player.controls = new THREE.TrackballControls(Player.camera,
Player.container);
animate: function() {
requestAnimationFrame(Player.animate);
Player.renderer.render(Player.scene, Player.camera);
}
Player.animate();
Player.controls.update();

49. Animation
49
Ask browser to repeat
animate()
Draw the model
Update the camera position
requestAnimationFrame
animate: function() {
requestAnimationFrame(Player.animate);
Player.controls.update();
Player.renderer.render(Player.scene, Player.camera);
}

50. 50
viewshape.com

51. WebGL libraries
• Three.js
• Babylon.js
• Turbulenz
• PhiloGL
51

52. Useful links
davidscottlyons.com/threejs
Book Learning Three.js: The JavaScript 3D Library for WebGL
52

53. Source
53
github.com/Likita

54. 54
Gamification
Interactivity

55. Vasilika Klimova
vasilika.klimova
likita
lik04ka
Thank You!
55