渲染管线
gl_Position 顶点在世界坐标系中的坐标；
gl_FragCoord 片元在以canvas画布窗口坐标系统中的坐标；默认是画布长和宽, 一般进行归一化后范围范围为[0, 1]，左下角(0, 0)，右上角(1, 1)；
uniform vec2 u_resolution;
void main() {
vec2 p = gl_FragCoord.xy / u_resolution;
gl_FragColor = vec4(p.xy, .0, .1);
}
归一化
可以将原点移动到中心位置，此时中心点为(.0, .0)；
uniform vec2 u_resolution;
void main() {
vec2 p = gl_FragCoord.xy / u_resolution - vec2(.5, .5);
gl_FragColor = vec4(p.xy, .0, .1);
}
移动原点至中心
gl_PointCoord 点域图元光栅化的片元，即gl_PointSize定义的区域内片元坐标；区间 [0，1]，左上角为(0, 0)，右下角(1, 1)；
uniform vec2 u_resolution;
void main() {
gl_FragColor = vec4(gl_PointCoord, .0, .1);
}
截屏2023-01-09 21.44.53.png
gl_FragCoord与 gl_PointCoord的关系
关系
attribute 、 uniform 、varying为存储限定字
- 这两种类型的变量定义在 main函数外部，并且它们都不能在着色器中被重新赋值；
-
uniform是全局的，在顶点和片元着色器中使用，在着色器程序中是独一无二的； -
attribute只能用在顶点着色器，表示逐顶点信息，顶点着色器一个个的获取顶点信息； -
varying使顶点着色器能够向片元着色器传送数据，varying 变量从顶点着色器向片元着色器传递时会进行插值；
initShader
import { createBuffer } from "./createBuffer";
function createProgram(gl: WebGLRenderingContext, vshader: string, fshader: string) {
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
/**
* vertexShader & fragmentShader 为编译后的中间码
*/
if (!vertexShader || !fragmentShader) {
return null;
}
const program = gl.createProgram();
if (!program) {
return null;
}
// 为程序对象分配定点着色器和片元着色器
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// 链接program
gl.linkProgram(program);
// 检查连接状态
const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
const error = gl.getProgramInfoLog(program);
console.error(`failed to link program: ${error}`);
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
return null;
}
return program;
}
function createShader(gl: WebGLRenderingContext, type: number, source: string) {
const shader = gl.createShader(type);
if (!shader) {
return null;
}
// 设置着色器源代码
gl.shaderSource(shader, source);
// 编译着色器
gl.compileShader(shader);
// 检查编译状态
const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
const error = gl.getShaderInfoLog(shader);
console.error(`failed to compile shader: ${error}`);
gl.deleteShader(shader);
return null;
}
return shader;
}
export function initShader(gl: WebGLRenderingContext, vshader: string, fshader: string) {
const program = createProgram(gl, vshader, fshader);
if (!program) {
console.log('failed to create program');
return false;
}
gl.useProgram(program);
return true;
}
VBO vertex buffer object 在GPU显存上开辟空间存储模型数据；
VAO vertex array object 记录VBO的锚定点；
function createPosition(gl: WebGLRenderingContext, program: WebGLProgram) {
const data = new Float32Array([
0.5, 0.5,
-0.5, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
// const data = new Float32Array([.5, .5]);
//获取顶点着色器的位置变量apos，即aposLocation指向apos变量。
const aposLocation = gl.getAttribLocation(program, 'a_Position');
// 归一化
uniformization(gl, program);
//创建缓冲区对象
var buffer = gl.createBuffer();
//绑定缓冲区对象,激活buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
//顶点数组data数据传入缓冲区，STATIC_DRAW表示静态数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
//缓冲区中的数据按照一定的规律传递给位置变量apos
gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);
//允许数据传递
gl.enableVertexAttribArray(aposLocation);
gl.drawArrays(gl.POINTS, 0, 4);
}
