CS460 Computer Graphics - University of Massachusetts Boston
Assignment 2
Three.js
THREE.WebGLRenderer
THREE.Scene
THREE.TrackballControls
THREE.PerspectiveCamera
THREE.AmbientLight
THREE.DirectionalLight
THREE.Mesh
THREE.BoxBufferGeometry
THREE.MeshStandardMaterial
<html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
window.onload = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 100 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
material = new THREE.MeshStandardMaterial({ color: 0xffffff });
cube = new THREE.Mesh( geometry, material );
scene.add(cube);
controls = new THREE.TrackballControls( camera );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>Mesh
Geometry
+ Material
material = new THREE.MeshStandardMaterial({ color: 0xffffff });
material = new THREE.MeshStandardMaterial({ color: 0xffffff, wireframe: true });
Wireframe
12 Triangles
V1
V2
V3
V4
V6
V5
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
Y
X
Z
Vertex
/ Vertices
V1
V2
V3
V4
V6
V5
Vertex
/ Vertices
Face
Face
Edge
V1
V2
V3
V4
V6
V5
Vertex
/ Vertices
Face
Face
V1
V2
V3
V4
V6
V5
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
(x, y, z)
Vertex
/ Vertices
Face
Face
12 Triangles
V1
V2
V3
36 Vertices
8
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-10, 10, 0),
new THREE.Vector3(-10, -10, 0),
new THREE.Vector3(10, -10, 0)
);
geometry.faces.push( new THREE.Face3(0, 1, 2));V0
V1
V2
12 Triangles
8 Vertices
3D
2D
?
12 Triangles
8 Vertices
3D
2D
2560 x 1600 Pixels
width
height
Frame Buffer
Screen Space
Frame Buffer
Screen Space
width x height Pixels
Rasterization
Rendering Pipeline
JavaScript 3D Screen Space
V1
V2
(x, y, z)
(x, y, z)
V3
(x, y, z)
V1
V2
(x, y, z)
(x, y, z)
V3
(x, y, z)
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-10, 10, 0),
new THREE.Vector3(-10, -10, 0),
new THREE.Vector3(10, -10, 0)
);
geometry.faces.push( new THREE.Face3(0, 1, 2));Graphics Processing Unit (GPU)
Vertex Shader
3D World
Shape Assembly
Perspective Projection
V1
V2
V3
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-10, 10, 0),
new THREE.Vector3(-10, -10, 0),
new THREE.Vector3(10, -10, 0)
);
geometry.faces.push( new THREE.Face3(0, 1, 2));Graphics Processing Unit (GPU)
Vertex Shader
Fragment Shader
3D World
2D Space
Rasterization
Colorization
Frame Buffer / Viewport
Blending
Frame Buffer / Viewport
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-10, 10, 0),
new THREE.Vector3(-10, -10, 0),
new THREE.Vector3(10, -10, 0)
);
geometry.faces.push( new THREE.Face3(0, 1, 2));GPU
Vertex Shader
Fragment Shader
Viewport
From 3D..
..to 2D
From 3D to 2D
From 2D to 3D?
Unprojecting...
<html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
window.onload = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 100 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
material = new THREE.MeshStandardMaterial({ color: 0xffffff });
cube = new THREE.Mesh( geometry, material );
scene.add(cube);
controls = new THREE.TrackballControls( camera );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>