Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Add CubeTexture blur #30165

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
+96 −14
Open

[WIP] Add CubeTexture blur #30165

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
deca60e
factor out sampler
elalish Dec 19, 2024
de3b18e
Merge branch 'dev' of github.com:mrdoob/three.js into cubeBlur
elalish Dec 19, 2024
e87294d
fixing parameters
sunag Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 59 additions & 7 deletions src/nodes/pmrem/PMREMUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@

} );

const bilinearCubeUV = /*@__PURE__*/ Fn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
export const bilinearCubeUV = /*@__PURE__*/ Fn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error I'm getting is here: only the first two arguments are defined, so it crashes when it tries to read mipInt_immutable. My other comment shows where this is being called. I thought I had verified this kind of functional programming works in your TSL editor, but maybe something is subtly different? Am I hitting a real limitation of TSL here, or am I just doing something stupid? Any guidance @sunag?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems to be related to the first argument of TSL function, I think that if you change of ( envMap, sampleDirection ) => to ( [ envMap, sampleDirection ] ) => it will work.

The second parameter in JS function is reserved for builder, where you can access the related material, object and geometry. For example: ( [ envMap, sampleDirection ], builder ) =>.

It is also possible to pass parameters as objects for example: ( { envMap, sampleDirection } ) => and call using bilinearCubeUV( { envMap, sampleDirection } ), can be useful for functions with many parameters.


const mipInt = float( mipInt_immutable ).toVar();
const direction = vec3( direction_immutable );
Expand All @@ -241,7 +241,7 @@

} );

const getSample = /*@__PURE__*/ Fn( ( { envMap, mipInt, outputDirection, theta, axis, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
const getSample = /*@__PURE__*/ Fn( ( { envMap, outputDirection, theta, axis, sampler } ) => {

const cosTheta = cos( theta );

Expand All @@ -250,11 +250,11 @@
.add( axis.cross( outputDirection ).mul( sin( theta ) ) )
.add( axis.mul( axis.dot( outputDirection ).mul( cosTheta.oneMinus() ) ) );

return bilinearCubeUV( envMap, sampleDirection, mipInt, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP );
return sampler( envMap, sampleDirection );

} );

export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, envMap, sampler } ) => {

const axis = vec3( select( latitudinal, poleAxis, cross( poleAxis, outputDirection ) ) ).toVar();

Expand All @@ -267,7 +267,7 @@
axis.assign( normalize( axis ) );

const gl_FragColor = vec3().toVar();
gl_FragColor.addAssign( weights.element( int( 0 ) ).mul( getSample( { theta: 0.0, axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
gl_FragColor.addAssign( weights.element( int( 0 ) ).mul( getSample( { theta: 0.0, axis, outputDirection, envMap, sampler } ) ) );

Loop( { start: int( 1 ), end: n }, ( { i } ) => {

Expand All @@ -278,11 +278,63 @@
} );

const theta = float( dTheta.mul( float( i ) ) ).toVar();
gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta: theta.mul( - 1.0 ), axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta, axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta: theta.mul( - 1.0 ), axis, outputDirection, envMap, sampler } ) ) );
gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta, axis, outputDirection, envMap, sampler } ) ) );

} );

return vec4( gl_FragColor, 1 );

} );

