WebGL入门教程一:基本概念和使用说明

心叶

作者:心叶
时间:2018-05-11 10:30

写在前面

阅读这篇文章的人应该都知道Canvas绘制二维位图是通过getContext('2d')获取类似画笔的东西在其中绘制,而这里是绘制三维位图,通过getContext('webgl')来获取这只神奇的笔。

由于本系列更多的是以个人以后复习或查阅为主要目的,因此阅读起来如果有没有说清楚的地方,请留言。

下面,我们开始吧!

绘图过程

canvas 2D绘制过程

页面添加canvas元素 -> 获取2D画笔 -> 设置好画笔等 -> 清空屏幕(如果需要) -> 绘制(相应API)

canvas WebGL绘制过程

页面添加canvas元素 -> 获取3D画笔 -> 设置好着色器等 -> 清空屏幕(如果需要) -> 绘制(相应API)

可以看出来,主要是【设置好着色器等】这一步和之前的绘制方法不一样,因此,我们先来说明一下,什么是着色器?

着色器

绘制三维图形的时候(以绘制一个点为例),你需要告诉他点的位置、尺寸和颜色,当你设置好这些以后就类似2D设置好画笔了,就可以绘制了,而这三个的设置就是设置着色器的过程。

着色器种类

着色器分为二类:顶点着色器和片段着色器,前者控制位置和尺寸,后者控制颜色。

着色器目前本篇就说这些,由于还没有实践的东西,说太多理解起来有点累。

绘制一个简单的点

下面,我们通过绘制一个简单的点为例来按照上面的过程来绘制,感受一下。

页面添加canvas元素

首先在页面中添加canvas标签:

<canvas id='webgl' width='400' height='400'></canvas>

获取3D画笔

获取3D画笔也2D的一样,只不过参数有点改变:

var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');

设置好着色器等

着色器的设置会有点麻烦,其实着色器就是二段字符串,先定义好,然后使其生效。

下面是大致过程:

定义着色器字符串 -> 创建着色器对象并绑定好对应的着色器字符串 -> 创建着色器程序并添加前面创建的着色器对象 -> 把着色器程序链接成一个完整的程序并使用他

说明:上面的过程看起来有点昏,是因为3D的绘制比较复杂,有很多新概念的东西,需要慢慢去适应。

下面看看具体代码:

【定义着色器字符串】
顶点着色器有二个固定的属性gl_Position和gl_PointSize,分别表示位置和尺寸:

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

片段着色器有一个固定的属性gl_FragColor表示颜色:

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

这样,二段字符串就准备好了,也就是二个着色器字符串好了(为了方便定义在标签中,后续可以看见,他们就是二个字符串)。

【创建着色器对象并绑定好对应的着色器字符串】
具体在代码中备注,看代码:

//初始化着色器(上面第一步的其实就是这样在用,这里直接写字符串也可以,只不过上面的写法更方便编辑)
var vs_source = document.getElementById('vs-shader').innerHTML,
    fs_source = document.getElementById('fs-shader').innerHTML;

// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 绑定资源
gl.shaderSource(vertexShader, vs_source);
// 编译着色器
gl.compileShader(vertexShader);

// 创建片段着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 绑定资源
gl.shaderSource(fragmentShader, fs_source);
// 编译着色器
gl.compileShader(fragmentShader);

【创建着色器程序并添加前面创建的着色器对象】
到这里,二个着色器就准备好了,可是需要程序使用,还需要变成着色器程序,看代码:

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

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

【把着色器程序链接成一个完整的程序并使用他】
此时,着色器程序也好了,我们需要指定使用他:

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

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

这样,着色器就设置好了,当然,这是最简单的着色器,具体还有很多操作,后续会说明,先理解这些基本的吧。

清空屏幕(如果需要)

// 设置清空颜色
gl.clearColor(0.5, 0.5, 0.5, 1.0);
// 用设置的颜色清空屏幕(参数代表的是清除颜色缓冲)
gl.clear(gl.COLOR_BUFFER_BIT);

绘制(相应API)

最后一步绘制点:

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

drawArrays就类似2D中的绘图方法,第一个参数代表绘制一个点,第二个参数代表从第一个点开始,第三个参数代码绘制个数一个。

你可能好奇他从哪里知道点的位置的?是的,你开始不是定义了顶点着色器吗?就是他。

完整代码

由于是第一个例子,给出上面的完整例子代码:

<!DOCTYPE html>
<html>

<head>
    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='shader-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='shader-fs'>
        void main(){
            gl_FragColor=vec4(1.0,1.0,0.0,1.0);
        }
    </script>
</head>

<body>
    <canvas id='webgl' width='400' height='400'></canvas>
</body>
<script>

    // 1.获取webgl
    var canvas = document.getElementById('webgl');
    var gl = canvas.getContext('webgl');

    // 2.清空屏幕
    gl.clearColor(0.5, 0.5, 0.5, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 3.初始化着色器
    var vs_source = document.getElementById('shader-vs').innerHTML,
        fs_source = document.getElementById('shader-fs').innerHTML;

    // 创建顶点着色器对象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    // 绑定资源
    gl.shaderSource(vertexShader, vs_source);
    // 编译着色器
    gl.compileShader(vertexShader);

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fs_source);
    gl.compileShader(fragmentShader);

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

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

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

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

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

</script>

</html>

总结

一个简单的例子开始的入门就结束了,一定会有很多没有没有说清楚的,可以在下面留言,经过这个,你需要大概知道webgl的整体思想,绘图过程,最好可以感受这里例子的代码就可以了。

阅读 10.4k

WebGL入门教程
webgl从基础开始

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
0 条评论

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
文章目录
宣传栏