|
@@ -1,7 +1,7 @@
|
|
|
import {
|
|
|
- Matrix4,
|
|
|
- Vector2
|
|
|
-} from "../../../build/three.module.js";
|
|
|
+ Matrix4,
|
|
|
+ Vector2
|
|
|
+} from '../../../build/three.module.js';
|
|
|
/**
|
|
|
* References:
|
|
|
* https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html
|
|
@@ -9,49 +9,49 @@ import {
|
|
|
|
|
|
var SSRShader = {
|
|
|
|
|
|
- defines: {
|
|
|
- MAX_STEP: 0,
|
|
|
- PERSPECTIVE_CAMERA: true,
|
|
|
- DISTANCE_ATTENUATION: true,
|
|
|
- FRESNEL: true,
|
|
|
- INFINITE_THICK: false,
|
|
|
- SELECTIVE: false,
|
|
|
- },
|
|
|
+ defines: {
|
|
|
+ MAX_STEP: 0,
|
|
|
+ PERSPECTIVE_CAMERA: true,
|
|
|
+ DISTANCE_ATTENUATION: true,
|
|
|
+ FRESNEL: true,
|
|
|
+ INFINITE_THICK: false,
|
|
|
+ SELECTIVE: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ uniforms: {
|
|
|
+
|
|
|
+ 'tDiffuse': { value: null },
|
|
|
+ 'tNormal': { value: null },
|
|
|
+ 'tMetalness': { value: null },
|
|
|
+ 'tDepth': { value: null },
|
|
|
+ 'cameraNear': { value: null },
|
|
|
+ 'cameraFar': { value: null },
|
|
|
+ 'resolution': { value: new Vector2() },
|
|
|
+ 'cameraProjectionMatrix': { value: new Matrix4() },
|
|
|
+ 'cameraInverseProjectionMatrix': { value: new Matrix4() },
|
|
|
+ 'opacity': { value: .5 },
|
|
|
+ 'maxDistance': { value: 180 },
|
|
|
+ 'cameraRange': { value: 0 },
|
|
|
+ 'surfDist': { value: .007 },
|
|
|
+ 'thickTolerance': { value: .03 },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ vertexShader: /* glsl */`
|
|
|
|
|
|
- uniforms: {
|
|
|
-
|
|
|
- "tDiffuse": { value: null },
|
|
|
- "tNormal": { value: null },
|
|
|
- "tMetalness": { value: null },
|
|
|
- "tDepth": { value: null },
|
|
|
- "cameraNear": { value: null },
|
|
|
- "cameraFar": { value: null },
|
|
|
- "resolution": { value: new Vector2() },
|
|
|
- "cameraProjectionMatrix": { value: new Matrix4() },
|
|
|
- "cameraInverseProjectionMatrix": { value: new Matrix4() },
|
|
|
- "opacity": { value: .5 },
|
|
|
- "maxDistance": { value: 180 },
|
|
|
- "cameraRange": { value: 0 },
|
|
|
- "surfDist": { value: .007 },
|
|
|
- "thickTolerance": { value: .03 },
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- vertexShader: /* glsl */`
|
|
|
-
|
|
|
- varying vec2 vUv;
|
|
|
+ varying vec2 vUv;
|
|
|
|
|
|
- void main() {
|
|
|
+ void main() {
|
|
|
|
|
|
vUv = uv;
|
|
|
|
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- `,
|
|
|
+ `,
|
|
|
|
|
|
- fragmentShader: /* glsl */`
|
|
|
+ fragmentShader: /* glsl */`
|
|
|
// precision highp float;
|
|
|
precision highp sampler2D;
|
|
|
varying vec2 vUv;
|
|
@@ -221,41 +221,41 @@ var SSRShader = {
|
|
|
|
|
|
var SSRDepthShader = {
|
|
|
|
|
|
- defines: {
|
|
|
- "PERSPECTIVE_CAMERA": 1
|
|
|
- },
|
|
|
+ defines: {
|
|
|
+ 'PERSPECTIVE_CAMERA': 1
|
|
|
+ },
|
|
|
|
|
|
- uniforms: {
|
|
|
+ uniforms: {
|
|
|
|
|
|
- "tDepth": { value: null },
|
|
|
- "cameraNear": { value: null },
|
|
|
- "cameraFar": { value: null },
|
|
|
+ 'tDepth': { value: null },
|
|
|
+ 'cameraNear': { value: null },
|
|
|
+ 'cameraFar': { value: null },
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- vertexShader: /* glsl */`
|
|
|
+ vertexShader: /* glsl */`
|
|
|
|
|
|
- varying vec2 vUv;
|
|
|
+ varying vec2 vUv;
|
|
|
|
|
|
- void main() {
|
|
|
+ void main() {
|
|
|
|
|
|
- vUv = uv;
|
|
|
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
+ vUv = uv;
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- `,
|
|
|
+ `,
|
|
|
|
|
|
- fragmentShader: /* glsl */`
|
|
|
+ fragmentShader: /* glsl */`
|
|
|
|
|
|
- uniform sampler2D tDepth;
|
|
|
+ uniform sampler2D tDepth;
|
|
|
|
|
|
- uniform float cameraNear;
|
|
|
- uniform float cameraFar;
|
|
|
+ uniform float cameraNear;
|
|
|
+ uniform float cameraFar;
|
|
|
|
|
|
- varying vec2 vUv;
|
|
|
+ varying vec2 vUv;
|
|
|
|
|
|
- #include <packing>
|
|
|
+ #include <packing>
|
|
|
|
|
|
float getLinearDepth( const in vec2 uv ) {
|
|
|
|
|
@@ -273,51 +273,51 @@ var SSRDepthShader = {
|
|
|
|
|
|
}
|
|
|
|
|
|
- void main() {
|
|
|
+ void main() {
|
|
|
|
|
|
- float depth = getLinearDepth( vUv );
|
|
|
+ float depth = getLinearDepth( vUv );
|
|
|
float d = 1.0 - depth;
|
|
|
// d=(d-.999)*1000.;
|
|
|
- gl_FragColor = vec4( vec3( d ), 1.0 );
|
|
|
+ gl_FragColor = vec4( vec3( d ), 1.0 );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- `
|
|
|
+ `
|
|
|
|
|
|
};
|
|
|
|
|
|
var SSRBlurShader = {
|
|
|
|
|
|
- uniforms: {
|
|
|
+ uniforms: {
|
|
|
|
|
|
- "tDiffuse": { value: null },
|
|
|
- "resolution": { value: new Vector2() },
|
|
|
- "opacity": { value: .5 },
|
|
|
+ 'tDiffuse': { value: null },
|
|
|
+ 'resolution': { value: new Vector2() },
|
|
|
+ 'opacity': { value: .5 },
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- vertexShader: /* glsl */`
|
|
|
+ vertexShader: /* glsl */`
|
|
|
|
|
|
- varying vec2 vUv;
|
|
|
+ varying vec2 vUv;
|
|
|
|
|
|
- void main() {
|
|
|
+ void main() {
|
|
|
|
|
|
- vUv = uv;
|
|
|
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
+ vUv = uv;
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- `,
|
|
|
+ `,
|
|
|
|
|
|
- fragmentShader: /* glsl */`
|
|
|
+ fragmentShader: /* glsl */`
|
|
|
|
|
|
- uniform sampler2D tDiffuse;
|
|
|
- uniform vec2 resolution;
|
|
|
- varying vec2 vUv;
|
|
|
- void main() {
|
|
|
+ uniform sampler2D tDiffuse;
|
|
|
+ uniform vec2 resolution;
|
|
|
+ varying vec2 vUv;
|
|
|
+ void main() {
|
|
|
//reverse engineering from PhotoShop blur filter, then change coefficient
|
|
|
|
|
|
- vec2 texelSize = ( 1.0 / resolution );
|
|
|
+ vec2 texelSize = ( 1.0 / resolution );
|
|
|
|
|
|
vec4 c=texture2D(tDiffuse,vUv);
|
|
|
|