把WebGL Canvas绘制内容保存为图像

save webgl canvas to image

webgl, image

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;

return gl;
}

function initMatrices() {
    // The transform matrix for the square - translate back in Z
    // for the camera
    modelViewMatrix = new Float32Array(
        [1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, -3.333, 1
        ]);

// The projection matrix (for a 45 degree field of view)
    projectionMatrix = new Float32Array(
        [2.41421, 0, 0, 0,
            0, 2.41421, 0, 0,
            0, 0, -1.002002, -1,
            0, 0, -0.2002002, 0
        ]);

}

function createShader(gl, source, type) {
    var shader;
    shader = gl.createShader(type);

var str = document.getElementById(source).text;
    gl.shaderSource(shader, str);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
}

function initShader(gl) {
    // set the shader to use
    var vertexShader = createShader(gl, 'vert-shader', gl.VERTEX_SHADER);
    var fragmentShader = createShader(gl, 'frag-shader', gl.FRAGMENT_SHADER);

// link them together into a new program
    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    // set the shader to use
    gl.useProgram(shaderProgram);

// get pointers to the shader params
    shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
    gl.enableVertexAttribArray(shaderVertexPositionAttribute);

shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
    shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }
}

function draw(gl, obj) {

// clear the background (with black)
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

// connect up the shader parameters: vertex position and projection/model matrices
    // look up where the attribute is in the vertex code, we essentially get an index number
    var positionLocation = gl.getAttribLocation(shaderProgram, "vertexPos");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
    gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
    gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

// draw it  - drawArrays(Mode,first,count)
    // start at index 0 with nVerts expected points
    gl.drawArrays(obj.primtype, 0, obj.nVerts);
}

window.onload = function() {
    var canvas = document.getElementById("container");
    var gl = initWebGL(canvas);
    initViewport(gl, canvas);
    initMatrices();
    var obj = createSquare(gl);
    initShader(gl);
    draw(gl, obj);

$("#pic").click(function() {
        console.log('clicked');
        var data = canvas.toDataURL();
        console.log(data);
        $('img').attr('src', data);
    })

};

编译

CSS

HTML

save webgl canvas to image

webgl, image

编辑器支持Emmet

快捷键

save webgl canvas to image

webgl, image

WebGL Canvas 矢量图在线生成器

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：