Skip to content

Instantly share code, notes, and snippets.

@wmcmurray
Last active November 5, 2023 06:36
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save wmcmurray/6696fc95f25bbd2401d72a74e9493261 to your computer and use it in GitHub Desktop.
Save wmcmurray/6696fc95f25bbd2401d72a74e9493261 to your computer and use it in GitHub Desktop.
A basic example of a ThreeJS (r108) ShaderMaterial with shadows, fog and dithering support.
import { mergeUniforms } from 'three/src/renderers/shaders/UniformsUtils.js'
import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js'
export default {
uniforms: mergeUniforms([
UniformsLib.lights,
UniformsLib.fog,
]),
vertexShader: `
#include <common>
#include <fog_pars_vertex>
#include <shadowmap_pars_vertex>
void main() {
#include <begin_vertex>
#include <project_vertex>
#include <worldpos_vertex>
#include <shadowmap_vertex>
#include <fog_vertex>
}
`,
fragmentShader: `
#include <common>
#include <packing>
#include <fog_pars_fragment>
#include <bsdfs>
#include <lights_pars_begin>
#include <shadowmap_pars_fragment>
#include <shadowmask_pars_fragment>
#include <dithering_pars_fragment>
void main() {
// CHANGE THAT TO YOUR NEEDS
// ------------------------------
vec3 finalColor = vec3(0, 0.75, 0);
vec3 shadowColor = vec3(0, 0, 0);
float shadowPower = 0.5;
// ------------------------------
// it just mixes the shadow color with the frag color
gl_FragColor = vec4( mix(finalColor, shadowColor, (1.0 - getShadowMask() ) * shadowPower), 1.0);
#include <fog_fragment>
#include <dithering_fragment>
}
`
};
import BasicCustomShader from 'BasicCustomShader.js'
// and here is how to create the material
const material = new THREE.ShaderMaterial({
...BasicCustomShader,
fog: true,
lights: true,
dithering: true,
});
// PS : you should also set `receiveShadow = true` on your mesh !
@pinkli
Copy link

pinkli commented Jun 29, 2023

add this includes to the vertex shader

#include <begin_vertex>

#include <beginnormal_vertex>     // Defines objectNormal

#include <project_vertex>

#include <worldpos_vertex>

#include <defaultnormal_vertex>   // Defines transformedNormal

#include <shadowmap_vertex>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment