WebGL关键知识点
JavaScript运行在CPU中
着色器语言编译后运行在GPU中
JavaScript可以通过WebGL API来编译执行代码,并在GPU中运行,初始化GPU状态
- 顶点着色器(vertexShader) 的作用是计算顶点的位置,即提供顶点在裁剪空间中的坐标值,GPU顶点着色器单元中执行
- 片元着色器(vertexShader) 的作用是计算图元的颜色值,我们可以将片元着色器大致理解成网页中的像素,GPU片元着色器单元中执行
WebGL API -> 浏览器 -> 操作系统 -> 显卡驱动 -> GPU硬件(渲染管线)
渲染管线四个阶段:
应用阶段(Application),
几何处理阶段(Geometry Processing),
光栅化阶段(Rasterization),
像素处理阶段(Pixel Processing)
顶点着色器:(逐顶点处理顶点数据)主要作用就是执行顶点着色器程序对顶点进行变换计算,比如顶点位置坐标执行进行旋转、平移等矩阵变换,变换后新的顶点坐标赋值给内置变量gl_Position,作为顶点着色器的输出,团员装配和光栅化环节的输入。
WebGL顶点着色器程序在Javascript中以字符串的形式存在,通过编译处理后传递给顶点着色器执行。
内置输入变量:gl_VertexID(记录顶点的整数索引)、gl_InstanceID(记录在采用实例绘制时当前图元对应的实例号)
内置输入变量:gl_Position、gl_PointSize
图元装配:顶点变换后的操作时图片装配,时绘制函数drawArrays和drawElements第一个参数绘制模式mode控制顶点如何装配为图元。
点:gl.POINTS
线:gl.LINES
三角形:gl.TRIANGLES
光栅化:把图形分解成一个一个小的像素(类似小格子)
片元着色器:逐片元处理片元数据。通过给内置变量gl_FragColor赋值可以给每一个片元进行着色,值可以是一个确定的RGBA值,可以使一个和片元位置相关的值,也可以是插值后的顶点颜色。通过关键字discard可以实现丢弃哪些片元,被丢弃的片元不会出现在帧缓冲区,自然不会显示在canvas画布
纹理缓冲区、颜色缓冲区、深度缓冲区
attribute:
范围: 只适用于vertexShader,将js代码中的数据传递给vertexShader。
//获取变量内存位置
let aPosition = gl.getAttribLocation(gl.program, "a_Position")
//以为就是1f,二维就是2f,三维就是3f...,给变量内存位置设置赋值
gl.vertexAttrib2f(aPosition, x, y)
uniform
范围:适用于vertexShader或fragmentShader,将js代码中的数据传递给vertexShader或fragmentShader
注意:在使用uniform时必须在前一行添加precision mediump float;确定精度
let color = gl.getUniformLocation(gl.program, "u_color")
gl.uniform3f(color, 1.0, 0.0)
varying
范围:是将顶点着色器中的数据传给片元着色器,而无法直接通过js进行数据传递
注意:使用时需要两边同时varying声明一个相同变量名称的变量,用于数据传递
let a_color = gl.getAttribLocation(gl.program, "a_color")
gl.vertexAttrib3f(a_color, 1.0, 0.0, 0.0)