Last active
September 21, 2024 13:44
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
} | |
` | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ! |
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>
This does not seem to work anymore
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks a lot this is super helpful!
i tried to run it with r147 and i get:
any advice?