乐趣区

关于webgl:WebGL之快速入门

这里,咱们将向大家演示 WebGL 的一些奢侈阐明和根本应用,即便你后续应用第三方 3D 渲染引擎进行绘制,这里的基本概念仍旧是十分无益的,或者说是必要的。

在演示和阐明的时候,咱们抉择基于 image3D.js 来作为依赖库,但因为其奢侈的语法简直和原生 WebGL 是统一的,因而咱们认为这不是一个蹩脚的抉择(如果间接应用原生,代码会变得过于冗余,不好阐明)。

在后续的阐明中,你都无需查阅别的文档,当然,如果你想晓得的更具体,也能够间接拜访 image3D.js 文档进行查阅。

绘制流程

个别最通用的绘制流程大抵如下:

筹备好着色器 数据写入缓冲区并实现调配 调用绘制办法进行绘制

不晓得你是否能够了解下面每个步骤是在干什么,咱们上面将通过一个逐步丰盛的例子来进行解释。

你能够提前看看咱们最终要绘制的成果:

这是二元函数:y=x2+ z2 的图像。

你能够点击此处进行查看运行成果。

着色器

绘制的第一步,就是筹备好两个着色器:顶点着色器 片段着色器。前者用于形容绘制的图形的点的地位,后者用于形容每个点的色彩。

可能这样说你会无奈了解,其实简略的说就是:咱们在绘图的时候,会一次性的把数据都传递给 GPU,传递给 GPU 的数据须要一些 ” 整顿 ” 后再应用,而着色器就是驻留在 GPU 上的这段 ” 整顿程序 ”。

咱们传递的数据是什么?不就是点的地位和点的色彩吗。所以,着色器就分为了顶点着色器和片段着色器(有时候也叫片元着色器),前者解决点,后者解决色彩。

所以,让咱们先看看这里的顶点着色器的具体代码:

attribute vec4 a_position;
attribute vec4 a_color;
varying vec4 v_color;
void main(){
    gl_Position = a_position;
    v_color = a_color;
}

内置变量 gl_Position 就是绘图最终接管的点的数据,而咱们定义的变量 a_position 好比一个管道,咱们后续能够给这个变量赋值,也就间接的给 gl_Position 赋值了(也就是点的地位)。

那 v_color 是什么?你能够了解,绘图的时候,是以点为主的,每个点的色彩,须要借助点的地位来设置,而 v_color 就是地位到色彩的桥梁。还是间接看看片段着色器:

precision mediump float;
varying vec4 v_color;
void main(){gl_FragColor=v_color;}

同样的存在一个内置变量,这里叫 gl_FragColor,其接管了来自顶点着色器的 v_color。

我不晓得你是否了解了下面的行为,不过你可能也感觉到了,点的地位和色彩如何解决曾经筹备好了,后续咱们只须要借助 a_position 和 a_color 就能够设置数据了。

3D 对象

在传递数据前,咱们先就基于这两个着色器创立 3D 对象,这一步非常简单,间接看代码:

var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
    "vertex-shader": vsCode,
    "fragment-shader": fsCode,
    depth: true
});

后续的所有操作,包含传递绘制和绘制等,间接调用这个对象上的接口就能够了。

特地阐明:vsCode 和 fsCode 就是下面两个着色器的代码,是字符串。

传递数据

终于,能够给 GPU 传递数据了,所以,咱们先来筹备好数据:

var points = [];
/**
    具体的写法你能够间接看最终的代码,获取的思路大略就是:三个点拼接成一个三角形,每个点由 6 个数据组成,前 3 个示意点的地位,后 3 个示意点的色彩,而一个个三角形拼接成最终的图形。*/

// 因而,点的个数就是
var num = points.length / 6;

这些三角形如何确定的?对 xoz 面,范畴是 -1 ~ 1,切割成一个个正方形,而后斜切一下就能够了:

对于 y 值,由 y=x2+ z2 计算获取。

数据筹备好了,间接设置即可:

image3d.Buffer().write(new Float32Array(points)).use('a_position', 3, 6, 0).use('a_color', 3, 6, 3);

数据写入缓冲区,而后调配给 a_position 和 a_color 即可。

绘制

因为是三角形,一共 num 个,间接执行绘制办法即可:

image3d.Painter().drawTriangle(0, num);

变换

尽管下面的话,图形应该曾经进去了,不过,咱们看最终的例子如同始终在旋转,那旋转成果是如何进去的?

