es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear un sencillo sombreador degradado en un cubo.

17 Jul, 2023 Programación

Estoy intentando usar un código que encontré aquí para crear un sombreador de gradiente en un cubo, basado en coordenadas. Pero la posición en mi sombreador de vértices no parece variar. Va de 0 a 1 sin ningún paso intermedio.

¿Qué estoy haciendo mal?

Aquí está mi sombreador de fragmentos y vértices:

const vertexShader = `
  varying vec2 vUv;

  void main() {
    vUv.y = position.y;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`

const fragmentShader = `
  uniform vec3 colors[2]; 

  varying vec2 vUv;

  void main() {
    gl_FragColor = vec4(mix(colors[0], colors[1], vUv.y), 1.0);
  }
`

const uniforms = {
  colors: {
    type: 'v3v',
    value: [new Color('#ff0000'), new Color('#0000ff')]
  }
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que en el vertex shader proporcionado, la variable vUv solo se asigna a la coordenada y del vector position. Esto significa que vUv solo variará con y y no con x ni con z.

    Para crear un degradado basado en coordenadas, vUv debe asignarse a un vector normalizado que represente la posición del vértice en el espacio 3D. Una forma común de hacer esto es utilizar el atributo incorporado uv que es proporcionado automáticamente por Three.js. Este atributo es un vector 2D que va desde 0 hasta 1 en cada dimensión, y se puede utilizar para mapear texturas en una malla.

    Aquí tienes una versión actualizada del vertex shader que utiliza uv para calcular el degradado:

    varying vec2 vUv;

void main() {

  vUv = uv;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

    Al asignar vUv = uv, estamos básicamente mapeando las coordenadas x e y del vértice en las coordenadas u y v del vector uv. Ahora vUv variará suavemente de 0 a 1 a medida que el vértice se mueva a lo largo de la superficie del cubo, creando el efecto degradado deseado.

    Puedes utilizar este vertex shader actualizado en tu código sandbox reemplazando el existente con esta versión.

Comments are closed.