Buckets:
ktongue/docker_container / simsite /frontend /node_modules /three-stdlib /cameras /CinematicCamera.js
| import { PerspectiveCamera, ShaderMaterial, Scene, OrthographicCamera, WebGLRenderTarget, UniformsUtils, Mesh, PlaneGeometry } from "three"; | |
| import { BokehDepthShader, BokehShader2 } from "../shaders/BokehShader2.js"; | |
| class CinematicCamera extends PerspectiveCamera { | |
| constructor(fov, aspect, near, far) { | |
| super(fov, aspect, near, far); | |
| this.type = "CinematicCamera"; | |
| this.postprocessing = { enabled: true }; | |
| this.shaderSettings = { | |
| rings: 3, | |
| samples: 4 | |
| }; | |
| const depthShader = BokehDepthShader; | |
| this.materialDepth = new ShaderMaterial({ | |
| uniforms: depthShader.uniforms, | |
| vertexShader: depthShader.vertexShader, | |
| fragmentShader: depthShader.fragmentShader | |
| }); | |
| this.materialDepth.uniforms["mNear"].value = near; | |
| this.materialDepth.uniforms["mFar"].value = far; | |
| this.setLens(); | |
| this.initPostProcessing(); | |
| } | |
| // providing fnumber and coc(Circle of Confusion) as extra arguments | |
| setLens(focalLength, filmGauge, fNumber, coc) { | |
| if (focalLength === void 0) | |
| focalLength = 35; | |
| if (filmGauge !== void 0) | |
| this.filmGauge = filmGauge; | |
| this.setFocalLength(focalLength); | |
| if (fNumber === void 0) | |
| fNumber = 8; | |
| if (coc === void 0) | |
| coc = 0.019; | |
| this.fNumber = fNumber; | |
| this.coc = coc; | |
| this.aperture = focalLength / this.fNumber; | |
| this.hyperFocal = focalLength * focalLength / (this.aperture * this.coc); | |
| } | |
| linearize(depth) { | |
| const zfar = this.far; | |
| const znear = this.near; | |
| return -zfar * znear / (depth * (zfar - znear) - zfar); | |
| } | |
| smoothstep(near, far, depth) { | |
| const x = this.saturate((depth - near) / (far - near)); | |
| return x * x * (3 - 2 * x); | |
| } | |
| saturate(x) { | |
| return Math.max(0, Math.min(1, x)); | |
| } | |
| // function for focusing at a distance from the camera | |
| focusAt(focusDistance) { | |
| if (focusDistance === void 0) | |
| focusDistance = 20; | |
| const focalLength = this.getFocalLength(); | |
| this.focus = focusDistance; | |
| this.nearPoint = this.hyperFocal * this.focus / (this.hyperFocal + (this.focus - focalLength)); | |
| this.farPoint = this.hyperFocal * this.focus / (this.hyperFocal - (this.focus - focalLength)); | |
| this.depthOfField = this.farPoint - this.nearPoint; | |
| if (this.depthOfField < 0) | |
| this.depthOfField = 0; | |
| this.sdistance = this.smoothstep(this.near, this.far, this.focus); | |
| this.ldistance = this.linearize(1 - this.sdistance); | |
| this.postprocessing.bokeh_uniforms["focalDepth"].value = this.ldistance; | |
| } | |
| initPostProcessing() { | |
| if (this.postprocessing.enabled) { | |
| this.postprocessing.scene = new Scene(); | |
| this.postprocessing.camera = new OrthographicCamera( | |
| window.innerWidth / -2, | |
| window.innerWidth / 2, | |
| window.innerHeight / 2, | |
| window.innerHeight / -2, | |
| -1e4, | |
| 1e4 | |
| ); | |
| this.postprocessing.scene.add(this.postprocessing.camera); | |
| this.postprocessing.rtTextureDepth = new WebGLRenderTarget(window.innerWidth, window.innerHeight); | |
| this.postprocessing.rtTextureColor = new WebGLRenderTarget(window.innerWidth, window.innerHeight); | |
| const bokeh_shader = BokehShader2; | |
| this.postprocessing.bokeh_uniforms = UniformsUtils.clone(bokeh_shader.uniforms); | |
| this.postprocessing.bokeh_uniforms["tColor"].value = this.postprocessing.rtTextureColor.texture; | |
| this.postprocessing.bokeh_uniforms["tDepth"].value = this.postprocessing.rtTextureDepth.texture; | |
| this.postprocessing.bokeh_uniforms["manualdof"].value = 0; | |
| this.postprocessing.bokeh_uniforms["shaderFocus"].value = 0; | |
| this.postprocessing.bokeh_uniforms["fstop"].value = 2.8; | |
| this.postprocessing.bokeh_uniforms["showFocus"].value = 1; | |
| this.postprocessing.bokeh_uniforms["focalDepth"].value = 0.1; | |
| this.postprocessing.bokeh_uniforms["znear"].value = this.near; | |
| this.postprocessing.bokeh_uniforms["zfar"].value = this.near; | |
| this.postprocessing.bokeh_uniforms["textureWidth"].value = window.innerWidth; | |
| this.postprocessing.bokeh_uniforms["textureHeight"].value = window.innerHeight; | |
| this.postprocessing.materialBokeh = new ShaderMaterial({ | |
| uniforms: this.postprocessing.bokeh_uniforms, | |
| vertexShader: bokeh_shader.vertexShader, | |
| fragmentShader: bokeh_shader.fragmentShader, | |
| defines: { | |
| RINGS: this.shaderSettings.rings, | |
| SAMPLES: this.shaderSettings.samples, | |
| DEPTH_PACKING: 1 | |
| } | |
| }); | |
| this.postprocessing.quad = new Mesh( | |
| new PlaneGeometry(window.innerWidth, window.innerHeight), | |
| this.postprocessing.materialBokeh | |
| ); | |
| this.postprocessing.quad.position.z = -500; | |
| this.postprocessing.scene.add(this.postprocessing.quad); | |
| } | |
| } | |
| renderCinematic(scene, renderer) { | |
| if (this.postprocessing.enabled) { | |
| const currentRenderTarget = renderer.getRenderTarget(); | |
| renderer.clear(); | |
| scene.overrideMaterial = null; | |
| renderer.setRenderTarget(this.postprocessing.rtTextureColor); | |
| renderer.clear(); | |
| renderer.render(scene, this); | |
| scene.overrideMaterial = this.materialDepth; | |
| renderer.setRenderTarget(this.postprocessing.rtTextureDepth); | |
| renderer.clear(); | |
| renderer.render(scene, this); | |
| renderer.setRenderTarget(null); | |
| renderer.render(this.postprocessing.scene, this.postprocessing.camera); | |
| renderer.setRenderTarget(currentRenderTarget); | |
| } | |
| } | |
| } | |
| export { | |
| CinematicCamera | |
| }; | |
| //# sourceMappingURL=CinematicCamera.js.map | |
Xet Storage Details
- Size:
- 5.51 kB
- Xet hash:
- f2e8c760cece15d922d746ca25799d9764506ac419a7a7607149f0dcbedcc63c
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.