Skip to content

Instantly share code, notes, and snippets.

@ayamflow

ayamflow/shadowMaterial.js

Created August 25, 2015 05:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ayamflow/93aba91065c2b9750f4f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ayamflow/93aba91065c2b9750f4f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ayamflow renamed this gist Aug 25, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → shadowMaterial.js
    View file
    File renamed without changes.
  2. ayamflow created this gist Aug 25, 2015.
    48 changes: 48 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    // Minimal version of MeshBasicMaterial
    // But removed everything except shadow
    // then only render the shadow

    var shadowMaterial = {
    transparent: true,
    uniforms: THREE.UniformsUtils.merge([
    THREE.UniformsLib['common'],
    THREE.UniformsLib['shadowmap']
    ]),

    vertexShader: [
    THREE.ShaderChunk['shadowmap_pars_vertex'],
    'void main() {',
    THREE.ShaderChunk['default_vertex'],
    THREE.ShaderChunk['worldpos_vertex'],
    THREE.ShaderChunk['shadowmap_vertex'],
    '}'
    ].join('\n'),

    fragmentShader: [
    'uniform vec3 diffuse;',
    'uniform float opacity;',
    THREE.ShaderChunk['shadowmap_pars_fragment'],

    'void main() {',
    ' gl_FragColor = vec4( diffuse, opacity );',
    THREE.ShaderChunk['shadowmap_fragment'],
    ' if (gl_FragColor.r == diffuse.r) discard;',
    ' gl_FragColor = vec4(vec3(0.0), opacity);',
    '}'
    ].join('\n')
    };

    // And the mesh

    var mesh = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(128, 128),
    new THREE.ShaderMaterial(shadowShader)
    );

    // Changing color and opacity...
    mesh.material.uniforms.diffuse.value = new THREE.Color(0xff00ff);
    mesh.material.uniforms.opacity.value = 0.05;
    mesh.material.needsUpdate = true;

    // Don't forget this one
    mesh.receiveShadow = true;