Trzy js - Klonowanie modułu cieniującego i zmiana wartości jednolitych

Question

Pracuję nad utworzeniem modułu cieniującego do generowania terenu za pomocą cieni.

Moim początkiem jest sklonowanie modułu cieniującego Lamberta i użycie ShaderMaterial w celu ostatecznego dostosowania go za pomocą własnego skryptu.

Standardowa metoda działa dobrze:

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

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

etc 

Rezultat:

Jednakże chciałbym użyć materiału Lambert jako baza i pracy na wierzchu, więc próbowałem to :

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

wynik dla tego:

Wygląda na to, że moduł cieniujący nie bierze pod uwagę nowej tekstury, którą dodałem, jednak patrząc na inspektora po zalogowaniu się w mundurach, obiekt mapy ma poprawne wartości.

Jestem całkiem nowy dla trzech osób, więc mógłbym zrobić coś zasadniczo złego, jeśli ktoś mógłby wskazać mi właściwy kierunek, byłoby wspaniale.

Mogę też umieścić linki demo, jeśli byłoby to pomocne?

Dzięki Will

EDIT:

Oto kilka linków demo.

Demo z materiałem shaderów: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-shader-material.html

Demo z materiałem roboczym lambert: http://dev.thinkjam.com/experiments/threejs/terrain/terrain-lambert-material.html

Answer 1

Powód to nie poskutkuje jest domyślnym Three.js Lambert shader używa makra preprocesora dyrektywę #ifdef celu ustalenia, czy używać mapy, envmaps, lightmapy itp itd

Three.js WebGLRenderer ustawia odpowiednich dyrektyw preprocesora (#define), aby włączyć te kawałki shaderów na podstawie tego, czy istnieją pewne właściwości materiału obiekt.

Jeśli używasz podejścia polegającego na klonowaniu & modyfikując domyślne shadery, będziesz musiał ustawić odpowiednie właściwości na materiale. Na mapach tekstur, Three.js WebGLRenderer.js ma ten wiersz:

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

Więc spróbuj ustawić material.map = true; dla materiału shader.

Oczywiście, jeśli wiesz, że zamierzasz pisać swój własny moduł cieniujący i nie potrzebujesz dynamicznej integracji różnych fragmentów modułów cieniujących, możesz po prostu napisać moduł cieniujący jawnie i nie będziesz musiał się martwić to.