一看就会的webgl (一) 绘制 点、线、三角形

93 阅读2分钟

一看就会的webgl(一) 绘制 点、线、三角形

今天主要就是点,线,三角形,主要就是webgl基础,也是关于我学到的东西的总结与记录

绘制点

首先得引一个库,因为要统一webgl坐标 👉 glMatrix.js

一、创建环境

创建canvas 并引入库 image.png

二、需要的函数初始化

image.png

三、webgl初始化

image.png

其他的都好理解就是这个投影坐标为什么要有呢,就是这个库的这个方法能让我们的webgl的坐标移动了屏幕的坐标,参数的话打开那个库,它写的也比较清晰,这里就不多讲了。

image.png

image.png

四、shader 初始化

一、顶点着色

image.png

attribute 是存储限定符,是专门用于向外部导出与点位相关的对象的,这类似于es6模板语法中export 。

vec4 是变量类型,vec4是4维矢量对象。

a_position 是变量名,存储一些外面绑定传入的信息,比如顶点坐标

uniform : 向片元着色器中传递数据就需要使用 uniform声明变量,uniform变量传递的数据是一致的不变的数据例如所有的颜色应用的都是这个变量但是所有点的位置是不一样的

gl_Position gl_PointSize 内置的变量,收到顶点信息到下一步图元装配阶段

二、片元着色

主要就是光栅化之后,渲染每个像素的颜色,rgba的形式 👉 红、黄、蓝

所以下面的是蓝色

image.png

三、shader 初始化

image.png

四、数据缓冲区 初始化

image.png

五、绘制

image.png

我们的点就出来了,完成了一大步,接下来我们绘制线,其实一样的,就是缓冲数据那里发生变化

image.png

绘制线

image.png

image.png

image.png

image.png

绘制三角形

这里主要就用到webgl的绘画方式,大家感兴趣的可以自己去试一试各自的效果,这里就画出了三角形了

image.png

image.png

大概是个三角形了,没法子了我的审美,大家可以根据坐标画自己喜欢的三角形了开始。