Drei js - Einen Shader klonen und einheitliche Werte ändern

Question

Ich arbeite an der Erstellung eines Shaders, um Gelände mit Schatten zu erzeugen.

Mein Ausgangspunkt ist, den Lambert Shader zu klonen und ein ShaderMaterial zu verwenden, um es schließlich mit meinem eigenen Skript anzupassen.

Die Standard-Methode funktioniert gut:

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

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

etc 

Das Ergebnis:

aber ich möchte das lambert Material als Basis und Arbeit auf es zu benutzen, so habe ich versucht, diese :

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); 

Das Ergebnis für diese:

Es sieht so aus, als ob der Shader die neue Textur, die ich hinzugefügt habe, nicht berücksichtigt, aber wenn ich die Inspektoren anschaue, wenn ich die Uniformen protokolliert habe, hat das Map-Objekt die korrekten Werte.

Ich bin ziemlich neu zu drei, also könnte ich etwas fundamental falsch machen, wenn mir jemand hier in die richtige Richtung zeigen könnte, das wäre toll.

Ich kann auch Demo-Links aufstellen, wenn das hilfreich wäre?

Danke, Will

EDIT:

Hier sind einige Demo-Links.

Demo mit Shader Material: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

Demo mit Arbeits lambert Material: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

Der Grund dies nicht funktioniert, ist der Standard-Three.js lambert Shader verwendet die Präprozessormakro Richtlinie #ifdef, um festzustellen, ob Verwenden Sie Maps, Envmaps, Lightmaps usw. usw.

Der Three.js WebGLRenderer legt die entsprechenden Präprozessordirektiven (#define) fest, um diese Teile der Shader basierend darauf zu aktivieren, ob bestimmte Eigenschaften im Material vorhanden sind Objekt.

Wenn Sie den Ansatz des Klonens & modifizieren die Standard-Shader ändern, müssen Sie relevante Eigenschaften für das Material festlegen. Für Texturkarten, hat die Three.js WebGLRenderer.js diese Zeile:

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

versuchen So material.map = true; für Ihre Shader Material einstellen.

Natürlich, wenn Sie wissen, dass Sie Ihren eigenen Shader schreiben werden und Sie nicht die dynamische Einbindung verschiedener Shader-Snippets benötigen, können Sie den Shader explizit schreiben und Sie müssen sich keine Sorgen machen Dies.