Three.js: Using custom Vertex Shader with MeshLambertMaterial?

Created on 2 Dec 2011  ·  9Comments  ·  Source: mrdoob/three.js

Hi I'm trying to do some kind of a custom shader, but I just want to modify the vertex position and not the material. MeshLambert already have light, texture and everything that I need, but I do modify the vertex do give an organic look do the object.

Someone can give me a direction?

Thanks !!

Question

Most helpful comment

@maurrubio did you finish your project :eyes:

All 9 comments

Someone?

The easiest would be to create custom ShaderMaterial that would be like lambert, just adding your custom code to vertex shader.

Internally, standard materials use exactly the same machinery as ShaderMaterial, so you would just need to copy and paste code from here:

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1187

Hi @alteredq thanks for responding.

This is what you've refereed to?
http://www.interactiveuniverse.net/Shaders.js

I'm creating objects from the arrays that are provided in the lambert shader and passing them to a new ShaderMaterial instance.

Doing that I just get a black material without being affected by point lights.

Almost there ;)

For features from standard materials to work in ShaderMaterial you need also to set material flags (lights, fog, etc):

https://github.com/mrdoob/three.js/blob/master/src/materials/ShaderMaterial.js#L40

shaderMaterial = new THREE.ShaderMaterial( {

    uniforms:       uniforms,
    vertexShader:   vertexShader,
    fragmentShader: fragmentShader,
    lights:         true
    }); 

It worked !!! Thank you so much, when I finish my work I will share with you guys.

Just one last question @alteredq the purpose of doing that was also using a environment map in the object so I can give it a texture. How I'm suppose to implement this kind of feature that MeshLambertMaterial contains?

Hmmm. I think it should be enough to set proper uniform (envMap) and also you would need to stick somewhere at the top of both vertex and fragment shaders #define USE_ENVMAP .

uniforms[ "envMap" ].texture = myCubeTexture;
vertexShader= [

"#define USE_ENVMAP",

"varying vec3 vLightWeighting;",

THREE.ShaderChunk[ "map_pars_vertex" ],
THREE.ShaderChunk[ "lightmap_pars_vertex" ],

...
fragmentShader = [

"#define USE_ENVMAP",

"uniform float opacity;",

...

Just be aware that if you modify vertex positions in a shader, normals coming from static geometry will not be anymore correct and everything will be still shaded according to old positions.

It worked :D

You guys are really amazing, and I know that devs love to see what other people do with their tools, I hope I can finish my project soon ( It's my personal portfólio and I'm using websockets to connect users in a space interface with spheres ( each is a different project ) and users navigate through the space and each user is a different dynamic point light that moves across my works.

The engine is pretty functional now I need to work more on designing the stuff.

Thanks you again !

@maurrubio did you finish your project :eyes:

Was this page helpful?
0 / 5 - 0 ratings