@lampdotdev/lamp 0.0.0-stage → 0.35.0

package/Resources/WebLibraries/three/addons/shaders/VolumeShader.js

@@ -0,0 +1,285 @@
+import {
+	Vector2,
+	Vector3
+} from 'three';
+
+/**
+ * @module VolumeShader
+ * @three_import import { VolumeRenderShader1 } from 'three/addons/shaders/VolumeShader.js';
+ */
+
+/**
+ * Shaders to render 3D volumes using raycasting.
+ * The applied techniques are based on similar implementations in the Visvis and Vispy projects.
+ * This is not the only approach, therefore it's marked 1.
+ *
+ * @constant
+ * @type {ShaderMaterial~Shader}
+ */
+const VolumeRenderShader1 = {
+
+	name: 'VolumeRenderShader1',
+
+	uniforms: {
+		'u_size': { value: new Vector3( 1, 1, 1 ) },
+		'u_renderstyle': { value: 0 },
+		'u_renderthreshold': { value: 0.5 },
+		'u_clim': { value: new Vector2( 1, 1 ) },
+		'u_data': { value: null },
+		'u_cmdata': { value: null }
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec3 v_position;
+		varying vec3 v_cameraInObj;
+		varying vec3 v_viewDirInObj;
+
+		void main() {
+				vec4 position4 = vec4(position, 1.0);
+
+				v_position = position;
+
+				// Express the camera position and view direction in the object's local
+				// space so the fragment shader can build the per-fragment view ray.
+				// For perspective cameras, rays converge at v_cameraInObj.
+				// For orthographic cameras, rays travel along v_viewDirInObj.
+				v_cameraInObj = (inverse(modelMatrix) * vec4(cameraPosition, 1.0)).xyz;
+				v_viewDirInObj = (inverse(modelViewMatrix) * vec4(0.0, 0.0, -1.0, 0.0)).xyz;
+
+				gl_Position = projectionMatrix * modelViewMatrix * position4;
+		}`,
+
+	fragmentShader: /* glsl */`
+
+				precision highp float;
+				precision mediump sampler3D;
+
+				uniform vec3 u_size;
+				uniform int u_renderstyle;
+				uniform float u_renderthreshold;
+				uniform vec2 u_clim;
+
+				uniform sampler3D u_data;
+				uniform sampler2D u_cmdata;
+
+				varying vec3 v_position;
+				varying vec3 v_cameraInObj;
+				varying vec3 v_viewDirInObj;
+
+				// The maximum distance through our rendering volume is sqrt(3).
+				const int MAX_STEPS = 887;	// 887 for 512^3, 1774 for 1024^3
+				const int REFINEMENT_STEPS = 4;
+				const float relative_step_size = 1.0;
+				const vec4 ambient_color = vec4(0.2, 0.4, 0.2, 1.0);
+				const vec4 diffuse_color = vec4(0.8, 0.2, 0.2, 1.0);
+				const vec4 specular_color = vec4(1.0, 1.0, 1.0, 1.0);
+				const float shininess = 40.0;
+
+				void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
+				void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
+
+				float sample1(vec3 texcoords);
+				vec4 apply_colormap(float val);
+				vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray);
+
+
+				void main() {
+						// Per-fragment ray direction in object space, pointing from the back
+						// face toward the camera. For perspective cameras the rays converge
+						// at the camera position; for orthographic cameras they are parallel
+						// to the view direction.
+						vec3 view_ray = isOrthographic
+								? normalize(-v_viewDirInObj)
+								: normalize(v_cameraInObj - v_position);
+
+						// Slab-based ray/AABB intersection: v_position lies on the back face
+						// of the cuboid, so stepping along view_ray traverses the volume and
+						// exits through the front face at t = distance.
+						vec3 t1 = (vec3(-0.5) - v_position) / view_ray;
+						vec3 t2 = (u_size - vec3(0.5) - v_position) / view_ray;
+						vec3 tmax = max(t1, t2);
+						float distance = min(min(tmax.x, tmax.y), tmax.z);
+
+						// Decide how many steps to take
+						int nsteps = int(distance / relative_step_size + 0.5);
+						if ( nsteps < 1 )
+								discard;
+
+						// Get starting location and step vector in texture coordinates
+						vec3 front = v_position + view_ray * distance;
+						vec3 step = ((v_position - front) / u_size) / float(nsteps);
+						vec3 start_loc = front / u_size;
+
+						// For testing: show the number of steps. This helps to establish
+						// whether the rays are correctly oriented
+						//'gl_FragColor = vec4(0.0, float(nsteps) / 1.0 / u_size.x, 1.0, 1.0);
+						//'return;
+
+						if (u_renderstyle == 0)
+								cast_mip(start_loc, step, nsteps, view_ray);
+						else if (u_renderstyle == 1)
+								cast_iso(start_loc, step, nsteps, view_ray);
+
+						if (gl_FragColor.a < 0.05)
+								discard;
+				}
+
+
+				float sample1(vec3 texcoords) {
+						/* Sample float value from a 3D texture. Assumes intensity data. */
+						return texture(u_data, texcoords.xyz).r;
+				}
+
+
+				vec4 apply_colormap(float val) {
+						val = (val - u_clim[0]) / (u_clim[1] - u_clim[0]);
+						float n = float(textureSize(u_cmdata, 0).x); // see #33842
+						val = (val * (n - 1.0) + 0.5) / n;
+						return texture2D(u_cmdata, vec2(val, 0.5));
+				}
+
+
+				void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
+
+						float max_val = -1e6;
+						int max_i = 100;
+						vec3 loc = start_loc;
+
+						// Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
+						// non-constant expression. So we use a hard-coded max, and an additional condition
+						// inside the loop.
+						for (int iter=0; iter<MAX_STEPS; iter++) {
+								if (iter >= nsteps)
+										break;
+								// Sample from the 3D texture
+								float val = sample1(loc);
+								// Apply MIP operation
+								if (val > max_val) {
+										max_val = val;
+										max_i = iter;
+								}
+								// Advance location deeper into the volume
+								loc += step;
+						}
+
+						// Refine location, gives crispier images
+						vec3 iloc = start_loc + step * (float(max_i) - 0.5);
+						vec3 istep = step / float(REFINEMENT_STEPS);
+						for (int i=0; i<REFINEMENT_STEPS; i++) {
+								max_val = max(max_val, sample1(iloc));
+								iloc += istep;
+						}
+
+						// Resolve final color
+						gl_FragColor = apply_colormap(max_val);
+				}
+
+
+				void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
+
+						gl_FragColor = vec4(0.0);	// init transparent
+						vec4 color3 = vec4(0.0);	// final color
+						vec3 dstep = 1.5 / u_size;	// step to sample derivative
+						vec3 loc = start_loc;
+
+						float low_threshold = u_renderthreshold - 0.02 * (u_clim[1] - u_clim[0]);
+
+						// Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
+						// non-constant expression. So we use a hard-coded max, and an additional condition
+						// inside the loop.
+						for (int iter=0; iter<MAX_STEPS; iter++) {
+								if (iter >= nsteps)
+										break;
+
+								// Sample from the 3D texture
+								float val = sample1(loc);
+
+								if (val > low_threshold) {
+										// Take the last interval in smaller steps
+										vec3 iloc = loc - 0.5 * step;
+										vec3 istep = step / float(REFINEMENT_STEPS);
+										for (int i=0; i<REFINEMENT_STEPS; i++) {
+												val = sample1(iloc);
+												if (val > u_renderthreshold) {
+														gl_FragColor = add_lighting(val, iloc, dstep, view_ray);
+														return;
+												}
+												iloc += istep;
+										}
+								}
+
+								// Advance location deeper into the volume
+								loc += step;
+						}
+				}
+
+
+				vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray)
+				{
+					// Calculate color by incorporating lighting
+
+						// View direction
+						vec3 V = normalize(view_ray);
+
+						// calculate normal vector from gradient
+						vec3 N;
+						float val1, val2;
+						val1 = sample1(loc + vec3(-step[0], 0.0, 0.0));
+						val2 = sample1(loc + vec3(+step[0], 0.0, 0.0));
+						N[0] = val1 - val2;
+						val = max(max(val1, val2), val);
+						val1 = sample1(loc + vec3(0.0, -step[1], 0.0));
+						val2 = sample1(loc + vec3(0.0, +step[1], 0.0));
+						N[1] = val1 - val2;
+						val = max(max(val1, val2), val);
+						val1 = sample1(loc + vec3(0.0, 0.0, -step[2]));
+						val2 = sample1(loc + vec3(0.0, 0.0, +step[2]));
+						N[2] = val1 - val2;
+						val = max(max(val1, val2), val);
+
+						float gm = length(N); // gradient magnitude
+						N = normalize(N);
+
+						// Flip normal so it points towards viewer
+						float Nselect = float(dot(N, V) > 0.0);
+						N = (2.0 * Nselect - 1.0) * N;	// ==	Nselect * N - (1.0-Nselect)*N;
+
+						// Init colors
+						vec4 ambient_color = vec4(0.0, 0.0, 0.0, 0.0);
+						vec4 diffuse_color = vec4(0.0, 0.0, 0.0, 0.0);
+						vec4 specular_color = vec4(0.0, 0.0, 0.0, 0.0);
+
+						// note: could allow multiple lights
+						for (int i=0; i<1; i++)
+						{
+								 // Get light direction (make sure to prevent zero division)
+								vec3 L = normalize(view_ray);	//lightDirs[i];
+								float lightEnabled = float( length(L) > 0.0 );
+								L = normalize(L + (1.0 - lightEnabled));
+
+								// Calculate lighting properties
+								float lambertTerm = clamp(dot(N, L), 0.0, 1.0);
+								vec3 H = normalize(L+V); // Halfway vector
+								float specularTerm = pow(max(dot(H, N), 0.0), shininess);
+
+								// Calculate mask
+								float mask1 = lightEnabled;
+
+								// Calculate colors
+								ambient_color +=	mask1 * ambient_color;	// * gl_LightSource[i].ambient;
+								diffuse_color +=	mask1 * lambertTerm;
+								specular_color += mask1 * specularTerm * specular_color;
+						}
+
+						// Calculate final color by componing different components
+						vec4 final_color;
+						vec4 color = apply_colormap(val);
+						final_color = color * (ambient_color + diffuse_color) + specular_color;
+						final_color.a = color.a;
+						return final_color;
+				}`
+
+};
+
+export { VolumeRenderShader1 };

package/Resources/WebLibraries/three/addons/shaders/WaterRefractionShader.js

@@ -0,0 +1,106 @@
+/**
+ * @module WaterRefractionShader
+ * @three_import import { WaterRefractionShader } from 'three/addons/shaders/WaterRefractionShader.js';
+ */
+
+/**
+ * Basic water refraction shader.
+ *
+ * @constant
+ * @type {ShaderMaterial~Shader}
+ */
+const WaterRefractionShader = {
+
+	name: 'WaterRefractionShader',
+
+	uniforms: {
+
+		'color': {
+			value: null
+		},
+
+		'time': {
+			value: 0
+		},
+
+		'tDiffuse': {
+			value: null
+		},
+
+		'tDudv': {
+			value: null
+		},
+
+		'textureMatrix': {
+			value: null
+		}
+
+	},
+
+	vertexShader: /* glsl */`
+
+		uniform mat4 textureMatrix;
+
+		varying vec2 vUv;
+		varying vec4 vUvRefraction;
+
+		void main() {
+
+			vUv = uv;
+
+			vUvRefraction = textureMatrix * vec4( position, 1.0 );
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform vec3 color;
+		uniform float time;
+		uniform sampler2D tDiffuse;
+		uniform sampler2D tDudv;
+
+		varying vec2 vUv;
+		varying vec4 vUvRefraction;
+
+		float blendOverlay( float base, float blend ) {
+
+			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+
+		}
+
+		vec3 blendOverlay( vec3 base, vec3 blend ) {
+
+			return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ),blendOverlay( base.b, blend.b ) );
+
+		}
+
+		void main() {
+
+		 float waveStrength = 0.5;
+		 float waveSpeed = 0.03;
+
+			// simple distortion (ripple) via dudv map (see https://www.youtube.com/watch?v=6B7IF6GOu7s)
+
+			vec2 distortedUv = texture2D( tDudv, vec2( vUv.x + time * waveSpeed, vUv.y ) ).rg * waveStrength;
+			distortedUv = vUv.xy + vec2( distortedUv.x, distortedUv.y + time * waveSpeed );
+			vec2 distortion = ( texture2D( tDudv, distortedUv ).rg * 2.0 - 1.0 ) * waveStrength;
+
+			// new uv coords
+
+			vec4 uv = vec4( vUvRefraction );
+			uv.xy += distortion;
+
+			vec4 base = texture2DProj( tDiffuse, uv );
+
+			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
+
+			#include <tonemapping_fragment>
+			#include <colorspace_fragment>
+
+		}`
+
+};
+
+export { WaterRefractionShader };

package/Resources/WebLibraries/three/addons/textures/FlakesTexture.js

@@ -0,0 +1,54 @@
+/**
+ * Utility class for generating a flakes texture image. This image might be used
+ * as a normal map to produce a car paint like effect.
+ *
+ * @three_import import { FlakesTexture } from 'three/addons/textures/FlakesTexture.js';
+ */
+class FlakesTexture {
+
+	/**
+	 * Generates a new flakes texture image. The result is a canvas
+	 * that can be used as an input for {@link CanvasTexture}.
+	 *
+	 * @param {number} [width=512] - The width of the image.
+	 * @param {number} [height=512] - The height of the image.
+	 * @return {HTMLCanvasElement} The generated image.
+	 */
+	constructor( width = 512, height = 512 ) {
+
+		const canvas = document.createElement( 'canvas' );
+		canvas.width = width;
+		canvas.height = height;
+
+		const context = canvas.getContext( '2d' );
+		context.fillStyle = 'rgb(127,127,255)';
+		context.fillRect( 0, 0, width, height );
+
+		for ( let i = 0; i < 4000; i ++ ) {
+
+			const x = Math.random() * width;
+			const y = Math.random() * height;
+			const r = Math.random() * 3 + 3;
+
+			let nx = Math.random() * 2 - 1;
+			let ny = Math.random() * 2 - 1;
+			let nz = 1.5;
+
+			const l = Math.sqrt( nx * nx + ny * ny + nz * nz );
+
+			nx /= l; ny /= l; nz /= l;
+
+			context.fillStyle = 'rgb(' + ( nx * 127 + 127 ) + ',' + ( ny * 127 + 127 ) + ',' + ( nz * 255 ) + ')';
+			context.beginPath();
+			context.arc( x, y, r, 0, Math.PI * 2 );
+			context.fill();
+
+		}
+
+		return canvas;
+
+	}
+
+}
+
+export { FlakesTexture };