- Une liste de sommets
- Une liste d'attributs (couleurs, normales...)
- Des relations d'adjacence
- + autres... (caméras, lumières, textures...)
Une grille 2D de pixels
Le principe est de créer un materiau et d'ecrire les programmes correspondant pour changer l'execution du pipeline
Un style de materiau : MeshShaderMaterial
var shaderMaterial = new THREE.MeshShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
En WebGL, il est obligatoire de définir un vertex et un fragment program (Three.js le fait pour les matériaux utilisés jusqu'a présent)
Plus d'information sur la carte de réference rapide WebGL
Que faire avec ces shaders ?
Si on ne fait pas la projection, on ne voit pas grand chose
Commençons par simuler le pipeline fixe : le matériau MeshBasicMaterial
void main() {
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}
void main() {
// définir la couleur sous la forme RGBA (0.0 - 1.0)
gl_FragColor = vec4(0.0,0.5,0.5,1.0);
}
var myUniforms =
{
color :
{
type :'c', // une couleur
value : new THREE.Color( 0xffffff )
},
}
var material = new THREE.ShaderMaterial( {
uniforms : myUniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
myUniforms.color.value = new THREE.Color(value);
myAttributes =
{
amplitude: {
type: 'f',
value: [] // un tableau vide
}
var verts =
mesh.geometry.vertices; // Trouver le nombre de sommets
var values =
attributes.amplitude.value; // récupérer le pointeur sur le tableau
for(var v = 0; v < verts.length; v++) { // remplir le tableau de valeurs aléatoires
values.push(Math.random() * 0.01);
}
attribute float amplitude;
void main() {
vec3 myPosition = position + normal*amplitude;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(myPosition,1.0);
}
uniform float multiplicateur; // entre -1 et 1
void main() {
vec3 myPosition = position + normal*multiplicateur;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(myPosition,1.0);
}
void main() {
gl_FragColor = vec4(gl_FragCoord.xy*0.001,0.5,1.0);
}