Three js - Clonazione di uno shader e modifica dei valori uniformi

Question

Sto lavorando alla creazione di uno shader per generare il terreno con le ombre.

Il mio punto di partenza è clonare lo shader lambert e utilizzare uno ShaderMaterial per eventualmente personalizzarlo con il mio script.

Il metodo standard funziona bene:

var material = new MeshLambertMaterial({map:THREE.ImageUtils.loadTexture('images/texture.jpg')}); 

var mesh = new THREE.Mesh(geometry, material); 

etc 

Il risultato:

Tuttavia Vorrei utilizzare il materiale Lambert come base e lavorare su di esso, così ho provato questo :

var lambertShader = THREE.ShaderLib['lambert']; 
var uniforms = THREE.UniformsUtils.clone(lambertShader.uniforms); 

var texture = THREE.ImageUtils.loadTexture('images/texture.jpg'); 
uniforms['map'].texture = texture; 

var material = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: lambertShader.vertexShader, 
    fragmentShader: lambertShader.fragmentShader, 
    lights:true, 
    fog: true 
}); 

var mesh = new THREE.Mesh(geometry, material); 

Il risultato per questo uno:

Sembra che lo shader non tenga conto della nuova texture che ho aggiunto, tuttavia guardando l'ispettore quando ho registrato le uniformi, l'oggetto della mappa ha i valori corretti.

Sono quasi nuovo a tre quindi potrei fare qualcosa di fondamentalmente sbagliato, se qualcuno potesse indicarmi la giusta direzione qui, sarebbe fantastico.

Posso anche aggiungere collegamenti dimostrativi se ciò sarebbe utile?

Grazie, Will

EDIT:

Ecco alcuni link demo.

demo con materiale Shader: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

Demo con il lavoro materiale Lambert: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

La ragione per cui questo non funziona è lo shader di default Three.js Lambert utilizza il preprocessore macro direttiva #ifdef per determinare se utilizzare mappe, envmaps, mappe di luce, ecc.

Il WebGLRenderer Three.js imposta le direttive di preprocessore appropriate (#define) per abilitare queste parti degli shader in base alla presenza di determinate proprietà sul materiale oggetto.

Se si sta impostando l'approccio alla clonazione di & modificando gli shader predefiniti, sarà necessario impostare proprietà pertinenti sul materiale. Per le mappe di texture, il Three.js WebGLRenderer.js ha questa linea:

parameters.map ? "#define USE_MAP" : "" 

in modo da provare l'impostazione material.map = true; per il vostro materiale shader.

Naturalmente, se sai che stai scrivendo il tuo shader e non hai bisogno dell'inclusione dinamica di vari frammenti di shader, puoi semplicemente scrivere lo shader in modo esplicito e non dovrai preoccuparti di Questo.