在三个JS中动态更改顶点颜色可以通过以下步骤实现:
gl.createBuffer()
来创建缓冲区对象,然后使用gl.bindBuffer()
将其绑定到gl.ARRAY_BUFFER
上。gl.bufferData()
方法将顶点数据写入到绑定的缓冲区中。gl.createShader()
、gl.shaderSource()
、gl.compileShader()
、gl.createProgram()
、gl.attachShader()
、gl.linkProgram()
等方法进行编译和链接。gl.getAttribLocation()
方法获取顶点着色器中定义的变量位置。gl.enableVertexAttribArray()
方法启用顶点属性数组。gl.vertexAttribPointer()
方法将缓冲区绑定到顶点属性数组上。gl.uniform3f()
方法将新的颜色值传递给顶点着色器中的颜色变量。以下是对应的代码示例:
顶点着色器代码:
attribute vec3 a_Position;
attribute vec3 a_Color;
varying vec3 v_Color;
void main() {
gl_Position = vec4(a_Position, 1.0);
v_Color = a_Color;
}
片元着色器代码:
precision mediump float;
varying vec3 v_Color;
void main() {
gl_FragColor = vec4(v_Color, 1.0);
}
JavaScript代码:
// 创建顶点着色器
const vertexShaderSource = `
attribute vec3 a_Position;
attribute vec3 a_Color;
varying vec3 v_Color;
void main() {
gl_Position = vec4(a_Position, 1.0);
v_Color = a_Color;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// 创建片元着色器
const fragmentShaderSource = `
precision mediump float;
varying vec3 v_Color;
void main() {
gl_FragColor = vec4(v_Color, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// 获取变量位置
const a_Position = gl.getAttribLocation(program, 'a_Position');
const a_Color = gl.getAttribLocation(program, 'a_Color');
// 创建顶点缓冲区
const vertices = [
-0.5, 0.5, 0.0, // 顶点1的位置
1.0, 0.0, 0.0, // 顶点1的颜色(红色)
-0.5, -0.5, 0.0, // 顶点2的位置
0.0, 1.0, 0.0, // 顶点2的颜色(绿色)
0.5, -0.5, 0.0, // 顶点3的位置
0.0, 0.0, 1.0, // 顶点3的颜色(蓝色)
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 渲染循环中的绘制过程
gl.useProgram(program);
gl.enableVertexAttribArray(a_Position);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 24, 0);
gl.enableVertexAttribArray(a_Color);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 24, 12);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// 在渲染循环中动态更改顶点颜色
const r = Math.random();
const g = Math.random();
const b = Math.random();
const u_Color = gl.getUniformLocation(program, 'u_Color');
gl.uniform3f(u_Color, r, g, b);
上述代码中,顶点着色器和片元着色器定义了位置和颜色的属性。顶点着色器通过a_Position
和a_Color
两个属性变量获取顶点位置和颜色,片元着色器通过v_Color
变量获取顶点颜色。
顶点缓冲区使用了一个包含三个顶点位置和颜色的数组。在渲染循环中,将顶点缓冲区绑定到顶点属性数组上,并通过gl.uniform3f()
方法动态修改顶点颜色。然后调用gl.drawArrays()
方法进行绘制。
需要注意的是,代码示例中的gl
对象是WebGL的上下文对象,具体使用时需要根据实际情况进行替换。
原引擎 | 场景实战系列
DBTalk技术分享会
DB TALK 技术分享会
云+社区技术沙龙[第5期]
云+社区技术沙龙[第7期]
领取专属 10元无门槛券
手把手带您无忧上云