CODEWITHSUNDEEP
three.jswebgl
olov
olov

Reputation: 23

Build phong shader from THREE.ShaderLib

I'm trying to build the phong shader from THREE.ShaderLib. This is what I got:

var phongShader = THREE.ShaderLib.phong;
var uniforms = THREE.UniformsUtils.clone(phongShader.uniforms);

material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: phongShader.vertexShader,
  fragmentShader: phongShader.fragmentShader
});

It doesn't seem to work. What am I doing wrong?

Fiddle: http://jsfiddle.net/Jvf9k/2/ Similar SO question: Three js - Cloning a shader and changing uniform values

Edit: Updated the fiddle with the help of Tapio answer. It now works!

Upvotes: 2

Views: 3527

Answers (2)

user2465214
user2465214

Reputation: 56

add lights and fog:

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

Upvotes: 1

Tapio
Tapio

Reputation: 3456

Your JSFiddle is using THREE.CanvasRenderer which doesn't (and can't) support shader materials (but can support the built-in materials). Change that to THREE.WebGLRenderer. Also, it doesn't make sense to use phong material without lights as the result will be all black. Phong with wireframe doesn't sound very useful either.

Upvotes: 2

Related Questions