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("experimental-webgl");
 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]);
    //...
    //Combine buffer and pass to shader
}

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> 
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



Github Rank



06/21 2014

Three.JS


Three.JS




Three.Js Cube


   
code

Three.Js Cube


       Init the camera and scene 
camera = new THREE.PerspectiveCamera(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);
}

Camera



Perspective

Orthographic

Renderer

WebGLRenderer

CanvasRenderer

CanvasRenderer + Ascii effect


Pop Up Card

Pop Up Card Principle

Pop Up Card Builder

demo

Other Topics






 

Thank You !