Canvas 2D和WebGL性能对比测试

渲染一个彩虹渐变色图案，2D需要1秒，而WebGL只要20ms（同等硬件下）

webgl, canvas, 性能

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* the idea is that this would have taken at least a second to load using the 2d-context. 
Using webgl, this loads in about 20ms. */

Helper = {};
Helper.createShader = function(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

return shader;
}
Helper.createProgram = function(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

return program;
}

Helper.standard2DVertexShader = `
attribute vec4 a_position;

void main(){
  gl_Position = a_position;
}
`;
Helper.standard2DFragmentShader = `
precision mediump float;

void main(){
  gl_FragColor = vec4( 1, 0, 0, 1 );
}
`;

Helper.pixel2DVertexShader = `
attribute vec2 a_position;
uniform vec2 u_resolution;

void main(){
  gl_Position = vec4( vec2( 1, -1 ) * ( ( a_position / u_resolution ) * 2.0 - 1.0 ), 0, 1 );
}
`;
Helper.uniform2DFragmentShader = `
precision mediump float;

uniform vec4 u_color;

void main(){
  gl_FragColor = u_color;
}
`;

/* end of helper program */

var gl = c.getContext('webgl'),
    w = c.width = 400,
    h = c.height = 300

, program = Helper.createProgram(gl,
    Helper.createShader(gl, gl.VERTEX_SHADER, Helper.pixel2DVertexShader),
    Helper.createShader(gl, gl.FRAGMENT_SHADER, Helper.uniform2DFragmentShader)), attribLocs = {
    pos: gl.getAttribLocation(program, 'a_position')
}, uniformLocs = {
    res: gl.getUniformLocation(program, 'u_resolution'),
    color: gl.getUniformLocation(program, 'u_color')
}, buffers = {
    pos: gl.createBuffer()
};

gl.viewport(0, 0, w, h);

gl.useProgram(program);
gl.enableVertexAttribArray(attribLocs.pos);

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.pos);
gl.vertexAttribPointer(attribLocs.pos, 2, gl.FLOAT, false, 0, 0);

gl.uniform2f(uniformLocs.res, w, h);

function drawTriangles(triangles, r, g, b, a) {

gl.uniform4f(uniformLocs.color, r, g, b, a);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangles), gl.STATIC_DRAW);
    gl.drawArrays(gl.TRIANGLES, 0, triangles.length / 2);
}

for (var i = 0; i < 10000; ++i) {
    var x = Math.random() * w,
        y = Math.random() * h;

drawTriangles(
        [x, y,
            x + (Math.random() - .5) * 2 * 30, y,
            x, y + (Math.random() - .5) * 2 * 30
        ],
        x / w + Math.random() * .01,
        y / h + Math.random() * .01,
        .5 + Math.random() * .1, 1);
}

编译

CSS

HTML

渲染一个彩虹渐变色图案，2D需要1秒，而WebGL只要20ms（同等硬件下）

webgl, canvas, 性能

编辑器支持Emmet

快捷键

渲染一个彩虹渐变色图案，2D需要1秒，而WebGL只要20ms（同等硬件下）

webgl, canvas, 性能

Canvas WebGL 不规则博动的3D物体

WebGL Three.js + Cannon.js实现的3D十字关卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：