export const getBlurParams=(sigmaRadians, cubeRes, maxSamples)=>{

Check failure on line 290 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Operator '=' must be spaced

Check failure on line 290 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

There must be a space after this paren

Check failure on line 290 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

There must be a space before this paren

Check failure on line 290 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Block must be padded by blank lines
// Number of standard deviations at which to cut off the discrete approximation.
const STANDARD_DEVIATIONS = 3;

const radiansPerPixel = Math.PI / ( 2 * cubeRes );
const sigmaPixels = sigmaRadians / radiansPerPixel;
const samples =1 + Math.floor( STANDARD_DEVIATIONS * sigmaPixels );

Check failure on line 296 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Operator '=' must be spaced

if ( samples > maxSamples ) {

console.warn( `sigmaRadians, ${
sigmaRadians}, is too large and will clip, as it requested ${
samples} samples when the maximum is set to ${maxSamples}` );

}

const weights = [];
let sum = 0;

for ( let i = 0; i < maxSamples; ++ i ) {

if(i>=samples){

Check failure on line 311 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Expected space(s) after "if"

Check failure on line 311 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

There must be a space after this paren

Check failure on line 311 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Operator '>=' must be spaced

Check failure on line 311 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

There must be a space before this paren

Check failure on line 311 in src/nodes/pmrem/PMREMUtils.js

View workflow job for this annotation

GitHub Actions / Lint testing 

Block must be padded by blank lines
weights.push(0);
continue;
}

const x = i / sigmaPixels;
const weight = Math.exp( - x * x / 2 );
weights.push( weight );

if ( i === 0 ) {

sum += weight;

} else {

sum += 2 * weight;

}

}

for ( let i = 0; i < weights.length; i ++ ) {

weights[ i ] = weights[ i ] / sum;

}

return {radiansPerPixel, samples, weights};

};
29 changes: 29 additions & 0 deletions src/renderers/common/CubeRenderTarget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import { BoxGeometry } from '../../geometries/BoxGeometry.js';
import { Mesh } from '../../objects/Mesh.js';
import { BackSide, NoBlending, LinearFilter, LinearMipmapLinearFilter } from '../../constants.js';
import {cubeTexture as TSL_CubeTexture} from '../../nodes/accessors/CubeTextureNode.js';

// @TODO: Consider rename WebGLCubeRenderTarget to just CubeRenderTarget

Expand Down Expand Up @@ -72,6 +73,34 @@

}

fromBlur(renderer, cubeMap, sigma){

Check warning on line 76 in src/renderers/common/CubeRenderTarget.js

View workflow job for this annotation

GitHub Actions / Lint testing 

'sigma' is defined but never used
const blurTarget1=new CubeRenderTarget(this.width);

const geometry = new BoxGeometry( 5, 5, 5 );

const blurMaterial = new NodeMaterial();
blurMaterial.colorNode = TSL_CubeTexture(cubeMap, positionWorldDirection, 0);
blurMaterial.side = BackSide;
blurMaterial.depthTest = false;
blurMaterial.depthWrite = false;
blurMaterial.blending = NoBlending;

const mesh = new Mesh( geometry, blurMaterial );

const scene = new Scene();
scene.add( mesh );

const camera = new CubeCamera( 1, 10, blurTarget1 );

camera.update( renderer, scene );

camera.renderTarget=this;

camera.update( renderer, scene );

blurTarget1.dispose();
}

}

export default CubeRenderTarget;
14 changes: 7 additions & 7 deletions src/renderers/common/extras/PMREMGenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import NodeMaterial from '../../../materials/nodes/NodeMaterial.js';
import { getDirection, blur } from '../../../nodes/pmrem/PMREMUtils.js';
import { getDirection, blur, bilinearCubeUV } from '../../../nodes/pmrem/PMREMUtils.js';
import { equirectUV } from '../../../nodes/utils/EquirectUVNode.js';
import { uniform } from '../../../nodes/core/UniformNode.js';
import { uniformArray } from '../../../nodes/accessors/UniformArrayNode.js';
import { texture } from '../../../nodes/accessors/TextureNode.js';
import { cubeTexture } from '../../../nodes/accessors/CubeTextureNode.js';
import { float, vec3 } from '../../../nodes/tsl/TSLBase.js';
import { float, vec3, Fn } from '../../../nodes/tsl/TSLBase.js';
import { uv } from '../../../nodes/accessors/UV.js';
import { attribute } from '../../../nodes/core/AttributeNode.js';

Expand Down Expand Up @@ -833,15 +833,15 @@ function _getBlurShader( lodMax, width, height ) {
dTheta,
samples,
envMap,
mipInt,
CUBEUV_TEXEL_WIDTH,
CUBEUV_TEXEL_HEIGHT,
CUBEUV_MAX_MIP
mipInt
};

const material = _getMaterial( 'blur' );
material.uniforms = materialUniforms; // TODO: Move to outside of the material
material.fragmentNode = blur( { ...materialUniforms, latitudinal: latitudinal.equal( 1 ) } );
const cubeUVsampler=Fn((envMap, sampleDirection)=>{
return bilinearCubeUV( envMap, sampleDirection, mipInt, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP );
});
material.fragmentNode = blur( { ...materialUniforms, latitudinal: latitudinal.equal( 1 ), sampler: cubeUVsampler } );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the heart of the refactor I'm attempting - make the sampling function something that can be passed in so I can use different ones for a CubeUV texture vs an actual CubeTexture.


return material;

Expand Down
Loading