CODEWITHSUNDEEP
javascriptjsonthree.jswebgl
Soumitra
Soumitra

Reputation: 21

THREE.js use background material

My goal is to composite 3D objects onto a panorama. I have got the objects in and have lined them up fine with the correct perspective. What i need is a way to implement a useBackground shader you see in softwares like Maya and Max into three.js.

To be more clear, I want to get the shadow cast onto a proxy ground I have created. The ground should not be visible but the shadow cast on it should be visible. If you can help me or guide me to the right direction. Do I need to create a custom shader or is there a way already to render only the shadow cast on the object.

Upvotes: 0

Views: 554

Answers (2)

Soumitra
Soumitra

Reputation: 21

Ok I found the solution from the Internet :P. I had to create a shader where I the shadowColor is subtracted from the alpha of the GL_FragColor

here is the code for the fragment shader . You can use the vertex shader from the BasicMaterial.

planeFragmentShader = [

            "uniform vec3 diffuse;",
            "uniform float opacity;",

            THREE.ShaderChunk["color_pars_fragment"],
            THREE.ShaderChunk["map_pars_fragment"],
            THREE.ShaderChunk["lightmap_pars_fragment"],
            THREE.ShaderChunk["envmap_pars_fragment"],
            THREE.ShaderChunk["fog_pars_fragment"],
            THREE.ShaderChunk["shadowmap_pars_fragment"],
            THREE.ShaderChunk["specularmap_pars_fragment"],

            "void main() {",

            "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );",

            THREE.ShaderChunk["map_fragment"],
            THREE.ShaderChunk["alphatest_fragment"],
            THREE.ShaderChunk["specularmap_fragment"],
            THREE.ShaderChunk["lightmap_fragment"],
            THREE.ShaderChunk["color_fragment"],
            THREE.ShaderChunk["envmap_fragment"],
            THREE.ShaderChunk["shadowmap_fragment"],
            THREE.ShaderChunk["linear_to_gamma_fragment"],
            THREE.ShaderChunk["fog_fragment"],

            "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 - shadowColor.x );",

            "}"
        ].join("\n")

Upvotes: 0

03civic
03civic

Reputation: 111

The three.js skinning example uses a shadow like that. Make sure that the objects have their castShadow properties set to true and that the lights are in the right place. http://threejs.org/examples/webgl_animation_skinning_morph.html

// GROUND

var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );

var ground = new THREE.Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );

ground.receiveShadow = true;

Upvotes: 1

Related Questions