通用js:
let canvas = document.getElementById('webgl')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let ctx = canvas.getContext('webgl')
attribute：
范围: 只适用于vertexShader，将js代码中的数据传递给vertexShader。
使用方式：声明一个变量a_Position
let vertexSource = `
attribute vec2 a_Position;
void main() {
gl_Position = vec4(a_Position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`
//获取变量内存位置
let aPosition = ctx.getAttribLocation(ctx.program, "a_Position")
//以为就是1f，二维就是2f，三维就是3f...，给变量内存位置设置赋值
ctx.vertexAttrib2f(aPosition, x, y)
uniform
范围：适用于vertexShader或fragmentShader，将js代码中的数据传递给vertexShader或fragmentShader
注意：在使用uniform时必须在前一行添加precision mediump float;确定精度
使用方式：声明一个变量u_color
let fragmentSource = `
precision mediump float;
uniform vec3 u_color;
void main (){
gl_FragColor = vec4(u_color, 1.0);
}
`
//设置颜色
let color = ctx.getUniformLocation(ctx.program, "u_color")
ctx.uniform3f(color, 1.0, 0.0, 0.0)
varying
范围：是将vertexShader中的数据传给fragmentShader，而无法直接通过js进行数据传递
注意：使用时需要两边同时varying声明一个相同变量名称的变量，用于数据传递
使用方式：
//创建顶点资源和像素资源（颜色）
let vertexSource = `
attribute vec2 a_Position;
attribute vec3 a_color;
varying vec3 u_color;
void main() {
u_color = a_color;
gl_Position = vec4(a_Position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`
let fragmentSource = `
precision mediump float;
varying vec3 u_color;
void main (){
gl_FragColor = vec4(u_color, 1.0);
}
`
let a_color = ctx.getAttribLocation(ctx.program, "a_color")
ctx.vertexAttrib3f(a_color, 1.0, 0.0, 0.0)
流程：
