webgl使用VBO（顶点缓存对象）和IBO（索引缓存对象）绘制基础几何图形

webgl vertex buffer objects and index buffer object demo. 与drawArrays不同，drawElements允许我们使用IBO来定义WebGL如何渲染图形。与drawArrays会重复渲染vertices不同，drawElements使用了indices来定义点与点之间的连接，因此每个点只需要渲染一次来实现的顶点复用，可以减少GPU的负担。

webgl, vbo, ibo, buffer

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1860
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var utils = new utilsObject();

function utilsObject() {}

/**
 * Obtains a WebGL context for the canvas with id 'canvas-element-id'
 * This function is invoked when the WebGL app is starting.
 */
utilsObject.prototype.getGLContext = function(name) {

var canvas = document.getElementById(name);
    var ctx = null;

if (canvas == null) {
        alert('there is no canvas on this page');
        return null;
    } else {
        c_width = canvas.width;
        c_height = canvas.height;
    }

var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];

for (var i = 0; i < names.length; ++i) {
        try {
            ctx = canvas.getContext(names[i]);
        } catch (e) {}
        if (ctx) {
            break;
        }
    }
    if (ctx == null) {
        alert("Could not initialise WebGL");
        return null;
    } else {
        return ctx;
    }
}

/**
 * Utilitary function that allows to set up the shaders (program) using an embedded script (look at the beginning of this source code)
 */
utilsObject.prototype.getShader = function(gl, id) {
    var script = document.getElementById(id);
    if (!script) {
        return null;
    }

var str = "";
    var k = script.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

var shader;
    if (script.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (script.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

gl.shaderSource(shader, str);
    gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
}

utilsObject.prototype.requestAnimFrame = function(o) {
    window.requestAnimFrame(o);
}

var gl = null,
    prg = null,
    c_width = 0,
    c_height = 0;
var trapezoidVertexBuffer = null,
    trapezoidIndexBuffer = null;
var vertices = [],
    indices = [];
var renderingMode = "TRIANGLES";

function drawScene() {
    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.viewport(0, 0, c_width, c_height);
    gl.bindBuffer(gl.ARRAY_BUFFER, trapezoidVertexBuffer);
    gl.vertexAttribPointer(prg.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(prg.aVertexPosition);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, trapezoidIndexBuffer);
    switch (renderingMode) {
        case "TRIANGLES":
            indices = [0, 1, 2, 2, 3, 4];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "LINES":
            indices = [1, 3, 0, 4, 1, 2, 2, 3];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "POINTS":
            indices = [1, 2, 3];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.POINTS, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "LINE_LOOP":
            indices = [2, 3, 4, 1, 0];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "LINE_STRIP":
            indices = [2, 3, 4, 1, 0];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.LINE_STRIP, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "TRIANGLE_STRIP":
            indices = [0, 1, 2, 3, 4];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
        case "TRIANGLE_FAN":
            indices = [0, 1, 2, 3, 4];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
            gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT, 0);
            break;
    }
}

function renderLoop() {
    utils.requestAnimFrame(renderLoop);
    drawScene();
}

function runWebGLApp() {
    gl = utils.getGLContext("canvas-element-id");
    initProgram();
    initBuffers();
    renderLoop();
}

window.onload = function() {
    runWebGLApp();
}

编译

CSS

HTML

<main>
    <canvas id="canvas-element-id" width="480" height="400">
        Your browser does not support HTML5 canvas.
    </canvas>
    <div>
        <select id="select">
            <option selected="selected">TRIANGLES</option>
            <option>LINES</option>
            <option>POINTS</option>
            <option>LINE_LOOP</option>
            <option>LINE_STRIP</option>
            <option>TRIANGLE_STRIP</option>
            <option>TRIANGLE_FAN</option>
        </select>
    </div>
    <script>
        var select = document.querySelector("#select");
        select.addEventListener("change", function(e) {
            var option = e.target;
            renderingMode = e.target.selectedOptions[0].textContent;
        });
    </script>
</main>

webgl, vbo, ibo, buffer

编辑器支持Emmet

快捷键

webgl, vbo, ibo, buffer

使用WebAssembly（wasm）和Unity WebGL实现的FPS射击游戏：愤怒的机器人（AngryBots）

使用webgl绘制3D版本人脸眉眼图像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：