Go to web 3D

WebGL + ThreeJS

caa@livemail.tw

We live in a 3D world

Design House

Game & Movie

3D Model Viewer

sketchfab

p3d

3D in Web Browser ?

360 degree images (demo1, demo2)
Z-index + absolute + css transform (demo)
Flash (demo)
WebGL

Show cases

WebGL

What is WebGL

Plugin-free 3D to the web
Low-level 3D graphics API
Based on OpenGL ES 2.0
Khronos Group , not the W3C
Supported by most modern browsers
JS programming interfaces

Compatibility

Desktop
- Mozilla Firefox 4
- Google Chrome 9
- IE 11
- Opera
- Safari (default disabled)
Mobile
- Mozilla Firefox
- Chrome
- Opera
- Safari (ios8)

Compatibility

http://caniuse.com/webgl

Scene

webGL Cube

code

webGL cube

draw to canvas

 < canvas id="canvas" style="border: none;" width="500" height="400">

get webgl context

 canvas = document.getElementById("canvas");
 gl = canvas.getContext("<font style="font-size: 18px;" color="#ffffff">experimental-webgl</font>");
 if (!gl) {
   alert("Could not initialise WebGL, sorry :-(");
 }

webGL Cube

Define the positions - position buffer

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
        vertices = [
            // Front face
            -1.0, -1.0,  1.0,
             1.0, -1.0,  1.0,
             1.0,  1.0,  1.0,
            -1.0,  1.0,  1.0,

            // Back face
            -1.0, -1.0, -1.0,
            -1.0,  1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0, -1.0, -1.0,

            // Top face
            -1.0,  1.0, -1.0,
            -1.0,  1.0,  1.0,
             1.0,  1.0,  1.0,
             1.0,  1.0, -1.0,

            // Bottom face
            -1.0, -1.0, -1.0,
             1.0, -1.0, -1.0,
             1.0, -1.0,  1.0,
            -1.0, -1.0,  1.0,

            // Right face
             1.0, -1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0,  1.0,  1.0,
             1.0, -1.0,  1.0,

            // Left face
            -1.0, -1.0, -1.0,
            -1.0, -1.0,  1.0,
            -1.0,  1.0,  1.0,
            -1.0,  1.0, -1.0
        ];

webGL Cube

builds the object - vertex Index buffer

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
        var cubeVertexIndices = [
            0, 1, 2,      0, 2, 3,    // Front face
            4, 5, 6,      4, 6, 7,    // Back face
            8, 9, 10,     8, 10, 11,  // Top face
            12, 13, 14,   12, 14, 15, // Bottom face
            16, 17, 18,   16, 18, 19, // Right face
            20, 21, 22,   20, 22, 23  // Left face
        ];

webGL Cube

Color - color buffer

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
        colors = [
            [0.0, 0.0, 0.0, 0.5], // Front face
            [0.0, 0.0, 0.0, 0.4], // Back face
            [0.0, 0.0, 0.0, 0.3], // Top face
            [0.0, 0.0, 0.0, 0.2], // Bottom face
            [0.0, 0.0, 0.0, 0.1], // Right face
            [0.0, 0.0, 0.0, 0.0]  // Left face
        ];

webGL Cube

Combine buffer and pass to shader

//bind vertex position buffer
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

//bind color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

//bind vertex index buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);

setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();

webGL Cube

Animation

    function animate() {
        rCube -= 1;
    }
    function tick() {
        requestAnimationFrame(tick);
        drawScene();
        animate();
    } 
    tick();

Draw Scene

function drawScene() {
    //initialize the viewport
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    //setting camera
    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
   
    //Rotate
    mat4.rotate(mvMatrix, degToRad(rCube), [1, 1, 1]);
    //...
    //<span style="color: rgb(238, 238, 238); font-style: normal; font-variant: normal; white-space: normal; background-color: rgba(0, 0, 0, 0.0980392);"><font style="font-size: 18px;">Combine buffer and pass to shader</font></span>
}

webGL cube

Shader

< script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 vColor;
    void main(void) {
        gl_FragColor = vColor;
    }
< /script>

< script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    varying vec4 vColor;
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
    }
< /script> <br>

var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

WTF !

webGL libraries

- - - - Three.js
        
        playCanvas (game engine)
        
        SpiderGL
        
        PhiloGL
        
        GLGE
        
        Creative.js
        
        TDL
        
        cubicVR.js
        
        And more…

Github Rank

06/21 2014

Three.JS

http://threejs.org/ , github
Lightweight 3D library
Abstraction layer over WebGL
Capable of rendering to
- WebGL, Canvas

Three.Js Cube

code

Three.Js Cube

Init the camera and scene

camera = new THREE.<font color="#ffffff">PerspectiveCamera</font>(75, w / h, 1, 10000);
camera.position.z = 600;
scene = new THREE.Scene();

Create box geometry

geometry = new THREE.BoxGeometry(200, 200, 200);

Create Material

material = new THREE.MeshLambertMaterial({
    color: 0xffffff
});

Create Mesh (geometry + material)

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Three.Js Cube

Lighting

// add subtle blue ambient lighting
var ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1000, 1000, 1000); 
scene.add(directionalLight);

Add to DOM

document.body.appendChild(renderer.domElement);

Animation

function animate() {
   requestAnimationFrame(animate);
   mesh.rotation.x += 0.01;
   mesh.rotation.y += 0.02;
   renderer.render(scene, camera);
}

Go to web 3D

caa1211

Go to web 3D

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

web3dSlide

Go to web 3D

We live in a 3D world

Design House

Game & Movie

3D Model Viewer

3D in Web Browser ?

Show cases

WebGL

What is WebGL

Compatibility

Compatibility

Scene

webGL Cube

webGL cube

webGL Cube

Define the positions - position buffer

webGL Cube

webGL Cube

webGL Cube

webGL Cube

webGL cube

WTF !

webGL libraries

Github Rank

Three.JS

Three.JS

Three.Js Cube

Three.Js Cube

Three.Js Cube

Camera

Orthographic

Renderer

CanvasRenderer

CanvasRenderer + Ascii effect

Pop Up Card

Pop Up Card Principle

Pop Up Card Builder

Other Topics

Thank You !

0 0