@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
51 lines (50 loc) • 1.98 kB
JavaScript
;
import { MeshBasicMaterial } from "three";
export function setBlurMaterial(mat, options) {
mat.uniforms.previousLightMap.value = options.lightMap.texture;
mat.uniforms.pixelOffset.value = 1 / options.res;
}
export function createBlurMaterial() {
const blurMaterial = new MeshBasicMaterial();
blurMaterial.uniforms = {
previousLightMap: { value: null },
pixelOffset: { value: 1 }
// TODO: make sure this is not important
// polygonOffset: true,
// polygonOffsetFactor: -1,
// polygonOffsetUnits: 3.0,
};
blurMaterial.polygonOffset = true;
blurMaterial.polygonOffsetFactor = -1;
blurMaterial.polygonOffsetUnits = 3;
blurMaterial.onBeforeCompile = (shader) => {
shader.vertexShader = `
#define USE_UV
${shader.vertexShader.slice(0, -2)}
gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0);
}
`;
const bodyStart = shader.fragmentShader.indexOf("void main() {");
shader.fragmentShader = `
#define USE_UV
${shader.fragmentShader.slice(0, bodyStart)}
uniform sampler2D previousLightMap;
uniform float pixelOffset;
${shader.fragmentShader.slice(bodyStart - 1, -2)}
gl_FragColor.rgb = (
texture2D(previousLightMap, vUv + vec2( pixelOffset, 0.0 )).rgb +
texture2D(previousLightMap, vUv + vec2( 0.0 , pixelOffset)).rgb +
texture2D(previousLightMap, vUv + vec2( 0.0 , -pixelOffset)).rgb +
texture2D(previousLightMap, vUv + vec2(-pixelOffset, 0.0 )).rgb +
texture2D(previousLightMap, vUv + vec2( pixelOffset, pixelOffset)).rgb +
texture2D(previousLightMap, vUv + vec2(-pixelOffset, pixelOffset)).rgb +
texture2D(previousLightMap, vUv + vec2( pixelOffset, -pixelOffset)).rgb +
texture2D(previousLightMap, vUv + vec2(-pixelOffset, -pixelOffset)).rgb
) / 8.0;
}`;
shader.uniforms.previousLightMap = blurMaterial.uniforms.previousLightMap;
shader.uniforms.pixelOffset = blurMaterial.uniforms.pixelOffset;
blurMaterial.userData.shader = shader;
};
return blurMaterial;
}