Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Webgl - Like Opengl, But Web!

    Uploaded by

    Foobar
    WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Webgl - Like Opengl, But Web!

    Uploaded by

    Foobar
    33 views21 pages
    WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

    Original Title

    webgl

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    33 views21 pages

    Webgl - Like Opengl, But Web!

    Uploaded by

    Foobar
    WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 21

    WebGL – Like

    opengl, but web!


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    Anything native can do, web can do too


    • Native “feel”

    • Real time communication

    • Sane languages

    • And today: 3D graphics


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    • JavaScript API for 2D and 3D graphics

    • Started at Mozilla, 1.0 released in 2011

    • Maintained by the Khronos Group


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    • Based on OpenGL ES

    • Easier implementation

    • Easier to port existing apps


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    Demo time!
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    <!-- Get your canvas ready -->


    <canvas id="the_canvas" width="700“ height="600" />
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Initialize WebGL context


    var canvas = document.getElementById("the_canvas");
    var gl = canvas.getContext("webgl");
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Compile shaders
    var vertexShaderSource =
    document.getElementById("vertex-shader").textContent;
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    <script id="fragment-shader" type="x-shader/x-fragment">


    precision mediump float;
    varying vec4 vColor;
    void main(void) {
    gl_FragColor = vColor;
    }
    </script>
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    <script id="vertex-shader" type="x-shader/x-vertex">


    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;

    varying vec4 vColor;

    void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
    }
    </script>
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Link shaders
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, fragmentShader);
    gl.attachShader(shaderProgram, vertexShader);
    gl.linkProgram(shaderProgram);

    gl.useProgram(shaderProgram);
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Let us pass data to shaders


    shaderProgram.vertexPositionAttribute =
    gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.vertexColorAttribute =
    gl.getAttribLocation(shaderProgram, "aVertexColor");
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Vertex positions
    var vertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    var vertices = [
    0.0, 0.9, 0.0,
    -0.9, -0.9, 0.0,
    0.9, -0.9, 0.0
    ];
    gl.bufferData(
    gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW
    );
    vertexPositionBuffer.itemSize = 3;
    vertexPositionBuffer.numItems = 3;
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Vertex colors
    var vertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    var colors = [
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0
    ];
    gl.bufferData(
    gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW
    );
    vertexColorBuffer.itemSize = 4;
    vertexColorBuffer.numItems = 3;
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    // Set viewport size, clear canvas, pass in buffers, ACTUALLY DRAW SOMETHING??!?!
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    gl.vertexAttribPointer(
    shaderProgram.vertexPositionAttribute,
    vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0
    );
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
    vertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numItems);
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    So what does it look like?


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    • ~100 lines of code

    • Awkward API

    • Models, textures, projection etc. all manual


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    Libraries to the rescue!


    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    three.js
    • Familiar vocabulary (“camera”, not “mat4”)

    • Loaders for models, textures...

    • Animation

    • etcetcetc...
    The Web Chapter
    A SCIENCE AREA IN KNOWIT OBJECTNET

    Still not enough?


    • Game engines!

    • Babylon.js (free)

    • Unity, Unreal Engine (via Emscripten)


    Thanks
    Imre Kerr
    The Web Summit, 2016-10-28

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy