webGL编程指南总结

本文最后更新于:6 分钟前

个人计算机上使用最广泛的两种三维图形渲染技术是Direct3DOpenGL

齐次坐标

由4个分量组成的矢量被称为齐次坐标,齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w),所以如果齐次坐标的第4个分量是1,那么就可以将它当作三维坐标来使用。w的值必须是大于等于0的,如果w趋近于0,那么它所表示的点将趋近于无穷远,所以在齐次坐标系统中可以有无穷远的概念,齐次坐标的存在,使得矩阵乘法来描述顶点成为可能,三维图形系统中,通常使用齐次坐标来表示顶点的三维坐标。

着色器

顶点着色器

顶点着色器控制点的位置和大小

片元着色器

片元着色器控制点的颜色,简单的讲,片元就是显示在屏幕上的一个像素(严格意义上的来说,片元包括这个像素的位置、颜色和其他信息)。

一旦顶点着色器执行完后,片元着色器就会开始执行,调用main()函数。

坐标系统

三维坐标是笛卡尔坐标系统,具有X、Y、Z轴,通常,在webGL中,当你面向计算机,X轴方向是水平的(正方向是向右👉),Y轴是垂直的(正方向是向下👇),Z轴是垂直于屏幕的(正方向是向外)。这套坐标系又被称为右手坐标系,默认情况下WebGL使用右手坐标系,实际上WebGL既不是右手坐标系也不是左手坐标系。

attribute变量

我们的目标是将信息从JavaScript程序中传给顶点着色器,有两种方式可以做到:attribute变量uniform变量。使用哪个变量取决于需要传输的数据本身,attribute变量传输的是那些与顶点相关的数据,而uniform变量传输的那些对于所有顶点都相同(或与顶点无关)的数据。关键词attribute被称为存储限定符


webGL编程指南总结
https://www.gishai.top/blog/posts/3a1238a0.html
作者
Hai
发布于
2021年12月5日
更新于
2022年11月6日
许可协议