three#NoBlending JavaScript Examples
The following examples show how to use
three#NoBlending.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BokehPass.js From Computer-Graphics with MIT License | 5 votes |
|
constructor( scene, camera, params ) {
super();
this.scene = scene;
this.camera = camera;
const focus = ( params.focus !== undefined ) ? params.focus : 1.0;
const aspect = ( params.aspect !== undefined ) ? params.aspect : camera.aspect;
const aperture = ( params.aperture !== undefined ) ? params.aperture : 0.025;
const maxblur = ( params.maxblur !== undefined ) ? params.maxblur : 1.0;
// render targets
const width = params.width || window.innerWidth || 1;
const height = params.height || window.innerHeight || 1;
this.renderTargetDepth = new WebGLRenderTarget( width, height, {
minFilter: NearestFilter,
magFilter: NearestFilter
} );
this.renderTargetDepth.texture.name = 'BokehPass.depth';
// depth material
this.materialDepth = new MeshDepthMaterial();
this.materialDepth.depthPacking = RGBADepthPacking;
this.materialDepth.blending = NoBlending;
// bokeh material
if ( BokehShader === undefined ) {
console.error( 'THREE.BokehPass relies on BokehShader' );
}
const bokehShader = BokehShader;
const bokehUniforms = UniformsUtils.clone( bokehShader.uniforms );
bokehUniforms[ 'tDepth' ].value = this.renderTargetDepth.texture;
bokehUniforms[ 'focus' ].value = focus;
bokehUniforms[ 'aspect' ].value = aspect;
bokehUniforms[ 'aperture' ].value = aperture;
bokehUniforms[ 'maxblur' ].value = maxblur;
bokehUniforms[ 'nearClip' ].value = camera.near;
bokehUniforms[ 'farClip' ].value = camera.far;
this.materialBokeh = new ShaderMaterial( {
defines: Object.assign( {}, bokehShader.defines ),
uniforms: bokehUniforms,
vertexShader: bokehShader.vertexShader,
fragmentShader: bokehShader.fragmentShader
} );
this.uniforms = bokehUniforms;
this.needsSwap = false;
this.fsQuad = new FullScreenQuad( this.materialBokeh );
this._oldClearColor = new Color();
}
Example #2
| Source File: RoughnessMipmapper.js From canvas with Apache License 2.0 | 4 votes |
|
RoughnessMipmapper = ( function () {
var _mipmapMaterial = _getMipmapMaterial();
var _scene = new Scene();
_scene.add( new Mesh( new PlaneBufferGeometry( 2, 2 ), _mipmapMaterial ) );
var _flatCamera = new OrthographicCamera( 0, 1, 0, 1, 0, 1 );
var _tempTarget = null;
var _renderer = null;
// constructor
var RoughnessMipmapper = function ( renderer ) {
_renderer = renderer;
_renderer.compile( _scene, _flatCamera );
};
RoughnessMipmapper.prototype = {
constructor: RoughnessMipmapper,
generateMipmaps: function ( material ) {
var { roughnessMap, normalMap } = material;
if ( roughnessMap == null || normalMap == null || ! roughnessMap.generateMipmaps ||
material.userData.roughnessUpdated ) return;
material.userData.roughnessUpdated = true;
var width = Math.max( roughnessMap.image.width, normalMap.image.width );
var height = Math.max( roughnessMap.image.height, normalMap.image.height );
if ( ! MathUtils.isPowerOfTwo( width ) || ! MathUtils.isPowerOfTwo( height ) ) return;
var oldTarget = _renderer.getRenderTarget();
var autoClear = _renderer.autoClear;
_renderer.autoClear = false;
if ( _tempTarget == null || _tempTarget.width !== width || _tempTarget.height !== height ) {
if ( _tempTarget != null ) _tempTarget.dispose();
_tempTarget = new WebGLRenderTarget( width, height, { depthBuffer: false, stencilBuffer: false } );
_tempTarget.scissorTest = true;
}
if ( width !== roughnessMap.image.width || height !== roughnessMap.image.height ) {
var newRoughnessTarget = new WebGLRenderTarget( width, height, {
minFilter: LinearMipMapLinearFilter,
depthBuffer: false,
stencilBuffer: false
} );
newRoughnessTarget.texture.generateMipmaps = true;
// Setting the render target causes the memory to be allocated.
_renderer.setRenderTarget( newRoughnessTarget );
material.roughnessMap = newRoughnessTarget.texture;
if ( material.metalnessMap == roughnessMap ) material.metalnessMap = material.roughnessMap;
if ( material.aoMap == roughnessMap ) material.aoMap = material.roughnessMap;
}
_mipmapMaterial.uniforms.roughnessMap.value = roughnessMap;
_mipmapMaterial.uniforms.normalMap.value = normalMap;
var position = new Vector2( 0, 0 );
var texelSize = _mipmapMaterial.uniforms.texelSize.value;
for ( var mip = 0; width >= 1 && height >= 1;
++ mip, width /= 2, height /= 2 ) {
// Rendering to a mip level is not allowed in webGL1. Instead we must set
// up a secondary texture to write the result to, then copy it back to the
// proper mipmap level.
texelSize.set( 1.0 / width, 1.0 / height );
if ( mip == 0 ) texelSize.set( 0.0, 0.0 );
_tempTarget.viewport.set( position.x, position.y, width, height );
_tempTarget.scissor.set( position.x, position.y, width, height );
_renderer.setRenderTarget( _tempTarget );
_renderer.render( _scene, _flatCamera );
_renderer.copyFramebufferToTexture( position, material.roughnessMap, mip );
_mipmapMaterial.uniforms.roughnessMap.value = material.roughnessMap;
}
if ( roughnessMap !== material.roughnessMap ) roughnessMap.dispose();
_renderer.setRenderTarget( oldTarget );
_renderer.autoClear = autoClear;
},
dispose: function ( ) {
_mipmapMaterial.dispose();
_scene.children[ 0 ].geometry.dispose();
if ( _tempTarget != null ) _tempTarget.dispose();
}
};
function _getMipmapMaterial() {
var shaderMaterial = new RawShaderMaterial( {
uniforms: {
roughnessMap: { value: null },
normalMap: { value: null },
texelSize: { value: new Vector2( 1, 1 ) }
},
vertexShader: `
precision mediump float;
precision mediump int;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fragmentShader: `
precision mediump float;
precision mediump int;
varying vec2 vUv;
uniform sampler2D roughnessMap;
uniform sampler2D normalMap;
uniform vec2 texelSize;
#define ENVMAP_TYPE_CUBE_UV
vec4 envMapTexelToLinear(vec4 a){return a;}
#include <cube_uv_reflection_fragment>
float roughnessToVariance(float roughness) {
float variance = 0.0;
if (roughness >= r1) {
variance = (r0 - roughness) * (v1 - v0) / (r0 - r1) + v0;
} else if (roughness >= r4) {
variance = (r1 - roughness) * (v4 - v1) / (r1 - r4) + v1;
} else if (roughness >= r5) {
variance = (r4 - roughness) * (v5 - v4) / (r4 - r5) + v4;
} else {
float roughness2 = roughness * roughness;
variance = 1.79 * roughness2 * roughness2;
}
return variance;
}
float varianceToRoughness(float variance) {
float roughness = 0.0;
if (variance >= v1) {
roughness = (v0 - variance) * (r1 - r0) / (v0 - v1) + r0;
} else if (variance >= v4) {
roughness = (v1 - variance) * (r4 - r1) / (v1 - v4) + r1;
} else if (variance >= v5) {
roughness = (v4 - variance) * (r5 - r4) / (v4 - v5) + r4;
} else {
roughness = pow(0.559 * variance, 0.25);// 0.559 = 1.0 / 1.79
}
return roughness;
}
void main() {
gl_FragColor = texture2D(roughnessMap, vUv, -1.0);
if (texelSize.x == 0.0) return;
float roughness = gl_FragColor.g;
float variance = roughnessToVariance(roughness);
vec3 avgNormal;
for (float x = -1.0; x < 2.0; x += 2.0) {
for (float y = -1.0; y < 2.0; y += 2.0) {
vec2 uv = vUv + vec2(x, y) * 0.25 * texelSize;
avgNormal += normalize(texture2D(normalMap, uv, -1.0).xyz - 0.5);
}
}
variance += 1.0 - 0.25 * length(avgNormal);
gl_FragColor.g = varianceToRoughness(variance);
}
`,
blending: NoBlending,
depthTest: false,
depthWrite: false
} );
shaderMaterial.type = 'RoughnessMipmapper';
return shaderMaterial;
}
return RoughnessMipmapper;
} )()
Example #3
| Source File: AdaptiveToneMappingPass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( adaptive, resolution ) {
super();
this.resolution = ( resolution !== undefined ) ? resolution : 256;
this.needsInit = true;
this.adaptive = adaptive !== undefined ? !! adaptive : true;
this.luminanceRT = null;
this.previousLuminanceRT = null;
this.currentLuminanceRT = null;
if ( CopyShader === undefined ) console.error( 'THREE.AdaptiveToneMappingPass relies on CopyShader' );
const copyShader = CopyShader;
this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
this.materialCopy = new ShaderMaterial( {
uniforms: this.copyUniforms,
vertexShader: copyShader.vertexShader,
fragmentShader: copyShader.fragmentShader,
blending: NoBlending,
depthTest: false
} );
if ( LuminosityShader === undefined )
console.error( 'THREE.AdaptiveToneMappingPass relies on LuminosityShader' );
this.materialLuminance = new ShaderMaterial( {
uniforms: UniformsUtils.clone( LuminosityShader.uniforms ),
vertexShader: LuminosityShader.vertexShader,
fragmentShader: LuminosityShader.fragmentShader,
blending: NoBlending
} );
this.adaptLuminanceShader = {
defines: {
'MIP_LEVEL_1X1': ( Math.log( this.resolution ) / Math.log( 2.0 ) ).toFixed( 1 )
},
uniforms: {
'lastLum': { value: null },
'currentLum': { value: null },
'minLuminance': { value: 0.01 },
'delta': { value: 0.016 },
'tau': { value: 1.0 }
},
vertexShader:
`varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader:
`varying vec2 vUv;
uniform sampler2D lastLum;
uniform sampler2D currentLum;
uniform float minLuminance;
uniform float delta;
uniform float tau;
void main() {
vec4 lastLum = texture2D( lastLum, vUv, MIP_LEVEL_1X1 );
vec4 currentLum = texture2D( currentLum, vUv, MIP_LEVEL_1X1 );
float fLastLum = max( minLuminance, lastLum.r );
float fCurrentLum = max( minLuminance, currentLum.r );
//The adaption seems to work better in extreme lighting differences
//if the input luminance is squared.
fCurrentLum *= fCurrentLum;
// Adapt the luminance using Pattanaik's technique
float fAdaptedLum = fLastLum + (fCurrentLum - fLastLum) * (1.0 - exp(-delta * tau));
// "fAdaptedLum = sqrt(fAdaptedLum);
gl_FragColor.r = fAdaptedLum;
}`
};
this.materialAdaptiveLum = new ShaderMaterial( {
uniforms: UniformsUtils.clone( this.adaptLuminanceShader.uniforms ),
vertexShader: this.adaptLuminanceShader.vertexShader,
fragmentShader: this.adaptLuminanceShader.fragmentShader,
defines: Object.assign( {}, this.adaptLuminanceShader.defines ),
blending: NoBlending
} );
if ( ToneMapShader === undefined )
console.error( 'THREE.AdaptiveToneMappingPass relies on ToneMapShader' );
this.materialToneMap = new ShaderMaterial( {
uniforms: UniformsUtils.clone( ToneMapShader.uniforms ),
vertexShader: ToneMapShader.vertexShader,
fragmentShader: ToneMapShader.fragmentShader,
blending: NoBlending
} );
this.fsQuad = new FullScreenQuad( null );
}
Example #4
| Source File: OutlinePass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( resolution, scene, camera, selectedObjects ) {
super();
this.renderScene = scene;
this.renderCamera = camera;
this.selectedObjects = selectedObjects !== undefined ? selectedObjects : [];
this.visibleEdgeColor = new Color( 1, 1, 1 );
this.hiddenEdgeColor = new Color( 0.1, 0.04, 0.02 );
this.edgeGlow = 0.0;
this.usePatternTexture = false;
this.edgeThickness = 1.0;
this.edgeStrength = 3.0;
this.downSampleRatio = 2;
this.pulsePeriod = 0;
this._visibilityCache = new Map();
this.resolution = ( resolution !== undefined ) ? new Vector2( resolution.x, resolution.y ) : new Vector2( 256, 256 );
const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
const resx = Math.round( this.resolution.x / this.downSampleRatio );
const resy = Math.round( this.resolution.y / this.downSampleRatio );
this.renderTargetMaskBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
this.renderTargetMaskBuffer.texture.generateMipmaps = false;
this.depthMaterial = new MeshDepthMaterial();
this.depthMaterial.side = DoubleSide;
this.depthMaterial.depthPacking = RGBADepthPacking;
this.depthMaterial.blending = NoBlending;
this.prepareMaskMaterial = this.getPrepareMaskMaterial();
this.prepareMaskMaterial.side = DoubleSide;
this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
this.renderTargetDepthBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
this.renderTargetDepthBuffer.texture.generateMipmaps = false;
this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget( resx, resy, pars );
this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
this.renderTargetBlurBuffer1 = new WebGLRenderTarget( resx, resy, pars );
this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
this.renderTargetBlurBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
this.renderTargetEdgeBuffer1 = new WebGLRenderTarget( resx, resy, pars );
this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
this.renderTargetEdgeBuffer2 = new WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
const MAX_EDGE_THICKNESS = 4;
const MAX_EDGE_GLOW = 4;
this.separableBlurMaterial1 = this.getSeperableBlurMaterial( MAX_EDGE_THICKNESS );
this.separableBlurMaterial1.uniforms[ 'texSize' ].value.set( resx, resy );
this.separableBlurMaterial1.uniforms[ 'kernelRadius' ].value = 1;
this.separableBlurMaterial2 = this.getSeperableBlurMaterial( MAX_EDGE_GLOW );
this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( Math.round( resx / 2 ), Math.round( resy / 2 ) );
this.separableBlurMaterial2.uniforms[ 'kernelRadius' ].value = MAX_EDGE_GLOW;
// Overlay material
this.overlayMaterial = this.getOverlayMaterial();
// copy material
if ( CopyShader === undefined ) console.error( 'THREE.OutlinePass relies on CopyShader' );
const copyShader = CopyShader;
this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
this.copyUniforms[ 'opacity' ].value = 1.0;
this.materialCopy = new ShaderMaterial( {
uniforms: this.copyUniforms,
vertexShader: copyShader.vertexShader,
fragmentShader: copyShader.fragmentShader,
blending: NoBlending,
depthTest: false,
depthWrite: false,
transparent: true
} );
this.enabled = true;
this.needsSwap = false;
this._oldClearColor = new Color();
this.oldClearAlpha = 1;
this.fsQuad = new FullScreenQuad( null );
this.tempPulseColor1 = new Color();
this.tempPulseColor2 = new Color();
this.textureMatrix = new Matrix4();
function replaceDepthToViewZ( string, camera ) {
const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
return string.replace( /DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ' );
}
}
Example #5
| Source File: SAOPass.js From Computer-Graphics with MIT License | 4 votes |
|
render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
// Rendering readBuffer first when rendering to screen
if ( this.renderToScreen ) {
this.materialCopy.blending = NoBlending;
this.materialCopy.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
this.materialCopy.needsUpdate = true;
this.renderPass( renderer, this.materialCopy, null );
}
if ( this.params.output === 1 ) {
return;
}
renderer.getClearColor( this._oldClearColor );
this.oldClearAlpha = renderer.getClearAlpha();
const oldAutoClear = renderer.autoClear;
renderer.autoClear = false;
renderer.setRenderTarget( this.depthRenderTarget );
renderer.clear();
this.saoMaterial.uniforms[ 'bias' ].value = this.params.saoBias;
this.saoMaterial.uniforms[ 'intensity' ].value = this.params.saoIntensity;
this.saoMaterial.uniforms[ 'scale' ].value = this.params.saoScale;
this.saoMaterial.uniforms[ 'kernelRadius' ].value = this.params.saoKernelRadius;
this.saoMaterial.uniforms[ 'minResolution' ].value = this.params.saoMinResolution;
this.saoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.saoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
// this.saoMaterial.uniforms['randomSeed'].value = Math.random();
const depthCutoff = this.params.saoBlurDepthCutoff * ( this.camera.far - this.camera.near );
this.vBlurMaterial.uniforms[ 'depthCutoff' ].value = depthCutoff;
this.hBlurMaterial.uniforms[ 'depthCutoff' ].value = depthCutoff;
this.vBlurMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.vBlurMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
this.hBlurMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.hBlurMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
this.params.saoBlurRadius = Math.floor( this.params.saoBlurRadius );
if ( ( this.prevStdDev !== this.params.saoBlurStdDev ) || ( this.prevNumSamples !== this.params.saoBlurRadius ) ) {
BlurShaderUtils.configure( this.vBlurMaterial, this.params.saoBlurRadius, this.params.saoBlurStdDev, new Vector2( 0, 1 ) );
BlurShaderUtils.configure( this.hBlurMaterial, this.params.saoBlurRadius, this.params.saoBlurStdDev, new Vector2( 1, 0 ) );
this.prevStdDev = this.params.saoBlurStdDev;
this.prevNumSamples = this.params.saoBlurRadius;
}
// Rendering scene to depth texture
renderer.setClearColor( 0x000000 );
renderer.setRenderTarget( this.beautyRenderTarget );
renderer.clear();
renderer.render( this.scene, this.camera );
// Re-render scene if depth texture extension is not supported
if ( ! this.supportsDepthTextureExtension ) {
// Clear rule : far clipping plane in both RGBA and Basic encoding
this.renderOverride( renderer, this.depthMaterial, this.depthRenderTarget, 0x000000, 1.0 );
}
if ( this.supportsNormalTexture ) {
// Clear rule : default normal is facing the camera
this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0x7777ff, 1.0 );
}
// Rendering SAO texture
this.renderPass( renderer, this.saoMaterial, this.saoRenderTarget, 0xffffff, 1.0 );
// Blurring SAO texture
if ( this.params.saoBlur ) {
this.renderPass( renderer, this.vBlurMaterial, this.blurIntermediateRenderTarget, 0xffffff, 1.0 );
this.renderPass( renderer, this.hBlurMaterial, this.saoRenderTarget, 0xffffff, 1.0 );
}
let outputMaterial = this.materialCopy;
// Setting up SAO rendering
if ( this.params.output === 3 ) {
if ( this.supportsDepthTextureExtension ) {
this.materialCopy.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.depthTexture;
this.materialCopy.needsUpdate = true;
} else {
this.depthCopy.uniforms[ 'tDiffuse' ].value = this.depthRenderTarget.texture;
this.depthCopy.needsUpdate = true;
outputMaterial = this.depthCopy;
}
} else if ( this.params.output === 4 ) {
this.materialCopy.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
this.materialCopy.needsUpdate = true;
} else {
this.materialCopy.uniforms[ 'tDiffuse' ].value = this.saoRenderTarget.texture;
this.materialCopy.needsUpdate = true;
}
// Blending depends on output, only want a CustomBlending when showing SAO
if ( this.params.output === 0 ) {
outputMaterial.blending = CustomBlending;
} else {
outputMaterial.blending = NoBlending;
}
// Rendering SAOPass result on top of previous pass
this.renderPass( renderer, outputMaterial, this.renderToScreen ? null : readBuffer );
renderer.setClearColor( this._oldClearColor, this.oldClearAlpha );
renderer.autoClear = oldAutoClear;
}
Example #6
| Source File: SAOPass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( scene, camera, useDepthTexture = false, useNormals = false, resolution = new Vector2( 256, 256 ) ) {
super();
this.scene = scene;
this.camera = camera;
this.clear = true;
this.needsSwap = false;
this.supportsDepthTextureExtension = useDepthTexture;
this.supportsNormalTexture = useNormals;
this.originalClearColor = new Color();
this._oldClearColor = new Color();
this.oldClearAlpha = 1;
this.params = {
output: 0,
saoBias: 0.5,
saoIntensity: 0.18,
saoScale: 1,
saoKernelRadius: 100,
saoMinResolution: 0,
saoBlur: true,
saoBlurRadius: 8,
saoBlurStdDev: 4,
saoBlurDepthCutoff: 0.01
};
this.resolution = new Vector2( resolution.x, resolution.y );
this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
minFilter: LinearFilter,
magFilter: LinearFilter,
format: RGBAFormat
} );
this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
this.beautyRenderTarget = this.saoRenderTarget.clone();
this.normalRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );
this.depthRenderTarget = this.normalRenderTarget.clone();
let depthTexture;
if ( this.supportsDepthTextureExtension ) {
depthTexture = new DepthTexture();
depthTexture.type = UnsignedShortType;
this.beautyRenderTarget.depthTexture = depthTexture;
this.beautyRenderTarget.depthBuffer = true;
}
this.depthMaterial = new MeshDepthMaterial();
this.depthMaterial.depthPacking = RGBADepthPacking;
this.depthMaterial.blending = NoBlending;
this.normalMaterial = new MeshNormalMaterial();
this.normalMaterial.blending = NoBlending;
if ( SAOShader === undefined ) {
console.error( 'THREE.SAOPass relies on SAOShader' );
}
this.saoMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SAOShader.defines ),
fragmentShader: SAOShader.fragmentShader,
vertexShader: SAOShader.vertexShader,
uniforms: UniformsUtils.clone( SAOShader.uniforms )
} );
this.saoMaterial.extensions.derivatives = true;
this.saoMaterial.defines[ 'DEPTH_PACKING' ] = this.supportsDepthTextureExtension ? 0 : 1;
this.saoMaterial.defines[ 'NORMAL_TEXTURE' ] = this.supportsNormalTexture ? 1 : 0;
this.saoMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
this.saoMaterial.uniforms[ 'tDepth' ].value = ( this.supportsDepthTextureExtension ) ? depthTexture : this.depthRenderTarget.texture;
this.saoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
this.saoMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
this.saoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
this.saoMaterial.uniforms[ 'cameraProjectionMatrix' ].value = this.camera.projectionMatrix;
this.saoMaterial.blending = NoBlending;
if ( DepthLimitedBlurShader === undefined ) {
console.error( 'THREE.SAOPass relies on DepthLimitedBlurShader' );
}
this.vBlurMaterial = new ShaderMaterial( {
uniforms: UniformsUtils.clone( DepthLimitedBlurShader.uniforms ),
defines: Object.assign( {}, DepthLimitedBlurShader.defines ),
vertexShader: DepthLimitedBlurShader.vertexShader,
fragmentShader: DepthLimitedBlurShader.fragmentShader
} );
this.vBlurMaterial.defines[ 'DEPTH_PACKING' ] = this.supportsDepthTextureExtension ? 0 : 1;
this.vBlurMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
this.vBlurMaterial.uniforms[ 'tDiffuse' ].value = this.saoRenderTarget.texture;
this.vBlurMaterial.uniforms[ 'tDepth' ].value = ( this.supportsDepthTextureExtension ) ? depthTexture : this.depthRenderTarget.texture;
this.vBlurMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
this.vBlurMaterial.blending = NoBlending;
this.hBlurMaterial = new ShaderMaterial( {
uniforms: UniformsUtils.clone( DepthLimitedBlurShader.uniforms ),
defines: Object.assign( {}, DepthLimitedBlurShader.defines ),
vertexShader: DepthLimitedBlurShader.vertexShader,
fragmentShader: DepthLimitedBlurShader.fragmentShader
} );
this.hBlurMaterial.defines[ 'DEPTH_PACKING' ] = this.supportsDepthTextureExtension ? 0 : 1;
this.hBlurMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
this.hBlurMaterial.uniforms[ 'tDiffuse' ].value = this.blurIntermediateRenderTarget.texture;
this.hBlurMaterial.uniforms[ 'tDepth' ].value = ( this.supportsDepthTextureExtension ) ? depthTexture : this.depthRenderTarget.texture;
this.hBlurMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
this.hBlurMaterial.blending = NoBlending;
if ( CopyShader === undefined ) {
console.error( 'THREE.SAOPass relies on CopyShader' );
}
this.materialCopy = new ShaderMaterial( {
uniforms: UniformsUtils.clone( CopyShader.uniforms ),
vertexShader: CopyShader.vertexShader,
fragmentShader: CopyShader.fragmentShader,
blending: NoBlending
} );
this.materialCopy.transparent = true;
this.materialCopy.depthTest = false;
this.materialCopy.depthWrite = false;
this.materialCopy.blending = CustomBlending;
this.materialCopy.blendSrc = DstColorFactor;
this.materialCopy.blendDst = ZeroFactor;
this.materialCopy.blendEquation = AddEquation;
this.materialCopy.blendSrcAlpha = DstAlphaFactor;
this.materialCopy.blendDstAlpha = ZeroFactor;
this.materialCopy.blendEquationAlpha = AddEquation;
if ( UnpackDepthRGBAShader === undefined ) {
console.error( 'THREE.SAOPass relies on UnpackDepthRGBAShader' );
}
this.depthCopy = new ShaderMaterial( {
uniforms: UniformsUtils.clone( UnpackDepthRGBAShader.uniforms ),
vertexShader: UnpackDepthRGBAShader.vertexShader,
fragmentShader: UnpackDepthRGBAShader.fragmentShader,
blending: NoBlending
} );
this.fsQuad = new FullScreenQuad( null );
}
Example #7
| Source File: SSAOPass.js From Computer-Graphics with MIT License | 4 votes |
|
render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = LuminanceFormat;
// render beauty
renderer.setRenderTarget( this.beautyRenderTarget );
renderer.clear();
renderer.render( this.scene, this.camera );
// render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
this.overrideVisibility();
this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0x7777ff, 1.0 );
this.restoreVisibility();
// render SSAO
this.ssaoMaterial.uniforms[ 'kernelRadius' ].value = this.kernelRadius;
this.ssaoMaterial.uniforms[ 'minDistance' ].value = this.minDistance;
this.ssaoMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
this.renderPass( renderer, this.ssaoMaterial, this.ssaoRenderTarget );
// render blur
this.renderPass( renderer, this.blurMaterial, this.blurRenderTarget );
// output result to screen
switch ( this.output ) {
case SSAOPass.OUTPUT.SSAO:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssaoRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSAOPass.OUTPUT.Blur:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSAOPass.OUTPUT.Beauty:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSAOPass.OUTPUT.Depth:
this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSAOPass.OUTPUT.Normal:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSAOPass.OUTPUT.Default:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
this.copyMaterial.blending = CustomBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
default:
console.warn( 'THREE.SSAOPass: Unknown output type.' );
}
}
Example #8
| Source File: SSAOPass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( scene, camera, width, height ) {
super();
this.width = ( width !== undefined ) ? width : 512;
this.height = ( height !== undefined ) ? height : 512;
this.clear = true;
this.camera = camera;
this.scene = scene;
this.kernelRadius = 8;
this.kernelSize = 32;
this.kernel = [];
this.noiseTexture = null;
this.output = 0;
this.minDistance = 0.005;
this.maxDistance = 0.1;
this._visibilityCache = new Map();
//
this.generateSampleKernel();
this.generateRandomKernelRotations();
// beauty render target
const depthTexture = new DepthTexture();
depthTexture.format = DepthStencilFormat;
depthTexture.type = UnsignedInt248Type;
this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height );
// normal render target with depth buffer
this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
depthTexture: depthTexture
} );
// ssao render target
this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height );
this.blurRenderTarget = this.ssaoRenderTarget.clone();
// ssao material
if ( SSAOShader === undefined ) {
console.error( 'THREE.SSAOPass: The pass relies on SSAOShader.' );
}
this.ssaoMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSAOShader.defines ),
uniforms: UniformsUtils.clone( SSAOShader.uniforms ),
vertexShader: SSAOShader.vertexShader,
fragmentShader: SSAOShader.fragmentShader,
blending: NoBlending
} );
this.ssaoMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.ssaoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
this.ssaoMaterial.uniforms[ 'tDepth' ].value = this.normalRenderTarget.depthTexture;
this.ssaoMaterial.uniforms[ 'tNoise' ].value = this.noiseTexture;
this.ssaoMaterial.uniforms[ 'kernel' ].value = this.kernel;
this.ssaoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.ssaoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
// normal material
this.normalMaterial = new MeshNormalMaterial();
this.normalMaterial.blending = NoBlending;
// blur material
this.blurMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSAOBlurShader.defines ),
uniforms: UniformsUtils.clone( SSAOBlurShader.uniforms ),
vertexShader: SSAOBlurShader.vertexShader,
fragmentShader: SSAOBlurShader.fragmentShader
} );
this.blurMaterial.uniforms[ 'tDiffuse' ].value = this.ssaoRenderTarget.texture;
this.blurMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
// material for rendering the depth
this.depthRenderMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSAODepthShader.defines ),
uniforms: UniformsUtils.clone( SSAODepthShader.uniforms ),
vertexShader: SSAODepthShader.vertexShader,
fragmentShader: SSAODepthShader.fragmentShader,
blending: NoBlending
} );
this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.normalRenderTarget.depthTexture;
this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
// material for rendering the content of a render target
this.copyMaterial = new ShaderMaterial( {
uniforms: UniformsUtils.clone( CopyShader.uniforms ),
vertexShader: CopyShader.vertexShader,
fragmentShader: CopyShader.fragmentShader,
transparent: true,
depthTest: false,
depthWrite: false,
blendSrc: DstColorFactor,
blendDst: ZeroFactor,
blendEquation: AddEquation,
blendSrcAlpha: DstAlphaFactor,
blendDstAlpha: ZeroFactor,
blendEquationAlpha: AddEquation
} );
this.fsQuad = new FullScreenQuad( null );
this.originalClearColor = new Color();
}
Example #9
| Source File: SSRPass.js From Computer-Graphics with MIT License | 4 votes |
|
render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
// render beauty and depth
renderer.setRenderTarget( this.beautyRenderTarget );
renderer.clear();
if ( this.groundReflector ) {
this.groundReflector.visible = false;
this.groundReflector.doRender( this.renderer, this.scene, this.camera );
this.groundReflector.visible = true;
}
renderer.render( this.scene, this.camera );
if ( this.groundReflector ) this.groundReflector.visible = false;
// render normals
this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0, 0 );
// render metalnesses
if ( this.selective ) {
this.renderMetalness( renderer, this.metalnessOnMaterial, this.metalnessRenderTarget, 0, 0 );
}
// render SSR
this.ssrMaterial.uniforms[ 'opacity' ].value = this.opacity;
this.ssrMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
this.renderPass( renderer, this.ssrMaterial, this.ssrRenderTarget );
// render blur
if ( this.blur ) {
this.renderPass( renderer, this.blurMaterial, this.blurRenderTarget );
this.renderPass( renderer, this.blurMaterial2, this.blurRenderTarget2 );
// this.renderPass(renderer, this.blurMaterial3, this.blurRenderTarget3);
}
// output result to screen
switch ( this.output ) {
case SSRPass.OUTPUT.Default:
if ( this.bouncing ) {
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
if ( this.blur )
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;
else
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
this.copyMaterial.blending = NormalBlending;
this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
} else {
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
if ( this.blur )
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;
else
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
this.copyMaterial.blending = NormalBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
}
break;
case SSRPass.OUTPUT.SSR:
if ( this.blur )
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;
else
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
if ( this.bouncing ) {
if ( this.blur )
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;
else
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
this.copyMaterial.blending = NormalBlending;
this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
}
break;
case SSRPass.OUTPUT.Beauty:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRPass.OUTPUT.Depth:
this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRPass.OUTPUT.Normal:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRPass.OUTPUT.Metalness:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.metalnessRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
default:
console.warn( 'THREE.SSRPass: Unknown output type.' );
}
}
Example #10
| Source File: SSRPass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( { renderer, scene, camera, width, height, selects, bouncing = false, groundReflector } ) {
super();
this.width = ( width !== undefined ) ? width : 512;
this.height = ( height !== undefined ) ? height : 512;
this.clear = true;
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.groundReflector = groundReflector;
this.opacity = SSRShader.uniforms.opacity.value;
this.output = 0;
this.maxDistance = SSRShader.uniforms.maxDistance.value;
this.thickness = SSRShader.uniforms.thickness.value;
this.tempColor = new Color();
this._selects = selects;
this.selective = Array.isArray( this._selects );
Object.defineProperty( this, 'selects', {
get() {
return this._selects;
},
set( val ) {
if ( this._selects === val ) return;
this._selects = val;
if ( Array.isArray( val ) ) {
this.selective = true;
this.ssrMaterial.defines.SELECTIVE = true;
this.ssrMaterial.needsUpdate = true;
} else {
this.selective = false;
this.ssrMaterial.defines.SELECTIVE = false;
this.ssrMaterial.needsUpdate = true;
}
}
} );
this._bouncing = bouncing;
Object.defineProperty( this, 'bouncing', {
get() {
return this._bouncing;
},
set( val ) {
if ( this._bouncing === val ) return;
this._bouncing = val;
if ( val ) {
this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;
} else {
this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
}
}
} );
this.blur = true;
this._distanceAttenuation = SSRShader.defines.DISTANCE_ATTENUATION;
Object.defineProperty( this, 'distanceAttenuation', {
get() {
return this._distanceAttenuation;
},
set( val ) {
if ( this._distanceAttenuation === val ) return;
this._distanceAttenuation = val;
this.ssrMaterial.defines.DISTANCE_ATTENUATION = val;
this.ssrMaterial.needsUpdate = true;
}
} );
this._fresnel = SSRShader.defines.FRESNEL;
Object.defineProperty( this, 'fresnel', {
get() {
return this._fresnel;
},
set( val ) {
if ( this._fresnel === val ) return;
this._fresnel = val;
this.ssrMaterial.defines.FRESNEL = val;
this.ssrMaterial.needsUpdate = true;
}
} );
this._infiniteThick = SSRShader.defines.INFINITE_THICK;
Object.defineProperty( this, 'infiniteThick', {
get() {
return this._infiniteThick;
},
set( val ) {
if ( this._infiniteThick === val ) return;
this._infiniteThick = val;
this.ssrMaterial.defines.INFINITE_THICK = val;
this.ssrMaterial.needsUpdate = true;
}
} );
// beauty render target with depth buffer
const depthTexture = new DepthTexture();
depthTexture.type = UnsignedShortType;
depthTexture.minFilter = NearestFilter;
depthTexture.magFilter = NearestFilter;
this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
depthTexture: depthTexture,
depthBuffer: true
} );
//for bouncing
this.prevRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
} );
// normal render target
this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
type: HalfFloatType,
} );
// metalness render target
this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );
// ssr render target
this.ssrRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );
this.blurRenderTarget = this.ssrRenderTarget.clone();
this.blurRenderTarget2 = this.ssrRenderTarget.clone();
// this.blurRenderTarget3 = this.ssrRenderTarget.clone();
// ssr material
if ( SSRShader === undefined ) {
console.error( 'THREE.SSRPass: The pass relies on SSRShader.' );
}
this.ssrMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSRShader.defines, {
MAX_STEP: Math.sqrt( this.width * this.width + this.height * this.height )
} ),
uniforms: UniformsUtils.clone( SSRShader.uniforms ),
vertexShader: SSRShader.vertexShader,
fragmentShader: SSRShader.fragmentShader,
blending: NoBlending
} );
this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.ssrMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
this.ssrMaterial.defines.SELECTIVE = this.selective;
this.ssrMaterial.needsUpdate = true;
this.ssrMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture;
this.ssrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
this.ssrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.ssrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
this.ssrMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
// normal material
this.normalMaterial = new MeshNormalMaterial();
this.normalMaterial.blending = NoBlending;
// metalnessOn material
this.metalnessOnMaterial = new MeshBasicMaterial( {
color: 'white'
} );
// metalnessOff material
this.metalnessOffMaterial = new MeshBasicMaterial( {
color: 'black'
} );
// blur material
this.blurMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSRBlurShader.defines ),
uniforms: UniformsUtils.clone( SSRBlurShader.uniforms ),
vertexShader: SSRBlurShader.vertexShader,
fragmentShader: SSRBlurShader.fragmentShader
} );
this.blurMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
this.blurMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
// blur material 2
this.blurMaterial2 = new ShaderMaterial( {
defines: Object.assign( {}, SSRBlurShader.defines ),
uniforms: UniformsUtils.clone( SSRBlurShader.uniforms ),
vertexShader: SSRBlurShader.vertexShader,
fragmentShader: SSRBlurShader.fragmentShader
} );
this.blurMaterial2.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
this.blurMaterial2.uniforms[ 'resolution' ].value.set( this.width, this.height );
// // blur material 3
// this.blurMaterial3 = new ShaderMaterial({
// defines: Object.assign({}, SSRBlurShader.defines),
// uniforms: UniformsUtils.clone(SSRBlurShader.uniforms),
// vertexShader: SSRBlurShader.vertexShader,
// fragmentShader: SSRBlurShader.fragmentShader
// });
// this.blurMaterial3.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
// this.blurMaterial3.uniforms['resolution'].value.set(this.width, this.height);
// material for rendering the depth
this.depthRenderMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSRDepthShader.defines ),
uniforms: UniformsUtils.clone( SSRDepthShader.uniforms ),
vertexShader: SSRDepthShader.vertexShader,
fragmentShader: SSRDepthShader.fragmentShader,
blending: NoBlending
} );
this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
// material for rendering the content of a render target
this.copyMaterial = new ShaderMaterial( {
uniforms: UniformsUtils.clone( CopyShader.uniforms ),
vertexShader: CopyShader.vertexShader,
fragmentShader: CopyShader.fragmentShader,
transparent: true,
depthTest: false,
depthWrite: false,
blendSrc: SrcAlphaFactor,
blendDst: OneMinusSrcAlphaFactor,
blendEquation: AddEquation,
blendSrcAlpha: SrcAlphaFactor,
blendDstAlpha: OneMinusSrcAlphaFactor,
blendEquationAlpha: AddEquation,
// premultipliedAlpha:true,
} );
this.fsQuad = new FullScreenQuad( null );
this.originalClearColor = new Color();
}
Example #11
| Source File: SSRrPass.js From Computer-Graphics with MIT License | 4 votes |
|
render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {
// render beauty and depth
renderer.setRenderTarget( this.beautyRenderTarget );
renderer.clear();
this.scene.children.forEach( child => {
if ( this.selects.includes( child ) ) {
child.visible = false;
} else {
child.visible = true;
}
} );
renderer.render( this.scene, this.camera );
renderer.setRenderTarget( this.specularRenderTarget );
renderer.clear();
this.scene.children.forEach( child => {
if ( this.selects.includes( child ) ) {
child.visible = true;
child._SSRrPassBackupMaterial = child.material;
child.material = this.specularMaterial;
} else if ( ! child.isLight ) {
child.visible = false;
}
} );
renderer.render( this.scene, this.camera );
this.scene.children.forEach( child => {
if ( this.selects.includes( child ) ) {
child.material = child._SSRrPassBackupMaterial;
}
} );
// render normalSelectss
this.scene.children.forEach( child => {
if ( this.selects.includes( child ) ) {
child.visible = true;
} else {
child.visible = false;
}
} );
this.renderOverride( renderer, this.normalMaterial, this.normalSelectsRenderTarget, 0, 0 );
this.renderRefractive( renderer, this.refractiveOnMaterial, this.refractiveRenderTarget, 0, 0 );
// render SSRr
this.ssrrMaterial.uniforms[ 'ior' ].value = this.ior;
this.ssrrMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
this.ssrrMaterial.uniforms[ 'surfDist' ].value = this.surfDist;
this.ssrrMaterial.uniforms[ 'tSpecular' ].value = this.specularRenderTarget.texture;
this.renderPass( renderer, this.ssrrMaterial, this.ssrrRenderTarget );
// output result to screen
switch ( this.output ) {
case SSRrPass.OUTPUT.Default:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrrRenderTarget.texture;
this.copyMaterial.blending = NormalBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.SSRr:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrrRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.Beauty:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.Depth:
this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.DepthSelects:
this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.normalSelectsRenderTarget.depthTexture;
this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.NormalSelects:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalSelectsRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.Refractive:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.refractiveRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
case SSRrPass.OUTPUT.Specular:
this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.specularRenderTarget.texture;
this.copyMaterial.blending = NoBlending;
this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
break;
default:
console.warn( 'THREE.SSRrPass: Unknown output type.' );
}
}
Example #12
| Source File: SSRrPass.js From Computer-Graphics with MIT License | 4 votes |
|
constructor( { renderer, scene, camera, width, height, selects } ) {
super();
this.width = ( width !== undefined ) ? width : 512;
this.height = ( height !== undefined ) ? height : 512;
this.clear = true;
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.output = 0;
// this.output = 1;
this.ior = SSRrShader.uniforms.ior.value;
this.maxDistance = SSRrShader.uniforms.maxDistance.value;
this.surfDist = SSRrShader.uniforms.surfDist.value;
this.tempColor = new Color();
this.selects = selects;
this._specular = SSRrShader.defines.SPECULAR;
Object.defineProperty( this, 'specular', {
get() {
return this._specular;
},
set( val ) {
if ( this._specular === val ) return;
this._specular = val;
this.ssrrMaterial.defines.SPECULAR = val;
this.ssrrMaterial.needsUpdate = true;
}
} );
this._fillHole = SSRrShader.defines.FILL_HOLE;
Object.defineProperty( this, 'fillHole', {
get() {
return this._fillHole;
},
set( val ) {
if ( this._fillHole === val ) return;
this._fillHole = val;
this.ssrrMaterial.defines.FILL_HOLE = val;
this.ssrrMaterial.needsUpdate = true;
}
} );
this._infiniteThick = SSRrShader.defines.INFINITE_THICK;
Object.defineProperty( this, 'infiniteThick', {
get() {
return this._infiniteThick;
},
set( val ) {
if ( this._infiniteThick === val ) return;
this._infiniteThick = val;
this.ssrrMaterial.defines.INFINITE_THICK = val;
this.ssrrMaterial.needsUpdate = true;
}
} );
// beauty render target with depth buffer
const depthTexture = new DepthTexture();
depthTexture.type = UnsignedShortType;
depthTexture.minFilter = NearestFilter;
depthTexture.magFilter = NearestFilter;
this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
depthTexture: depthTexture,
depthBuffer: true
} );
this.specularRenderTarget = new WebGLRenderTarget( this.width, this.height, { // TODO: Can merge with refractiveRenderTarget?
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
} );
// normalSelects render target
const depthTextureSelects = new DepthTexture();
depthTextureSelects.type = UnsignedShortType;
depthTextureSelects.minFilter = NearestFilter;
depthTextureSelects.magFilter = NearestFilter;
this.normalSelectsRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat,
type: HalfFloatType,
depthTexture: depthTextureSelects,
depthBuffer: true
} );
// refractive render target
this.refractiveRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );
// ssrr render target
this.ssrrRenderTarget = new WebGLRenderTarget( this.width, this.height, {
minFilter: NearestFilter,
magFilter: NearestFilter,
format: RGBAFormat
} );
// ssrr material
if ( SSRrShader === undefined ) {
console.error( 'THREE.SSRrPass: The pass relies on SSRrShader.' );
}
this.ssrrMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSRrShader.defines, {
MAX_STEP: Math.sqrt( this.width * this.width + this.height * this.height )
} ),
uniforms: UniformsUtils.clone( SSRrShader.uniforms ),
vertexShader: SSRrShader.vertexShader,
fragmentShader: SSRrShader.fragmentShader,
blending: NoBlending
} );
this.ssrrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
this.ssrrMaterial.uniforms[ 'tSpecular' ].value = this.specularRenderTarget.texture;
this.ssrrMaterial.uniforms[ 'tNormalSelects' ].value = this.normalSelectsRenderTarget.texture;
this.ssrrMaterial.needsUpdate = true;
this.ssrrMaterial.uniforms[ 'tRefractive' ].value = this.refractiveRenderTarget.texture;
this.ssrrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
this.ssrrMaterial.uniforms[ 'tDepthSelects' ].value = this.normalSelectsRenderTarget.depthTexture;
this.ssrrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.ssrrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
this.ssrrMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
this.ssrrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
this.ssrrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
// normal material
this.normalMaterial = new MeshNormalMaterial();
this.normalMaterial.blending = NoBlending;
// refractiveOn material
this.refractiveOnMaterial = new MeshBasicMaterial( {
color: 'white'
} );
// refractiveOff material
this.refractiveOffMaterial = new MeshBasicMaterial( {
color: 'black'
} );
// specular material
this.specularMaterial = new MeshStandardMaterial( {
color: 'black',
metalness: 0,
roughness: .2,
} );
// material for rendering the depth
this.depthRenderMaterial = new ShaderMaterial( {
defines: Object.assign( {}, SSRrDepthShader.defines ),
uniforms: UniformsUtils.clone( SSRrDepthShader.uniforms ),
vertexShader: SSRrDepthShader.vertexShader,
fragmentShader: SSRrDepthShader.fragmentShader,
blending: NoBlending
} );
this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
// material for rendering the content of a render target
this.copyMaterial = new ShaderMaterial( {
uniforms: UniformsUtils.clone( CopyShader.uniforms ),
vertexShader: CopyShader.vertexShader,
fragmentShader: CopyShader.fragmentShader,
transparent: true,
depthTest: false,
depthWrite: false,
blendSrc: SrcAlphaFactor,
blendDst: OneMinusSrcAlphaFactor,
blendEquation: AddEquation,
blendSrcAlpha: SrcAlphaFactor,
blendDstAlpha: OneMinusSrcAlphaFactor,
blendEquationAlpha: AddEquation,
// premultipliedAlpha:true,
} );
this.fsQuad = new FullScreenQuad( null );
this.originalClearColor = new Color();
}
