How to use the PCFSoftShadowMap function from three
Find comprehensive JavaScript three.PCFSoftShadowMap code examples handpicked from public code repositorys.
In the Three.js library for JavaScript, THREE.PCFSoftShadowMap is a type of shadow map that provides high-quality, soft shadows with smooth edges.
GitHub: ASSERT-KTH/ci-hackathon
279 280 281 282 283 284 285 286 287
renderer.toneMappingExposure = Math.pow(0.7, 2.0); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; var clock = new THREE.Clock(); function animate() {
+ 2 other calls in file
14 15 16 17 18 19 20 21 22 23
this.renderer.physicallyCorrectLights = true; this.renderer.gammaInput = true; this.renderer.gammaOutput = true; this.renderer.gammaFactor = 2.2; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.toneMapping = THREE.ReinhardToneMapping; // this.renderer.shadowMap.enabled = true;
How does three.PCFSoftShadowMap work?
THREE.PCFSoftShadowMap
is a type of shadow map in the Three.js library for JavaScript that provides high-quality, soft shadows with smooth edges.
When THREE.PCFSoftShadowMap
is used as the shadowMap
property of a THREE.WebGLRenderer
object, it performs the following operations:
- It generates a shadow map for each light that casts shadows in the scene.
- The shadow map is a texture that represents the depth values of the objects that cast shadows.
- When rendering the scene, the renderer samples the shadow map to determine whether each pixel is in shadow or not.
- The samples are weighted based on their distance from the object being shaded, which creates soft shadows with smooth edges.
- The weighting function is based on a Poisson distribution, which provides a good balance between quality and performance.
- The resulting shadows are high-quality, with smooth edges and a natural appearance.
By using THREE.PCFSoftShadowMap
, developers can add high-quality shadows to their Three.js scenes that look more realistic and natural than simple, hard-edged shadows. Note that THREE.PCFSoftShadowMap
can be more computationally expensive than other types of shadow maps, so it should be used judiciously to avoid performance issues.
GitHub: kevin-roark/gob-blender
![kevin-roark profile picture](/kevin-roark.png?size=40)
29 30 31 32 33 34 35 36 37 38
} if (this.renderer) { this.renderer.shadowMapEnabled = true; this.renderer.shadowMapCullFace = THREE.CullFaceBack; this.renderer.shadowMapType = THREE.PCFSoftShadowMap; this.renderer.gammaInput = true; this.renderer.gammaOutput = true; }
13630 13631 13632 13633 13634 13635 13636 13637 13638 13639
preserveDrawingBuffer: true // required to support .toDataURL() }); renderer.autoClear = false, renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; var skybox = new ThreeSkybox(scene); scope.controls = new ThreeControls(camera, domElement);
+ 13 other calls in file
Ai Example
1 2 3
const renderer = new THREE.WebGLRenderer(); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
In this example, we're creating a new THREE.WebGLRenderer object and enabling the shadowMap feature by setting the enabled property to true. We're also setting the type property of the shadowMap to THREE.PCFSoftShadowMap, which tells Three.js to use the PCFSoftShadowMap type of shadow map. Once the renderer is configured in this way, any lights in the scene that are set up to cast shadows will automatically use THREE.PCFSoftShadowMap to generate high-quality, soft shadows with smooth edges. Note that you may need to adjust the properties of the light and the objects in the scene to get the desired shadow effects.
GitHub: ryo612/rhinestone
141 142 143 144 145 146 147 148 149
const renderer = new THREE.WebGLRenderer({ context, alpha: true, }); renderer.context.getExtension('EXT_shader_texture_lod'); //renderer.setClearColor(0xf7f7f7, 1); renderer.setClearColor(0x000000, 1); renderer.shadowMap.enabled = true; //renderer.shadowMap.type = THREE.PCFSoftShadowMap; const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 10000); camera.position.set(0, 0, 100);
+ 3 other calls in file
GitHub: PSkinnerTech/obscurus
67 68 69 70 71 72 73 74 75 76
// transparent : true, // premultipliedAlpha : false, antialias : true }); _renderer.setClearColor(settings.bgColor); _renderer.shadowMap.type = THREE.PCFSoftShadowMap; _renderer.shadowMap.enabled = true; document.body.appendChild(_renderer.domElement); _scene = new THREE.Scene();
+ 2 other calls in file
GitHub: Neticon/webgl-tests
![Neticon profile picture](/Neticon.png?size=40)
35 36 37 38 39 40 41 42 43
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement) renderer.setClearColor(0x202020) renderer.setSize(WIDTH, HEIGHT) renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap document.body.appendChild(renderer.domElement) scene.fog = new THREE.FogExp2(0xffffff, 0)
+ 2 other calls in file
three.Vector3 is the most popular function in three (22341 examples)