webgl学习笔记二

最新推荐文章于 2021-06-17 17:22:20 发布

huohuotu

最新推荐文章于 2021-06-17 17:22:20 发布

阅读量242

点赞数

写在前面

建议先看下第一篇webgl学习笔记一

第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。

webgl提供了一种很方便的机制,即缓冲区对象，可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。

绘制多个点的流程

这里重点介绍缓冲区对象使用步骤

创建缓冲区对象

gl.createBuffer()

绑定缓冲区对象

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

将数据写入缓冲区对象

    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

将缓冲区对象分配给一个attribute变量

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

开启attribute变量

```
gl.enableVertexAttribArray(a_Position);

```

demo

-html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas  width="200px" height="200px"></canvas>



</body>
</html>

JavaScript

<script>

    window.onload = function () {

        //顶点着色器程序
        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);" +
            "}";
        //获取canvas元素
        var canvas = document.getElementById('canvas');
        //获取绘制二维上下文
        var 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;
        }
        // 清除指定<画布>的颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 清空 <canvas>
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);
    }

    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;

    }

</script>

huohuotu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webgl学习笔记二

写在前面建议先看下第一篇webgl学习笔记一第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。webgl提供了一种很方便的机制,即缓冲区对象，可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。绘制多个点的流程这里重点介绍缓冲区对象使用步骤创建缓冲区对象 gl.createBuffe
复制链接

扫一扫