three.js - examples - ThreeJS atributos/uniformes de sombreado predefinidos

three.js tutorial

Question

Comencé con el renderizador WebGL de ThreeJS después de hacer un WebGL "normal" sin bibliotecas adicionales + sombreadores GLSL. Estoy tratando de escribir sombreadores personalizados ahora en mi programa ThreeJS y noté que ThreeJS se encarga de muchas cosas estándar, como las matrices de proyección y modelo / vista. Mi simple sombreador de vértices ahora se ve así:

// All of these seem to be predefined:
// vec3 position;
// mat4 projectionMatrix;
// mat4 modelViewMatrix;
// mat3 normalMatrix;
// vec3 normal;

// I added this
varying vec3 vNormal;

void main() {
    vNormal = normalMatrix * vec3(normal);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Mi pregunta es: ¿Qué otras variables (supongo que son uniformes) están predefinidas para los sombreadores de vértices y fragmentos que podría usar? ¿Ayuda ThreeJS con vectores de luz / color de luz por ejemplo (por supuesto, asumiendo que he agregado una o más luces a mi escena ThreeJS)?

Actualización (9 de octubre de 2014): Esta pregunta ha tenido varias visitas y el usuario Killah mencionó que las respuestas existentes ya no conducían a una solución con la versión actual de three.js. Agregué y acepté mi propia respuesta, véala abajo.

Answer 1

Ahora puede encontrar una respuesta a esta pregunta en la documentación de three.js: https://threejs.org/docs/#api/renderers/webgl/WebGLProgram

Answer 2

Esta pregunta ha tenido varias visitas y el usuario Killah mencionó que las respuestas existentes ya no conducían a una solución con la versión actual de three.js. Esta es la razón por la que intenté resolver el problema nuevamente, y me gustaría describir un par de opciones que encontré:

• La forma más rápida y sencilla (aunque no es muy elegante) es simplemente colocar un error aleatorio en su sombreado. Recibirá un error de consola con el código completo del sombreador, incluido todo lo que agrega three.js.

• La mejor solución es generar la fuente del sombreador desde donde se compila, es decir, THREE.WebGLShader (a partir de la versión actual de three.js, r68). He hecho una copia y pegado rápido que debería generar todos los orígenes de sombreado antes de compilarlos.

  Agregue esto después de incluir three.js y antes de su propio código:

  THREE.WebGLShader = ( function () {
      var addLineNumbers = function ( string ) {
          var lines = string.split( ''/n'' );
          for ( var i = 0; i < lines.length; i ++ ) {
              lines[ i ] = ( i + 1 ) + '': '' + lines[ i ];
          }
          return lines.join( ''/n'' );
      };
      return function ( gl, type, string ) {
          var shader = gl.createShader( type ); 
          console.log(string);
          gl.shaderSource( shader, string );
          gl.compileShader( shader );
          if ( gl.getShaderParameter( shader, gl.COMPILE_STATUS ) === false ) {
              console.error( ''THREE.WebGLShader: Shader couldn/'t compile.'' );
          }
          if ( gl.getShaderInfoLog( shader ) !== '''' ) {
              console.warn( ''THREE.WebGLShader: gl.getShaderInfoLog()'', gl.getShaderInfoLog( shader ) );
              console.warn( addLineNumbers( string ) );
          }
          return shader;
      };
  } )();

  Tenga en cuenta que este fragmento solo se copia (y se modifica muy ligeramente) de las fuentes three.js y se debe eliminar antes de usar el código. Sólo para la depuración!

• Hay una opción más que es menos invasiva: puede inspeccionar su ShaderMaterial después de crearlo y procesarlo al menos una vez, de esta manera:

  var material = new THREE.ShaderMaterial({
      uniforms: {
          uColorMap: { type: ''t'', value: THREE.ImageUtils.loadTexture(''./img/_colors.png'') },
          uSpecularMap: { type: ''t'', value: THREE.ImageUtils.loadTexture(''./img/_spec.png'') }, 
          uNormalMap: { type: ''t'', value: THREE.ImageUtils.loadTexture(''./img/_normal.png'') }
      },
      vertexShader: document.getElementById(''vShader'').innerText,
      fragmentShader: document.getElementById(''fShader'').innerText
  });

  Luego, después de renderizar el objeto al menos una vez:

  console.log(material.program.attributes);
  console.log(material.program.uniforms);

Espero que esto ayude a todos! Siéntase libre de agregar sus comentarios si sabe más y / o mejores maneras de obtener su código de sombreado.

Answer 3

Los uniformes que puede usar en sus sombreadores dependen de cómo configure su material: ¿ha habilitado las luces? colores de vértice? desollar? ...

Three JS crea un programa que depende en gran medida de algunas definiciones (#ifdef en el código) que se inyectan en la parte superior del programa en función de los parámetros de los que he hablado anteriormente.

Descubrí que la mejor manera de saber qué sucede es imprimir los sombreadores que generan tres JS: como ya sabe GLSL, comprenderá fácilmente qué significa el código y qué uniformes puede usar. Busque buildProgram en tres fuentes JS, luego (r57):

var glFragmentShader = getShader( "fragment", prefix_fragment + fragmentShader );
var glVertexShader = getShader( "vertex", prefix_vertex + vertexShader );

Después de esas líneas, agregue:

console.log("fragment shader:", prefix_fragment + fragmentShader);
console.log("vertex shader:", prefix_vertex + vertexShader);

Y podrás ver el contenido de los shaders.

[EDITAR] Al releer tu pregunta, me doy cuenta de que respondí un poco, mientras creas tus propios sombreadores ...

Puede ver las líneas 6463 y 6490 de WebGLRenderer ( https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L6463 ): verá uniformes / atributos estándar que Tres JS inyectan en tus shaders. Puede echar un vistazo a la Wiki donde tiene una entrada al respecto ( https://github.com/mrdoob/three.js/wiki - ¿Qué atributos / uniformes / variaciones predeterminados están disponibles en sombreadores personalizados?) Pero lo dirige a usted a las líneas que he esbozado arriba.

Answer 4

Para los uniformes, la respuesta corta es la siguiente:

En el vértice shader

"uniform mat4 modelMatrix;",
"uniform mat4 modelViewMatrix;",
"uniform mat4 projectionMatrix;",
"uniform mat4 viewMatrix;",
"uniform mat3 normalMatrix;",
"uniform vec3 cameraPosition;",

y en el fragmento shader

"uniform mat4 viewMatrix;",
"uniform vec3 cameraPosition;",

Para la respuesta completa, que involucra uniformes y atributos, sus sombreadores personalizados tienen las variables de cadena prefixVertex y prefixFragment pre-anexadas.

var vertexGlsl = prefixVertex + vertexShader;
var fragmentGlsl = prefixFragment + fragmentShader;

var glVertexShader = THREE.WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
var glFragmentShader = THREE.WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl );

Las definiciones de las variables prefixVertex y prefixFragment se pueden encontrar en WebGLProgram.js o en la versión no minificada de three.js .

EDITAR: Actualizado a three.js r.73