在子线程中创建并运行WebGl的例子,主要使用OffscreenCanvas

最新推荐文章于 2025-06-13 19:12:22 发布

liqunzheng

最新推荐文章于 2025-06-13 19:12:22 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 3D

本文链接：https://blog.youkuaiyun.com/liqunzheng/article/details/85836751

3D 专栏收录该内容

3 篇文章

订阅专栏

在子线程中创建并运行WebGl的例子,主要使用OffscreenCanvas

index.html

<!DOCTYPE html>
<html>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    canvas {
        width: 100%;
        height: 100%;
        position: absolute;
    }
</style>

<head>
    <meta lang="'cn">
    <meta charset="utf-8">
    <title>WebGL测试</title>
</head>

<body onload="load()">
<canvas id="canvas"></canvas>
</body>

<script>
    function load() {
        var canvas = document.getElementById('canvas');
        if (('transferControlToOffscreen' in canvas)) {
            var offscreen = canvas.transferControlToOffscreen();
            var worker = new Worker("myworker.js");
            worker.postMessage({canvas:offscreen}, [offscreen]);
        }
        else {
            alert('不支持在线程中创建WebGL');
        }
    }
</script>

</html>

myworker.js

var gl;

onmessage = function (evt) {
    if (evt.data.canvas) {
        createContext(evt.data.canvas);
    }

    function render(time) {
        d = time - Math.floor(time);
        if (gl) {
            // 清除指定<画布>的颜色
            gl.clearColor(d, d, d, 1.0);
            // 清空 <canvas>
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            if (gl.commit) {
                gl.commit();
            }
            requestAnimationFrame(render);
        }
    }

    requestAnimationFrame(render);
};

function createContext(canvas) {
    //顶点着色器程序
    var VSHADER_SOURCE =
        "attribute vec4 a_Position;" +
        "void main() {" +
        "gl_Position = a_Position; " +
        "} ";

    //片元着色器
    var FSHADER_SOURCE =
        "void main() {" +
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";

    gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("Failed");
        return;
    }
    //编译着色器
    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertShader, VSHADER_SOURCE);
    gl.compileShader(vertShader);

    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragShader, FSHADER_SOURCE);
    gl.compileShader(fragShader);
    //合并程序
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertShader);
    gl.attachShader(shaderProgram, fragShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    //获取坐标点
    var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return;
    }

    var n = initBuffers(gl, shaderProgram);

    if (n < 0) {
        console.log('Failed to set the positions');
        return;
    }
}

function initBuffers(gl, shaderProgram) {
    var vertices = new Float32Array([
        0.0, 0.5, -0.5, -0.5, 0.5, -0.5
    ]);
    var n = 3;//点的个数
    //创建缓冲区对象
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log("Failed to create the butter object");
        return -1;
    }
    //将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //向缓冲区写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    //获取坐标点
    var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    //连接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);
    return n;
}