头图

WebGL简明教程之:【1】绘制一个点

我们在画布的中心绘制一个正方形,你可以先看看最终的效果:

代码

下面是完整的代码,我们后续将对里面的内容进行讲解说明:

<canvas width=200 height=200 style="outline:1px solid gray;">
    非常抱歉,您的浏览器不支持canvas!
</canvas>

<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
    void main(){
        gl_Position=vec4(0.0,0.0,0.0,1.0);
        gl_PointSize=100.0;
    }
</script>

<!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
    void main(){
        gl_FragColor=vec4(1.0,0.0,0.0,1.0);
    }
</script>

<script>

    // 先获取gl
    var gl = document.getElementsByTagName('canvas')[0].getContext('webgl');

    // 定义一个把着色器字符串加载成着色器对象的函数
    var loadShader = function (type, source) {

        // 创建着色器对象
        var shader = gl.createShader(type);

        // 绑定资源
        gl.shaderSource(shader, source);

        // 编译着色器
        gl.compileShader(shader);

        return shader;
    };

    // 分别加载顶点着色器对象和片段着色器对象
    var vertexShader = loadShader(gl.VERTEX_SHADER, document.getElementById('vs').innerHTML),
        fragmentShader = loadShader(gl.FRAGMENT_SHADER, document.getElementById('fs').innerHTML);

    // 创建一个着色器程序
    var glProgram = gl.createProgram();

    // 把前面创建的两个着色器对象添加到着色器程序中
    gl.attachShader(glProgram, vertexShader);
    gl.attachShader(glProgram, fragmentShader);

    // 把着色器程序链接成一个完整的程序
    gl.linkProgram(glProgram);

    // 使用这个完整的程序
    gl.useProgram(glProgram);

    // 绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);

</script>

绘制流程

上面的流程看起来是不是很简单,无论是简单的3D还是复杂的3D,需要且需要按照上面的流程进行(当然,在细节上会有一些不同)。

记住这个流程,后续的说明也按照这个思路进行。

着色器

绘制的第一步,就是准备好两个着色器: 顶点着色器片段着色器 。前者用于描述绘制的图形的点的位置,后者用于描述每个点的颜色。

可能这样说你会无法理解,其实简单的说就是:我们在绘图的时候,会一次性的把数据都传递给GPU,传递给GPU的数据需要一些"整理"后再使用,而着色器就是驻留在GPU上的这段"整理程序"。

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

定义着色器

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

void main(){
    gl_Position=vec4(0.0,0.0,0.0,1.0);
    gl_PointSize=100.0;
}

内置变量gl_Position表示点的位置,gl_PointSize表示点的大小。

我们这里为了简单,点的位置和大小是写死的,实际可以有更丰富的方式进行设置,这里先不说明了。

那么,点的颜色在哪里设置?没错,在片段着色器,看看具体代码:

void main(){
    gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}

同样的存在一个内置变量,这里叫gl_FragColor, 其就表示点的颜色。

着色器生效

目前为止,上面的两个着色器只是两段字符串,还需调用webgl的方法生效(这里的代码比较固定,查看例子即可)。

数据

由于我们这里把数据写死了,因此不需要传递,就先不再赘述了。

绘制

我们这里写死的数据就一个点,由此直接:

gl.drawArrays(gl.POINTS, 0, 1);

这样,一个点就出来了。

除了绘制点,我们还可以绘制线和三角形,当然,绘制多个点、线或三角形的时候,也有更丰富的方法,此外,除了常规绘制方法,还有对应的更高效的索引绘制方法。

102 声望
10 粉丝
0 条评论
推荐阅读
Blender中如何纹理贴图入门
点击顶部的“Shading”按钮后,进入如下视图:然后点击“图形纹理”查看的“打开”按钮:然后,如下图,把“颜色”和“基础色”连接起来:到这里,纹理应该就出来了。如果没有出来,可能是“视图着色方式”选择的不对,如下:

zxl20070701阅读 647

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

超长溢出头部省略打点,坑这么大,技巧这么多?
在业务中,有这么一种场景,表格下的某一列 ID 值,文本超长了,正常而言会是这样:通常,这种情况都需要超长省略溢出打点,那么,就会变成这样:但是,这种展示有个缺点,3 个 ID 看上去就完全一致了,因此,PM ...

chokcoco14阅读 1.3k评论 3

那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图
英雄联盟比赛选手的六芒星能力图动画是如何制作的?
最近,在看 LPL 比赛的时候,看到这样一个有意思的六芒星能力图动画:今天,我们就来使用纯 CSS 实现这样一个动画效果!实现背景网格对于如下这样一个背景网格,最好的方式当然肯定是切图。如果一定要使用 CSS,...

chokcoco12阅读 1.2k

封面图
102 声望
10 粉丝
宣传栏