Three.js and WebGL – Chris Uehlinger

View Github Repository Open presentation in a new window

chrisuehlinger

See all presentation from chrisuehlinger

Three.js and WebGL – Chris Uehlinger

0 0

ThreeJsTalk

Slides from my tutorial on Three.JS: https://chrisuehlinger.com/ThreeJsTalk

On Github chrisuehlinger / ThreeJsTalk

Three.js and WebGL

Chris Uehlinger

Credits

Song: Joe Hertz - Stay Lost ft. Amber-Simone (Cabu Remix)

Outline

  • A summary of 3D web technologies:
    • WebGL
    • Three.js
  • A tutorial on making a basic scene
  • Ways to learn more about Three.js and 3D graphics

What is WebGL?

  • An HTML5 JavaScript API for drawing things on an HTML5 <canvas> element
  • A low level graphics API based on OpenGL (A C graphics library)
  • Kind of a pain in the butt tbqh

TRIANGLES!

NO THANKS

What is Three.js?

  • A library that lets you think about 3D graphics at a higher level
  • A library that uses WebGL under the hood
  • Awesome

Our First Scene

Based on the "Creating a Scene" Tutorial on threejs.org

The Scene Graph

Boilerplate

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script>
        <script>
            // OUR CODE WILL GO HERE
        </script>
    </body>
</html>

Geometry

Geometry = Shape

var geometry = new THREE.BoxGeometry(1, 1, 1);

Material

var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Mesh

Mesh = Thing

var cube = new THREE.Mesh(geometry, material);
+
=
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;

cube.rotation.x = 0;
cube.rotation.y = 0;
cube.rotation.z = 0;

Scene

Scene = The World = A list of meshes

var scene = new THREE.Scene();
scene.add(cube);

Camera

Camera = Your Eyes

var aspectRatio = window.innerWidth/window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.z = 2;

Renderer

Renderer = How you draw on the canvas

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

var canvas = renderer.domElement;
document.body.appendChild(canvas);
renderer.render(scene, camera);

Let's look at our Scene!

Render Loop

function render() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

render();

LOOKIT!

Texture

var texture = new THREE.TextureLoader().load('textures/crate.gif');
var material = new THREE.MeshBasicMaterial({ map: texture });

Nice!

The Scene Graph

Three.JS Examples

Let's learn two last things:

  • Controls
  • Effects

Controls

These aren't included in Three.js, they are plugins contained in separate JS files

<script src="OrbitControls.js"></script>
var controls = new THREE.OrbitControls(camera, canvas);
function render() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    controls.update();

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

render();

Click and Drag the mouse

Effects

These are also plugins.

<script src="StereoEffect.js"></script>
var renderer = new THREE.WebGLRenderer();
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var effect = new THREE.StereoEffect( renderer );
effect.setSize(window.innerWidth, window.innerHeight);
function render() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    controls.update();

    effect.render(scene, camera);

    requestAnimationFrame(render);
}

render();

Virtual Reality

Thanks for Watching!

Some great resource for learning more:

Three.js and WebGL Chris Uehlinger