聪慧的你肯定想到了顶点着色器,是的,咱们只须要批改一下顶点着色器中内置变量 gl_Position 接管的值,让其都和一个矩阵相乘就能够了。着色器中对应代码批改:

gl_Position=u_matrix * a_position;

后续,咱们不停的从新绘制,而在绘制前,都传递一个新的矩阵即可:

//  创立相机对象
var camera = image3d.Camera({size: 2}).rotateBody(0.9, 0, 1, 0).rotateBody(0.3, 1, 0, 0, 0, 0, 1).moveBody(0.5, 0, -1, 0);

setInterval(function () {// 每次从新绘制前,都围绕射线(0,0,0)→ (0,1,0)旋转弧度 0.05
    camera.rotateBody(0.05, 0, 1, 0);

    // 传递照相机
    image3d.setUniformMatrix("u_matrix",
        camera.value());

    // 绘制
    painter.drawTriangle(0, num);

}, 30);

更多

如果说,咱们心愿再加上光照、投影,或者说,可不可以给图形贴上“皮肤”等,怎么写,是不是显而易见了。

是的,思路都非常简单,通过批改两个着色器最终获取的变量值即可,如何批改?那你就能够借助一系列的数学计算和着色器的内置函数了。

残缺代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/image3d@3"></script>
    <style>
        body {
            margin: 0;
            text-align: center;
            overflow: hidden;
        }
    </style>

    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        attribute vec4 a_position;
        uniform mat4 u_matrix;
        attribute vec4 a_color;
        varying vec4 v_color;
        void main(){
            gl_Position=u_matrix * a_position;
            v_color=a_color;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        precision mediump float;
        varying vec4 v_color;
        void main(){gl_FragColor=v_color;}
    </script>

</head>

<body>

    <canvas width='300' height='300'> 十分道歉,您的浏览器不反对 canvas!</canvas>

    <script>

        // 创立 3D 对象并配置好画布和着色器
        var image3d = new image3D(document.getElementsByTagName('canvas')[0], {"vertex-shader": document.getElementById("vs").innerText,
            "fragment-shader": document.getElementById("fs").innerText,
            depth: true
        });

        /**
         * 许多的点,三个点拼接成一个三角形,* 每个点由 6 个数据组成,前 3 个示意点的地位,后 3 个示意点的色彩
         * 而一个个三角形拼接成最终的图形
        */
        var points = [];

        // 一个依据值来确定色彩的办法
        var valToColor = function (val) {return [val * 0.5, 0.5, 1 - val * 0.5];
        }

        var dist = 0.02;
        var color, val;
        // y=x2+z2;
        for (var x = -1; x < 1; x += dist) {for (var z = -1; z <= 1; z += dist) {

                // 左上三角形

                val = x * x + z * z;
                color = valToColor(val);
                points.push(x, val, z, color[0], color[1], color[2]);

                val = (x + dist) * (x + dist) + z * z;
                points.push(x + dist, val, z, color[0], color[1], color[2]);

                val = x * x + (z + dist) * (z + dist);
                points.push(x, val, z + dist, color[0], color[1], color[2]);

                // 右下三角形

                val = (x + dist) * (x + dist) + z * z;
                color = valToColor(val);
                points.push(x + dist, val, z, color[0], color[1], color[2]);

                val = x * x + (z + dist) * (z + dist);
                points.push(x, val, z + dist, color[0], color[1], color[2]);

                val = (x + dist) * (x + dist) + (z + dist) * (z + dist);
                points.push(x + dist, val, z + dist, color[0], color[1], color[2]);

            }
        }

        // 点的个数
        var num = points.length / 6;

        // 点的坐标
        image3d.Buffer().write(new Float32Array(points)).use('a_position', 3, 6, 0).use('a_color', 3, 6, 3);

        var painter = image3d.Painter();

        //  创立相机对象
        var camera = image3d.Camera({size: 2}).rotateBody(0.9, 0, 1, 0).rotateBody(0.3, 1, 0, 0, 0, 0, 1).moveBody(0.5, 0, -1, 0);

        setInterval(function () {camera.rotateBody(0.05, 0, 1, 0);

            // 传递照相机
            image3d.setUniformMatrix("u_matrix",
                camera.value());

            // 绘制
            painter.drawTriangle(0, num);

        }, 30);

    </script>

</body>

</html>
退出移动版