File size: 3,421 Bytes
b797337 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | import { Mesh, IcosahedronGeometry, ShaderMaterial, DoubleSide } from 'three';
/**
* Ground projected env map adapted from @react-three/drei.
* https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
*/
class GroundProjectedSkybox extends Mesh {
constructor( texture, options = {} ) {
const isCubeMap = texture.isCubeTexture;
const defines = [
isCubeMap ? '#define ENVMAP_TYPE_CUBE' : ''
];
const vertexShader = /* glsl */ `
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
const fragmentShader = defines.join( '\n' ) + /* glsl */ `
varying vec3 vWorldPosition;
uniform float radius;
uniform float height;
uniform float angle;
#ifdef ENVMAP_TYPE_CUBE
uniform samplerCube map;
#else
uniform sampler2D map;
#endif
// From: https://www.shadertoy.com/view/4tsBD7
float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r )
{
float d = dot ( rd, n );
if( d > 0.0 ) { return 1e6; }
vec3 o = ro - c;
float t = - dot( n, o ) / d;
vec3 q = o + rd * t;
return ( dot( q, q ) < r * r ) ? t : 1e6;
}
// From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) {
vec3 oc = ro - ce;
float b = dot( oc, rd );
float c = dot( oc, oc ) - ra * ra;
float h = b * b - c;
if( h < 0.0 ) { return -1.0; }
h = sqrt( h );
return - b + h;
}
vec3 project() {
vec3 p = normalize( vWorldPosition );
vec3 camPos = cameraPosition;
camPos.y -= height;
float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
if( intersection > 0.0 ) {
vec3 h = vec3( 0.0, - height, 0.0 );
float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
} else {
p = vec3( 0.0, 1.0, 0.0 );
}
return p;
}
#include <common>
void main() {
vec3 projectedWorldPosition = project();
#ifdef ENVMAP_TYPE_CUBE
vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
#else
vec3 direction = normalize( projectedWorldPosition );
vec2 uv = equirectUv( direction );
vec3 outcolor = texture2D( map, uv ).rgb;
#endif
gl_FragColor = vec4( outcolor, 1.0 );
#include <tonemapping_fragment>
#include <colorspace_fragment>
}
`;
const uniforms = {
map: { value: texture },
height: { value: options.height || 15 },
radius: { value: options.radius || 100 },
};
const geometry = new IcosahedronGeometry( 1, 16 );
const material = new ShaderMaterial( {
uniforms,
fragmentShader,
vertexShader,
side: DoubleSide,
} );
super( geometry, material );
}
set radius( radius ) {
this.material.uniforms.radius.value = radius;
}
get radius() {
return this.material.uniforms.radius.value;
}
set height( height ) {
this.material.uniforms.height.value = height;
}
get height() {
return this.material.uniforms.height.value;
}
}
export { GroundProjectedSkybox };
|