WebGL 3D player
55
WebGL 3D player Vasilika Klimova Frontend Developer Artec Group @lik04ka MoscowJS 21
-
Upload
vasilika-klimova -
Category
Software
-
view
436 -
download
5
Transcript of WebGL 3D player
WebGL 3D player
Vasilika Klimova
Frontend Developer
Artec Group @lik04ka
MoscowJS 21
Contents
2
The use of WebGL
Advantages
Basic concepts in 3D graphics
Library Three.js
Player to view 3D models
• HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES
• 2D/3D
3
WebGL
4
caniuse.com/webgl
IEWebGL
Games
5
gooengine.com/pearl-boy
6
7
8
9
10
Navigation
11
bookcase.chromeexperiments.com
Editors
12
3dtin.com
13
Infographics
globe.chromeexperiments.com
14
3D technology
O3D
Advantages
15
• Open standard
• Cross-platform
• High perfomance
16
Advantages
• Automatic memory management
• No compilation
17
Advantages
18
GLSL
Basic concepts
• Scene
• Light
• Camera
19
Interconnection objects
20
Camera Light
Scene
Interconnection objects
21
Camera 3D objects Light
Scene
Interconnection objects
22
Camera 3D objects Light
Scene
Renderer
Interconnection objects
23
Camera 3D objects Light
Scene
Renderer
3D object
24
Geometry
3D object
25
Polygon mesh
Geometry Material
3D object
26
Polygon mesh
Geometry Material Texture
Visualization
• Renderer
• Shader
• Animation
27
Three.js
28
• three.min.js 420 kb
• OBJLoader.js
• TrackballControls.js 14 kb
threejs.org @mrdoob
8 kb
Data-in
29
texture.jpg object.obj
Algorithm
30
Load texture
Rendrer, canvas
Load 3D object
Scene, Camera, Light
Animation
Scene
31
Player.container = document.getElementById("webgl-player");
Player.size = {
width: Player.container.offsetWidth,
height: Player.container.offsetHeight
};
Player.scene = new THREE.Scene();
Algorithm
32
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
Camera
33
// PerspectiveCamera( fov, aspect, near, far )
aspect = Player.size.width / Player.size.height;
Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);
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
Perspective projection PerspectiveCamera
Orthographic projection OrthographicCamera
Camera types
Algorithm
36
Load texture
Render, canvas
Load 3D object
Scene, Camera, Light
Animation
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
// Player.scene.add(Player.light)
Player.scene.add(Player.light)
Light
39
THREE.WebGLRenderer({alpha: true})
THREE.WebGLRenderer()
WebGLRenderer
Algorithm
40
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
Texture
41
Player.textureLoader = new THREE.TextureLoader();
Player.textureLoader.load("texture.jpg", function(texture) {
Player.texture = texture;
Player.loadModel();
});
Algorithm
42
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
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);
});
}
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);
});
}
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);
});
}
Algorithm
46
Load texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
Animation
47
animate: function() {
requestAnimationFrame(Player.animate);
Player.renderer.render(Player.scene, Player.camera);
}
Player.animate();
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();
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
viewshape.com
WebGL libraries
• Three.js
• Babylon.js
• Turbulenz
• PhiloGL
51
Useful links
davidscottlyons.com/threejs
Book Learning Three.js: The JavaScript 3D Library for WebGL
52
Source
53 github.com/Likita
54
Gamification
Interactivity
Vasilika Klimova
vasilika.klimova
likita
lik04ka
Thank You! 55
