首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在三个JS中动态更改顶点颜色

在三个JS中动态更改顶点颜色可以通过以下步骤实现:

  1. 首先,在JavaScript中创建一个顶点着色器和一个片元着色器。顶点着色器负责计算每个顶点的位置和颜色,片元着色器则负责计算每个像素的最终颜色。
  2. 定义一个顶点缓冲区,用于存储顶点数据。可以使用WebGL提供的gl.createBuffer()来创建缓冲区对象,然后使用gl.bindBuffer()将其绑定到gl.ARRAY_BUFFER上。
  3. 将顶点数据写入到缓冲区中。可以使用gl.bufferData()方法将顶点数据写入到绑定的缓冲区中。
  4. 编译和链接顶点着色器和片元着色器。通过WebGL提供的gl.createShader()gl.shaderSource()gl.compileShader()gl.createProgram()gl.attachShader()gl.linkProgram()等方法进行编译和链接。
  5. 获取顶点着色器中的变量位置。可以使用gl.getAttribLocation()方法获取顶点着色器中定义的变量位置。
  6. 启用顶点属性数组。使用gl.enableVertexAttribArray()方法启用顶点属性数组。
  7. 将缓冲区绑定到顶点属性数组上。使用gl.vertexAttribPointer()方法将缓冲区绑定到顶点属性数组上。
  8. 在渲染循环中,通过修改顶点着色器中的颜色变量,实现动态更改顶点颜色。可以使用gl.uniform3f()方法将新的颜色值传递给顶点着色器中的颜色变量。

以下是对应的代码示例:

顶点着色器代码:

代码语言:txt
复制
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;
}

片元着色器代码:

代码语言:txt
复制
precision mediump float;
varying vec3 v_Color;

void main() {
  gl_FragColor = vec4(v_Color, 1.0);
}

JavaScript代码:

代码语言:txt
复制
// 创建顶点着色器
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_Positiona_Color两个属性变量获取顶点位置和颜色,片元着色器通过v_Color变量获取顶点颜色。

顶点缓冲区使用了一个包含三个顶点位置和颜色的数组。在渲染循环中,将顶点缓冲区绑定到顶点属性数组上,并通过gl.uniform3f()方法动态修改顶点颜色。然后调用gl.drawArrays()方法进行绘制。

需要注意的是,代码示例中的gl对象是WebGL的上下文对象,具体使用时需要根据实际情况进行替换。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 增加颜色和着色

    我们已经知道,在OpenGL中,我们只能画点,直线和三角形,并且所有物体都是以他们为基础构建的。既然受限于这三个基本图元,那么我们如何用许多不同的颜色和着色表达更复杂的场景呢?我们能使用的一个方法就是使用上百万个小三角形,每个三角形的颜色都不同,这样就可以看到一副美丽,复杂,有丰富颜色变化的场景。尽管,这在技术上是可行的,但性能和内存的开销是十分庞大的。所以,OpenGL提供了另外一种技术,平滑着色。举例来说,就是有一个三角形,每个顶点的颜色都是不同的,我们可以在三角形表面混合这些颜色,最终得到一个平滑着色的三角形。我们要使用这种类型的着色让桌子中央更加明亮,而桌子的边缘显得比较暗淡。

    01

    第3章-图形处理单元-3.3-可编程着色器阶段

    现代着色器程序使用统一的着色器设计。这意味着顶点、像素、几何和曲面细分相关的着色器共享一个通用的编程模型。在内部,它们具有相同的指令集架构(ISA)。实现此模型的处理器在DirectX中称为通用着色器内核,具有此类内核的 GPU被称为具有统一着色器架构。这种架构背后的想法是着色器处理器可用于各种角色,GPU可以根据需要分配这些角色。例如,与由两个三角形组成的大正方形相比,具有小三角形的一组网格需要更多的顶点着色器处理。具有单独的顶点和像素着色器核心池的GPU意味着保持所有核心忙碌的理想工作分配是严格预先确定的。使用统一的着色器核心,GPU可以决定如何平衡此负载。

    02
    领券