main repo

This commit is contained in:
Basilosaurusrex
2025-11-24 18:09:40 +01:00
parent b636ee5e70
commit f027651f9b
34146 changed files with 4436636 additions and 0 deletions

View File

@@ -0,0 +1,183 @@
import {
Color,
ShaderMaterial,
UniformsLib,
UniformsUtils,
} from 'three';
/**
* A special line material for meshes loaded via {@link LDrawLoader}.
*
* This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
* import the class from `LDrawConditionalLineNodeMaterial.js`.
*
* @augments ShaderMaterial
* @three_import import { LDrawConditionalLineMaterial } from 'three/addons/materials/LDrawConditionalLineMaterial.js';
*/
class LDrawConditionalLineMaterial extends ShaderMaterial {
static get type() {
return 'LDrawConditionalLineMaterial';
}
/**
* Constructs a new conditional line material.
*
* @param {Object} [parameters] - An object with one or more properties
* defining the material's appearance. Any property of the material
* (including any property from inherited materials) can be passed
* in here. Color values can be passed any type of value accepted
* by {@link Color#set}.
*/
constructor( parameters ) {
super( {
uniforms: UniformsUtils.merge( [
UniformsLib.fog,
{
diffuse: {
value: new Color()
},
opacity: {
value: 1.0
}
}
] ),
vertexShader: /* glsl */`
attribute vec3 control0;
attribute vec3 control1;
attribute vec3 direction;
varying float discardFlag;
#include <common>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
#include <color_vertex>
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
// Transform the line segment ends and control points into camera clip space
vec4 c0 = projectionMatrix * modelViewMatrix * vec4( control0, 1.0 );
vec4 c1 = projectionMatrix * modelViewMatrix * vec4( control1, 1.0 );
vec4 p0 = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
vec4 p1 = projectionMatrix * modelViewMatrix * vec4( position + direction, 1.0 );
c0.xy /= c0.w;
c1.xy /= c1.w;
p0.xy /= p0.w;
p1.xy /= p1.w;
// Get the direction of the segment and an orthogonal vector
vec2 dir = p1.xy - p0.xy;
vec2 norm = vec2( -dir.y, dir.x );
// Get control point directions from the line
vec2 c0dir = c0.xy - p1.xy;
vec2 c1dir = c1.xy - p1.xy;
// If the vectors to the controls points are pointed in different directions away
// from the line segment then the line should not be drawn.
float d0 = dot( normalize( norm ), normalize( c0dir ) );
float d1 = dot( normalize( norm ), normalize( c1dir ) );
discardFlag = float( sign( d0 ) != sign( d1 ) );
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>
#include <fog_vertex>
}
`,
fragmentShader: /* glsl */`
uniform vec3 diffuse;
uniform float opacity;
varying float discardFlag;
#include <common>
#include <color_pars_fragment>
#include <fog_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
if ( discardFlag > 0.5 ) discard;
#include <clipping_planes_fragment>
vec3 outgoingLight = vec3( 0.0 );
vec4 diffuseColor = vec4( diffuse, opacity );
#include <logdepthbuf_fragment>
#include <color_fragment>
outgoingLight = diffuseColor.rgb; // simple shader
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
#include <tonemapping_fragment>
#include <colorspace_fragment>
#include <fog_fragment>
#include <premultiplied_alpha_fragment>
}
`,
} );
Object.defineProperties( this, {
/**
* The material's opacity.
*
* @name LDrawConditionalLineMaterial#opacity
* @type {number}
* @default 1
*/
opacity: {
get: function () {
return this.uniforms.opacity.value;
},
set: function ( value ) {
this.uniforms.opacity.value = value;
}
},
/**
* The material's color.
*
* @name LDrawConditionalLineMaterial#color
* @type {Color}
* @default (1,1,1)
*/
color: {
get: function () {
return this.uniforms.diffuse.value;
}
}
} );
this.setValues( parameters );
/**
* This flag can be used for type testing.
*
* @type {boolean}
* @readonly
* @default true
*/
this.isLDrawConditionalLineMaterial = true;
}
}
export { LDrawConditionalLineMaterial };

View File

@@ -0,0 +1,154 @@
import { Color } from 'three';
import { attribute, cameraProjectionMatrix, dot, float, Fn, modelViewMatrix, modelViewProjection, NodeMaterial, normalize, positionGeometry, sign, uniform, varyingProperty, vec2, vec4 } from 'three/tsl';
/**
* A special line material for meshes loaded via {@link LDrawLoader}.
*
* This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
* import the class from `LDrawConditionalLineMaterial.js`.
*
* @augments NodeMaterial
* @three_import import { LDrawConditionalLineMaterial } from 'three/addons/materials/LDrawConditionalLineMaterial.js';
*/
class LDrawConditionalLineMaterial extends NodeMaterial {
static get type() {
return 'LDrawConditionalLineMaterial';
}
/**
* Constructs a new conditional line material.
*
* @param {Object} [parameters] - An object with one or more properties
* defining the material's appearance. Any property of the material
* (including any property from inherited materials) can be passed
* in here. Color values can be passed any type of value accepted
* by {@link Color#set}.
*/
constructor( parameters ) {
super();
const vertexNode = /*@__PURE__*/ Fn( () => {
const control0 = attribute( 'control0', 'vec3' );
const control1 = attribute( 'control1', 'vec3' );
const direction = attribute( 'direction', 'vec3' );
const mvp = cameraProjectionMatrix.mul( modelViewMatrix );
// Transform the line segment ends and control points into camera clip space
const c0 = mvp.mul( vec4( control0, 1 ) ).toVar();
const c1 = mvp.mul( vec4( control1, 1 ) ).toVar();
const p0 = mvp.mul( vec4( positionGeometry, 1 ) ).toVar();
const p1 = mvp.mul( vec4( positionGeometry.add( direction ), 1 ) ).toVar();
c0.xy.divAssign( c0.w );
c1.xy.divAssign( c1.w );
p0.xy.divAssign( p0.w );
p1.xy.divAssign( p1.w );
// Get the direction of the segment and an orthogonal vector
const dir = p1.xy.sub( p0.xy ).toVar();
const norm = vec2( dir.y.negate(), dir.x ).toVar();
// Get control point directions from the line
const c0dir = c0.xy.sub( p1.xy ).toVar();
const c1dir = c1.xy.sub( p1.xy ).toVar();
// If the vectors to the controls points are pointed in different directions away
// from the line segment then the line should not be drawn.
const d0 = dot( normalize( norm ), normalize( c0dir ) ).toVar();
const d1 = dot( normalize( norm ), normalize( c1dir ) ).toVar();
const discardFlag = sign( d0 ).notEqual( sign( d1 ) ).select( float( 1 ), float( 0 ) );
varyingProperty( 'float', 'discardFlag' ).assign( discardFlag );
return modelViewProjection;
} )();
const fragmentNode = /*@__PURE__*/ Fn( () => {
const discardFlag = varyingProperty( 'float', 'discardFlag' );
discardFlag.greaterThan( float( 0.5 ) ).discard();
return vec4( this._diffuseUniform, this._opacityUniform );
} )();
this.vertexNode = vertexNode;
this.fragmentNode = fragmentNode;
this._diffuseUniform = uniform( new Color() );
this._opacityUniform = uniform( 1 );
//
Object.defineProperties( this, {
/**
* The material's opacity.
*
* @name LDrawConditionalLineMaterial#opacity
* @type {number}
* @default 1
*/
opacity: {
get: function () {
return this._opacityUniform.value;
},
set: function ( value ) {
this._opacityUniform.value = value;
}
},
/**
* The material's color.
*
* @name LDrawConditionalLineMaterial#color
* @type {Color}
* @default (1,1,1)
*/
color: {
get: function () {
return this._diffuseUniform.value;
},
set: function ( value ) {
this._diffuseUniform.value.copy( value );
}
}
} );
this.setValues( parameters );
/**
* This flag can be used for type testing.
*
* @type {boolean}
* @readonly
* @default true
*/
this.isLDrawConditionalLineMaterial = true;
}
}
export { LDrawConditionalLineMaterial };

View File

@@ -0,0 +1,434 @@
/**
* MeshGouraudMaterial
*
* Lambert illumination model with Gouraud (per-vertex) shading
*
*/
import { UniformsUtils, UniformsLib, ShaderMaterial, Color, MultiplyOperation } from 'three';
const GouraudShader = {
name: 'GouraudShader',
uniforms: UniformsUtils.merge( [
UniformsLib.common,
UniformsLib.specularmap,
UniformsLib.envmap,
UniformsLib.aomap,
UniformsLib.lightmap,
UniformsLib.emissivemap,
UniformsLib.fog,
UniformsLib.lights,
{
emissive: { value: new Color( 0x000000 ) }
}
] ),
vertexShader: /* glsl */`
#define GOURAUD
varying vec3 vLightFront;
varying vec3 vIndirectFront;
#ifdef DOUBLE_SIDED
varying vec3 vLightBack;
varying vec3 vIndirectBack;
#endif
#include <common>
#include <uv_pars_vertex>
#include <envmap_pars_vertex>
#include <bsdfs>
#include <lights_pars_begin>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
#include <uv_vertex>
#include <color_vertex>
#include <morphcolor_vertex>
#include <beginnormal_vertex>
#include <morphnormal_vertex>
#include <skinbase_vertex>
#include <skinnormal_vertex>
#include <defaultnormal_vertex>
#include <begin_vertex>
#include <morphtarget_vertex>
#include <skinning_vertex>
#include <project_vertex>
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>
#include <worldpos_vertex>
#include <envmap_vertex>
// inlining legacy <lights_lambert_vertex>
vec3 diffuse = vec3( 1.0 );
vec3 geometryPosition = mvPosition.xyz;
vec3 geometryNormal = normalize( transformedNormal );
vec3 geometryViewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( -mvPosition.xyz );
vec3 backGeometryNormal = - geometryNormal;
vLightFront = vec3( 0.0 );
vIndirectFront = vec3( 0.0 );
#ifdef DOUBLE_SIDED
vLightBack = vec3( 0.0 );
vIndirectBack = vec3( 0.0 );
#endif
IncidentLight directLight;
float dotNL;
vec3 directLightColor_Diffuse;
vIndirectFront += getAmbientLightIrradiance( ambientLightColor );
#if defined( USE_LIGHT_PROBES )
vIndirectFront += getLightProbeIrradiance( lightProbe, geometryNormal );
#endif
#ifdef DOUBLE_SIDED
vIndirectBack += getAmbientLightIrradiance( ambientLightColor );
#if defined( USE_LIGHT_PROBES )
vIndirectBack += getLightProbeIrradiance( lightProbe, backGeometryNormal );
#endif
#endif
#if NUM_POINT_LIGHTS > 0
#pragma unroll_loop_start
for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {
getPointLightInfo( pointLights[ i ], geometryPosition, directLight );
dotNL = dot( geometryNormal, directLight.direction );
directLightColor_Diffuse = directLight.color;
vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
#ifdef DOUBLE_SIDED
vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
#endif
}
#pragma unroll_loop_end
#endif
#if NUM_SPOT_LIGHTS > 0
#pragma unroll_loop_start
for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {
getSpotLightInfo( spotLights[ i ], geometryPosition, directLight );
dotNL = dot( geometryNormal, directLight.direction );
directLightColor_Diffuse = directLight.color;
vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
#ifdef DOUBLE_SIDED
vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
#endif
}
#pragma unroll_loop_end
#endif
#if NUM_DIR_LIGHTS > 0
#pragma unroll_loop_start
for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
getDirectionalLightInfo( directionalLights[ i ], directLight );
dotNL = dot( geometryNormal, directLight.direction );
directLightColor_Diffuse = directLight.color;
vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
#ifdef DOUBLE_SIDED
vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
#endif
}
#pragma unroll_loop_end
#endif
#if NUM_HEMI_LIGHTS > 0
#pragma unroll_loop_start
for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {
vIndirectFront += getHemisphereLightIrradiance( hemisphereLights[ i ], geometryNormal );
#ifdef DOUBLE_SIDED
vIndirectBack += getHemisphereLightIrradiance( hemisphereLights[ i ], backGeometryNormal );
#endif
}
#pragma unroll_loop_end
#endif
#include <shadowmap_vertex>
#include <fog_vertex>
}`,
fragmentShader: /* glsl */`
#define GOURAUD
uniform vec3 diffuse;
uniform vec3 emissive;
uniform float opacity;
varying vec3 vLightFront;
varying vec3 vIndirectFront;
#ifdef DOUBLE_SIDED
varying vec3 vLightBack;
varying vec3 vIndirectBack;
#endif
#include <common>
#include <packing>
#include <dithering_pars_fragment>
#include <color_pars_fragment>
#include <uv_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <alphatest_pars_fragment>
#include <aomap_pars_fragment>
#include <lightmap_pars_fragment>
#include <emissivemap_pars_fragment>
#include <envmap_common_pars_fragment>
#include <envmap_pars_fragment>
#include <bsdfs>
#include <lights_pars_begin>
#include <fog_pars_fragment>
#include <shadowmap_pars_fragment>
#include <shadowmask_pars_fragment>
#include <specularmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
#include <clipping_planes_fragment>
vec4 diffuseColor = vec4( diffuse, opacity );
ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
vec3 totalEmissiveRadiance = emissive;
#include <logdepthbuf_fragment>
#include <map_fragment>
#include <color_fragment>
#include <alphamap_fragment>
#include <alphatest_fragment>
#include <specularmap_fragment>
#include <emissivemap_fragment>
// accumulation
#ifdef DOUBLE_SIDED
reflectedLight.indirectDiffuse += ( gl_FrontFacing ) ? vIndirectFront : vIndirectBack;
#else
reflectedLight.indirectDiffuse += vIndirectFront;
#endif
#ifdef USE_LIGHTMAP
vec4 lightMapTexel = texture2D( lightMap, vLightMapUv );
vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity;
reflectedLight.indirectDiffuse += lightMapIrradiance;
#endif
reflectedLight.indirectDiffuse *= BRDF_Lambert( diffuseColor.rgb );
#ifdef DOUBLE_SIDED
reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack;
#else
reflectedLight.directDiffuse = vLightFront;
#endif
reflectedLight.directDiffuse *= BRDF_Lambert( diffuseColor.rgb ) * getShadowMask();
// modulation
#include <aomap_fragment>
vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;
#include <envmap_fragment>
#include <opaque_fragment>
#include <tonemapping_fragment>
#include <colorspace_fragment>
#include <fog_fragment>
#include <premultiplied_alpha_fragment>
#include <dithering_fragment>
}`
};
//
class MeshGouraudMaterial extends ShaderMaterial {
constructor( parameters ) {
super();
console.warn( 'THREE.MeshGouraudMaterial: MeshGouraudMaterial has been deprecated and will be removed with r183. Use THREE.MeshLambertMaterial instead.' ); // @deprecated r173
this.isMeshGouraudMaterial = true;
this.type = 'MeshGouraudMaterial';
//this.color = new THREE.Color( 0xffffff ); // diffuse
//this.map = null;
//this.lightMap = null;
//this.lightMapIntensity = 1.0;
//this.aoMap = null;
//this.aoMapIntensity = 1.0;
//this.emissive = new THREE.Color( 0x000000 );
//this.emissiveIntensity = 1.0;
//this.emissiveMap = null;
//this.specularMap = null;
//this.alphaMap = null;
//this.envMap = null;
this.combine = MultiplyOperation; // combine has no uniform
//this.reflectivity = 1;
//this.refractionRatio = 0.98;
this.fog = false; // set to use scene fog
this.lights = true; // set to use scene lights
this.clipping = false; // set to use user-defined clipping planes
const shader = GouraudShader;
this.defines = Object.assign( {}, shader.defines );
this.uniforms = UniformsUtils.clone( shader.uniforms );
this.vertexShader = shader.vertexShader;
this.fragmentShader = shader.fragmentShader;
const exposePropertyNames = [
'map', 'lightMap', 'lightMapIntensity', 'aoMap', 'aoMapIntensity',
'emissive', 'emissiveIntensity', 'emissiveMap', 'specularMap', 'alphaMap',
'envMap', 'reflectivity', 'refractionRatio', 'opacity', 'diffuse'
];
for ( const propertyName of exposePropertyNames ) {
Object.defineProperty( this, propertyName, {
get: function () {
return this.uniforms[ propertyName ].value;
},
set: function ( value ) {
this.uniforms[ propertyName ].value = value;
}
} );
}
Object.defineProperty( this, 'color', Object.getOwnPropertyDescriptor( this, 'diffuse' ) );
this.setValues( parameters );
}
copy( source ) {
super.copy( source );
this.color.copy( source.color );
this.map = source.map;
this.lightMap = source.lightMap;
this.lightMapIntensity = source.lightMapIntensity;
this.aoMap = source.aoMap;
this.aoMapIntensity = source.aoMapIntensity;
this.emissive.copy( source.emissive );
this.emissiveMap = source.emissiveMap;
this.emissiveIntensity = source.emissiveIntensity;
this.specularMap = source.specularMap;
this.alphaMap = source.alphaMap;
this.envMap = source.envMap;
this.combine = source.combine;
this.reflectivity = source.reflectivity;
this.refractionRatio = source.refractionRatio;
this.wireframe = source.wireframe;
this.wireframeLinewidth = source.wireframeLinewidth;
this.wireframeLinecap = source.wireframeLinecap;
this.wireframeLinejoin = source.wireframeLinejoin;
this.fog = source.fog;
return this;
}
}
export { MeshGouraudMaterial };

View File

@@ -0,0 +1,167 @@
import { MeshPhysicalMaterial } from 'three';
/**
* The aim of this mesh material is to use information from a post processing pass in the diffuse color pass.
* This material is based on the MeshPhysicalMaterial.
*
* In the current state, only the information of a screen space AO pass can be used in the material.
* Actually, the output of any screen space AO (SSAO, GTAO) can be used,
* as it is only necessary to provide the AO in one color channel of a texture,
* however the AO pass must be rendered prior to the color pass,
* which makes the post-processing pass somewhat of a pre-processing pass.
* Fot this purpose a new map (`aoPassMap`) is added to the material.
* The value of the map is used the same way as the `aoMap` value.
*
* Motivation to use the outputs AO pass directly in the material:
* The incident light of a fragment is composed of ambient light, direct light and indirect light
* Ambient Occlusion only occludes ambient light and environment light, but not direct light.
* Direct light is only occluded by geometry that casts shadows.
* And of course the emitted light should not be darkened by ambient occlusion either.
* This cannot be achieved if the AO post processing pass is simply blended with the diffuse render pass.
*
* Further extension work might be to use the output of an SSR pass or an HBIL pass from a previous frame.
* This would then create the possibility of SSR and IR depending on material properties such as `roughness`, `metalness` and `reflectivity`.
*
* @augments MeshPhysicalMaterial
* @three_import import { MeshPostProcessingMaterial } from 'three/addons/materials/MeshPostProcessingMaterial.js';
*/
class MeshPostProcessingMaterial extends MeshPhysicalMaterial {
/**
* Constructs a new conditional line material.
*
* @param {Object} [parameters] - An object with one or more properties
* defining the material's appearance. Any property of the material
* (including any property from inherited materials) can be passed
* in here. Color values can be passed any type of value accepted
* by {@link Color#set}.
*/
constructor( parameters ) {
const aoPassMap = parameters.aoPassMap;
const aoPassMapScale = parameters.aoPassMapScale || 1.0;
delete parameters.aoPassMap;
delete parameters.aoPassMapScale;
super( parameters );
this.onBeforeCompile = this._onBeforeCompile;
this.customProgramCacheKey = this._customProgramCacheKey;
this._aoPassMap = aoPassMap;
/**
* The scale of the AO pass.
*
* @type {number}
* @default 1
*/
this.aoPassMapScale = aoPassMapScale;
this._shader = null;
}
/**
* A texture representing the AO pass.
*
* @type {Texture}
*/
get aoPassMap() {
return this._aoPassMap;
}
set aoPassMap( aoPassMap ) {
this._aoPassMap = aoPassMap;
this.needsUpdate = true;
this._setUniforms();
}
_customProgramCacheKey() {
return this._aoPassMap !== undefined && this._aoPassMap !== null ? 'aoPassMap' : '';
}
_onBeforeCompile( shader ) {
this._shader = shader;
if ( this._aoPassMap !== undefined && this._aoPassMap !== null ) {
shader.fragmentShader = shader.fragmentShader.replace(
'#include <aomap_pars_fragment>',
aomap_pars_fragment_replacement
);
shader.fragmentShader = shader.fragmentShader.replace(
'#include <aomap_fragment>',
aomap_fragment_replacement
);
}
this._setUniforms();
}
_setUniforms() {
if ( this._shader ) {
this._shader.uniforms.tAoPassMap = { value: this._aoPassMap };
this._shader.uniforms.aoPassMapScale = { value: this.aoPassMapScale };
}
}
}
const aomap_pars_fragment_replacement = /* glsl */`
#ifdef USE_AOMAP
uniform sampler2D aoMap;
uniform float aoMapIntensity;
#endif
uniform sampler2D tAoPassMap;
uniform float aoPassMapScale;
`;
const aomap_fragment_replacement = /* glsl */`
#ifndef AOPASSMAP_SWIZZLE
#define AOPASSMAP_SWIZZLE r
#endif
float ambientOcclusion = texelFetch( tAoPassMap, ivec2( gl_FragCoord.xy * aoPassMapScale ), 0 ).AOPASSMAP_SWIZZLE;
#ifdef USE_AOMAP
// reads channel R, compatible with a combined OcclusionRoughnessMetallic (RGB) texture
ambientOcclusion = min( ambientOcclusion, texture2D( aoMap, vAoMapUv ).r );
ambientOcclusion *= ( ambientOcclusion - 1.0 ) * aoMapIntensity + 1.0;
#endif
reflectedLight.indirectDiffuse *= ambientOcclusion;
#if defined( USE_CLEARCOAT )
clearcoatSpecularIndirect *= ambientOcclusion;
#endif
#if defined( USE_SHEEN )
sheenSpecularIndirect *= ambientOcclusion;
#endif
#if defined( USE_ENVMAP ) && defined( STANDARD )
float dotNV = saturate( dot( geometryNormal, geometryViewDir ) );
reflectedLight.indirectSpecular *= computeSpecularOcclusion( dotNV, ambientOcclusion, material.roughness );
#endif
`;
export { MeshPostProcessingMaterial };

View File

@@ -0,0 +1,533 @@
import * as THREE from 'three';
import * as TSL from 'three/tsl';
// some helpers below are ported from Blender and converted to TSL
const mapRange = TSL.Fn( ( [ x, fromMin, fromMax, toMin, toMax, clmp ] ) => {
const factor = x.sub( fromMin ).div( fromMax.sub( fromMin ) );
const result = toMin.add( factor.mul( toMax.sub( toMin ) ) );
return TSL.select( clmp, TSL.max( TSL.min( result, toMax ), toMin ), result );
} );
const voronoi3d = TSL.wgslFn( `
fn voronoi3d(x: vec3<f32>, smoothness: f32, randomness: f32) -> f32
{
let p = floor(x);
let f = fract(x);
var res = 0.0;
var totalWeight = 0.0;
for (var k = -1; k <= 1; k++)
{
for (var j = -1; j <= 1; j++)
{
for (var i = -1; i <= 1; i++)
{
let b = vec3<f32>(f32(i), f32(j), f32(k));
let hashOffset = hash3d(p + b) * randomness;
let r = b - f + hashOffset;
let d = length(r);
let weight = exp(-d * d / max(smoothness * smoothness, 0.001));
res += d * weight;
totalWeight += weight;
}
}
}
if (totalWeight > 0.0)
{
res /= totalWeight;
}
return smoothstep(0.0, 1.0, res);
}
fn hash3d(p: vec3<f32>) -> vec3<f32>
{
var p3 = fract(p * vec3<f32>(0.1031, 0.1030, 0.0973));
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.xxy + p3.yzz) * p3.zyx);
}
` );
// const hash3d = TSL.Fn( ( [ p ] ) => {
// const p3 = p.mul( TSL.vec3( 0.1031, 0.1030, 0.0973 ) ).fract();
// const dotProduct = p3.dot( p3.yzx.add( 33.33 ) );
// p3.addAssign( dotProduct );
// return p3.xxy.add( p3.yzz ).mul( p3.zyx ).fract();
// } );
// const voronoi3d = TSL.Fn( ( [ x, smoothness, randomness ] ) => {
// let p = TSL.floor(x);
// let f = TSL.fract(x);
// var res = TSL.float(0.0);
// var totalWeight = TSL.float(0.0);
// TSL.Loop( 3, 3, 3, ( { k, j, i } ) => {
// let b = TSL.vec3(TSL.float(i).sub(1), TSL.float(j).sub(1), TSL.float(k).sub(1));
// let hashOffset = hash3d(p.add(b)).mul(randomness);
// let r = b.sub(f).add(hashOffset);
// let d = TSL.length(r);
// let weight = TSL.exp(d.negate().mul(d).div(TSL.max(smoothness.mul(smoothness), 0.001)));
// res.addAssign(d.mul(weight));
// totalWeight.addAssign(weight);
// } );
// res.assign(TSL.select(totalWeight.greaterThan(0.0), res.div(totalWeight), res));
// return TSL.smoothstep(0.0, 1.0, res);
// } );
const softLightMix = TSL.Fn( ( [ t, col1, col2 ] ) => {
const tm = TSL.float( 1.0 ).sub( t );
const one = TSL.vec3( 1.0 );
const scr = one.sub( one.sub( col2 ).mul( one.sub( col1 ) ) );
return tm.mul( col1 ).add( t.mul( one.sub( col1 ).mul( col2 ).mul( col1 ).add( col1.mul( scr ) ) ) );
} );
const noiseFbm = TSL.Fn( ( [ p, detail, roughness, lacunarity, useNormalize ] ) => {
const fscale = TSL.float( 1.0 ).toVar();
const amp = TSL.float( 1.0 ).toVar();
const maxamp = TSL.float( 0.0 ).toVar();
const sum = TSL.float( 0.0 ).toVar();
const iterations = detail.floor();
TSL.Loop( iterations, () => {
const t = TSL.mx_noise_float( p.mul( fscale ) );
sum.addAssign( t.mul( amp ) );
maxamp.addAssign( amp );
amp.mulAssign( roughness );
fscale.mulAssign( lacunarity );
} );
const rmd = detail.sub( iterations );
const hasRemainder = rmd.greaterThan( 0.001 );
return TSL.select(
hasRemainder,
TSL.select(
useNormalize.equal( 1 ),
( () => {
const t = TSL.mx_noise_float( p.mul( fscale ) );
const sum2 = sum.add( t.mul( amp ) );
const maxamp2 = maxamp.add( amp );
const normalizedSum = sum.div( maxamp ).mul( 0.5 ).add( 0.5 );
const normalizedSum2 = sum2.div( maxamp2 ).mul( 0.5 ).add( 0.5 );
return TSL.mix( normalizedSum, normalizedSum2, rmd );
} )(),
( () => {
const t = TSL.mx_noise_float( p.mul( fscale ) );
const sum2 = sum.add( t.mul( amp ) );
return TSL.mix( sum, sum2, rmd );
} )()
),
TSL.select(
useNormalize.equal( 1 ),
sum.div( maxamp ).mul( 0.5 ).add( 0.5 ),
sum
)
);
} );
const noiseFbm3d = TSL.Fn( ( [ p, detail, roughness, lacunarity, useNormalize ] ) => {
const fscale = TSL.float( 1.0 ).toVar();
const amp = TSL.float( 1.0 ).toVar();
const maxamp = TSL.float( 0.0 ).toVar();
const sum = TSL.vec3( 0.0 ).toVar();
const iterations = detail.floor();
TSL.Loop( iterations, () => {
const t = TSL.mx_noise_vec3( p.mul( fscale ) );
sum.addAssign( t.mul( amp ) );
maxamp.addAssign( amp );
amp.mulAssign( roughness );
fscale.mulAssign( lacunarity );
} );
const rmd = detail.sub( iterations );
const hasRemainder = rmd.greaterThan( 0.001 );
return TSL.select(
hasRemainder,
TSL.select(
useNormalize.equal( 1 ),
( () => {
const t = TSL.mx_noise_vec3( p.mul( fscale ) );
const sum2 = sum.add( t.mul( amp ) );
const maxamp2 = maxamp.add( amp );
const normalizedSum = sum.div( maxamp ).mul( 0.5 ).add( 0.5 );
const normalizedSum2 = sum2.div( maxamp2 ).mul( 0.5 ).add( 0.5 );
return TSL.mix( normalizedSum, normalizedSum2, rmd );
} )(),
( () => {
const t = TSL.mx_noise_vec3( p.mul( fscale ) );
const sum2 = sum.add( t.mul( amp ) );
return TSL.mix( sum, sum2, rmd );
} )()
),
TSL.select(
useNormalize.equal( 1 ),
sum.div( maxamp ).mul( 0.5 ).add( 0.5 ),
sum
)
);
} );
const woodCenter = TSL.Fn( ( [ p, centerSize ] ) => {
const pxyCenter = p.mul( TSL.vec3( 1, 1, 0 ) ).length();
const center = mapRange( pxyCenter, 0, 1, 0, centerSize, true );
return center;
} );
const spaceWarp = TSL.Fn( ( [ p, warpStrength, xyScale, zScale ] ) => {
const combinedXyz = TSL.vec3( xyScale, xyScale, zScale ).mul( p );
const noise = noiseFbm3d( combinedXyz.mul( 1.6 * 1.5 ), TSL.float( 1 ), TSL.float( 0.5 ), TSL.float( 2 ), TSL.int( 1 ) ).sub( 0.5 ).mul( warpStrength );
const pXy = p.mul( TSL.vec3( 1, 1, 0 ) );
const normalizedXy = pXy.normalize();
const warp = noise.mul( normalizedXy ).add( pXy );
return warp;
} );
const woodRings = TSL.Fn( ( [ w, ringThickness, ringBias, ringSizeVariance, ringVarianceScale, barkThickness ] ) => {
const rings = noiseFbm( w.mul( ringVarianceScale ), TSL.float( 1 ), TSL.float( 0.5 ), TSL.float( 1 ), TSL.int( 1 ) ).mul( ringSizeVariance ).add( w ).mul( ringThickness ).fract().mul( barkThickness );
const sharpRings = TSL.min( mapRange( rings, 0, ringBias, 0, 1, TSL.bool( true ) ), mapRange( rings, ringBias, 1, 1, 0, TSL.bool( true ) ) );
const blurAmount = TSL.max( TSL.positionView.length().div( 10 ), 1 );
const blurredRings = TSL.smoothstep( blurAmount.negate(), blurAmount, sharpRings.sub( 0.5 ) ).mul( 0.5 ).add( 0.5 );
return blurredRings;
} );
const woodDetail = TSL.Fn( ( [ warp, p, y, splotchScale ] ) => {
const radialCoords = TSL.clamp( TSL.atan( warp.y, warp.x ).div( TSL.PI2 ).add( 0.5 ), 0, 1 ).mul( TSL.PI2.mul( 3 ) );
const combinedXyz = TSL.vec3( radialCoords.sin(), y, radialCoords.cos().mul( p.z ) );
const scaled = TSL.vec3( 0.1, 1.19, 0.05 ).mul( combinedXyz );
return noiseFbm( scaled.mul( splotchScale ), TSL.float( 1 ), TSL.float( 0.5 ), TSL.float( 2 ), TSL.bool( true ) );
} );
const cellStructure = TSL.Fn( ( [ p, cellScale, cellSize ] ) => {
const warp = spaceWarp( p.mul( cellScale.div( 50 ) ), cellScale.div( 1000 ), 0.1, 1.77 );
const cells = voronoi3d( warp.xy.mul( 75 ), 0.5, 1 );
return mapRange( cells, cellSize, cellSize.add( 0.21 ), 0, 1, TSL.bool( true ) );
} );
const wood = TSL.Fn( ( [
p,
centerSize,
largeWarpScale,
largeGrainStretch,
smallWarpStrength,
smallWarpScale,
fineWarpStrength,
fineWarpScale,
ringThickness,
ringBias,
ringSizeVariance,
ringVarianceScale,
barkThickness,
splotchScale,
splotchIntensity,
cellScale,
cellSize,
darkGrainColor,
lightGrainColor
] ) => {
const center = woodCenter( p, centerSize );
const mainWarp = spaceWarp( spaceWarp( p, center, largeWarpScale, largeGrainStretch ), smallWarpStrength, smallWarpScale, 0.17 );
const detailWarp = spaceWarp( mainWarp, fineWarpStrength, fineWarpScale, 0.17 );
const rings = woodRings( detailWarp.length(), TSL.float( 1 ).div( ringThickness ), ringBias, ringSizeVariance, ringVarianceScale, barkThickness );
const detail = woodDetail( detailWarp, p, detailWarp.length(), splotchScale );
const cells = cellStructure( mainWarp, cellScale, cellSize.div( TSL.max( TSL.positionView.length().mul( 10 ), 1 ) ) );
const baseColor = TSL.mix( darkGrainColor, lightGrainColor, rings );
return softLightMix( splotchIntensity, softLightMix( 0.407, baseColor, cells ), detail );
} );
const woodParams = {
teak: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.11, largeWarpScale: 0.32, largeGrainStretch: 0.24, smallWarpStrength: 0.059,
smallWarpScale: 2, fineWarpStrength: 0.006, fineWarpScale: 32.8, ringThickness: 1/34,
ringBias: 0.03, ringSizeVariance: 0.03, ringVarianceScale: 4.4, barkThickness: 0.3,
splotchScale: 0.2, splotchIntensity: 0.541, cellScale: 910, cellSize: 0.1,
darkGrainColor: '#0c0504', lightGrainColor: '#926c50'
},
walnut: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.07, largeWarpScale: 0.42, largeGrainStretch: 0.34, smallWarpStrength: 0.016,
smallWarpScale: 10.3, fineWarpStrength: 0.028, fineWarpScale: 12.7, ringThickness: 1/32,
ringBias: 0.08, ringSizeVariance: 0.03, ringVarianceScale: 5.5, barkThickness: 0.98,
splotchScale: 1.84, splotchIntensity: 0.97, cellScale: 710, cellSize: 0.31,
darkGrainColor: '#311e13', lightGrainColor: '#523424'
},
white_oak: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.23, largeWarpScale: 0.21, largeGrainStretch: 0.21, smallWarpStrength: 0.034,
smallWarpScale: 2.44, fineWarpStrength: 0.01, fineWarpScale: 14.3, ringThickness: 1/34,
ringBias: 0.82, ringSizeVariance: 0.16, ringVarianceScale: 1.4, barkThickness: 0.7,
splotchScale: 0.2, splotchIntensity: 0.541, cellScale: 800, cellSize: 0.28,
darkGrainColor: '#8b4c21', lightGrainColor: '#c57e43'
},
pine: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.23, largeWarpScale: 0.21, largeGrainStretch: 0.18, smallWarpStrength: 0.041,
smallWarpScale: 2.44, fineWarpStrength: 0.006, fineWarpScale: 23.2, ringThickness: 1/24,
ringBias: 0.1, ringSizeVariance: 0.07, ringVarianceScale: 5, barkThickness: 0.35,
splotchScale: 0.51, splotchIntensity: 3.32, cellScale: 1480, cellSize: 0.07,
darkGrainColor: '#c58355', lightGrainColor: '#d19d61'
},
poplar: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.43, largeWarpScale: 0.33, largeGrainStretch: 0.18, smallWarpStrength: 0.04,
smallWarpScale: 4.3, fineWarpStrength: 0.004, fineWarpScale: 33.6, ringThickness: 1/37,
ringBias: 0.07, ringSizeVariance: 0.03, ringVarianceScale: 3.8, barkThickness: 0.3,
splotchScale: 1.92, splotchIntensity: 0.71, cellScale: 830, cellSize: 0.04,
darkGrainColor: '#716347', lightGrainColor: '#998966'
},
maple: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.4, largeWarpScale: 0.38, largeGrainStretch: 0.25, smallWarpStrength: 0.067,
smallWarpScale: 2.5, fineWarpStrength: 0.005, fineWarpScale: 33.6, ringThickness: 1/35,
ringBias: 0.1, ringSizeVariance: 0.07, ringVarianceScale: 4.6, barkThickness: 0.61,
splotchScale: 0.46, splotchIntensity: 1.49, cellScale: 800, cellSize: 0.03,
darkGrainColor: '#b08969', lightGrainColor: '#bc9d7d'
},
red_oak: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.21, largeWarpScale: 0.24, largeGrainStretch: 0.25, smallWarpStrength: 0.044,
smallWarpScale: 2.54, fineWarpStrength: 0.01, fineWarpScale: 14.5, ringThickness: 1/34,
ringBias: 0.92, ringSizeVariance: 0.03, ringVarianceScale: 5.6, barkThickness: 1.01,
splotchScale: 0.28, splotchIntensity: 3.48, cellScale: 800, cellSize: 0.25,
darkGrainColor: '#af613b', lightGrainColor: '#e0a27a'
},
cherry: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.33, largeWarpScale: 0.11, largeGrainStretch: 0.33, smallWarpStrength: 0.024,
smallWarpScale: 2.48, fineWarpStrength: 0.01, fineWarpScale: 15.3, ringThickness: 1/36,
ringBias: 0.02, ringSizeVariance: 0.04, ringVarianceScale: 6.5, barkThickness: 0.09,
splotchScale: 1.27, splotchIntensity: 1.24, cellScale: 1530, cellSize: 0.15,
darkGrainColor: '#913f27', lightGrainColor: '#b45837'
},
cedar: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.11, largeWarpScale: 0.39, largeGrainStretch: 0.12, smallWarpStrength: 0.061,
smallWarpScale: 1.9, fineWarpStrength: 0.006, fineWarpScale: 4.8, ringThickness: 1/25,
ringBias: 0.01, ringSizeVariance: 0.07, ringVarianceScale: 6.7, barkThickness: 0.1,
splotchScale: 0.61, splotchIntensity: 2.54, cellScale: 630, cellSize: 0.19,
darkGrainColor: '#9a5b49', lightGrainColor: '#ae745e'
},
mahogany: {
transformationMatrix: new THREE.Matrix4().identity(),
centerSize: 1.25, largeWarpScale: 0.26, largeGrainStretch: 0.29, smallWarpStrength: 0.044,
smallWarpScale: 2.54, fineWarpStrength: 0.01, fineWarpScale: 15.3, ringThickness: 1/38,
ringBias: 0.01, ringSizeVariance: 0.33, ringVarianceScale: 1.2, barkThickness: 0.07,
splotchScale: 0.77, splotchIntensity: 1.39, cellScale: 1400, cellSize: 0.23,
darkGrainColor: '#501d12', lightGrainColor: '#6d3722'
}
};
export const WoodGenuses = [ 'teak', 'walnut', 'white_oak', 'pine', 'poplar', 'maple', 'red_oak', 'cherry', 'cedar', 'mahogany' ];
export const Finishes = [ 'raw', 'matte', 'semigloss', 'gloss' ];
export function GetWoodPreset( genus, finish ) {
const params = woodParams[ genus ];
let clearcoat, clearcoatRoughness, clearcoatDarken;
switch ( finish ) {
case 'gloss':
clearcoatDarken = 0.2; clearcoatRoughness = 0.1; clearcoat = 1;
break;
case 'semigloss':
clearcoatDarken = 0.4; clearcoatRoughness = 0.4; clearcoat = 1;
break;
case 'matte':
clearcoatDarken = 0.6; clearcoatRoughness = 1; clearcoat = 1;
break;
case 'raw':
default:
clearcoatDarken = 1; clearcoatRoughness = 0; clearcoat = 0;
}
return { ...params, transformationMatrix: new THREE.Matrix4().copy( params.transformationMatrix ), genus, finish, clearcoat, clearcoatRoughness, clearcoatDarken };
}
const params = GetWoodPreset( WoodGenuses[ 0 ], Finishes[ 0 ] );
const uniforms = {};
uniforms.centerSize = TSL.uniform( params.centerSize ).onObjectUpdate( ( { material } ) => material.centerSize );
uniforms.largeWarpScale = TSL.uniform( params.largeWarpScale ).onObjectUpdate( ( { material } ) => material.largeWarpScale );
uniforms.largeGrainStretch = TSL.uniform( params.largeGrainStretch ).onObjectUpdate( ( { material } ) => material.largeGrainStretch );
uniforms.smallWarpStrength = TSL.uniform( params.smallWarpStrength ).onObjectUpdate( ( { material } ) => material.smallWarpStrength );
uniforms.smallWarpScale = TSL.uniform( params.smallWarpScale ).onObjectUpdate( ( { material } ) => material.smallWarpScale );
uniforms.fineWarpStrength = TSL.uniform( params.fineWarpStrength ).onObjectUpdate( ( { material } ) => material.fineWarpStrength );
uniforms.fineWarpScale = TSL.uniform( params.fineWarpScale ).onObjectUpdate( ( { material } ) => material.fineWarpScale );
uniforms.ringThickness = TSL.uniform( params.ringThickness ).onObjectUpdate( ( { material } ) => material.ringThickness );
uniforms.ringBias = TSL.uniform( params.ringBias ).onObjectUpdate( ( { material } ) => material.ringBias );
uniforms.ringSizeVariance = TSL.uniform( params.ringSizeVariance ).onObjectUpdate( ( { material } ) => material.ringSizeVariance );
uniforms.ringVarianceScale = TSL.uniform( params.ringVarianceScale ).onObjectUpdate( ( { material } ) => material.ringVarianceScale );
uniforms.barkThickness = TSL.uniform( params.barkThickness ).onObjectUpdate( ( { material } ) => material.barkThickness );
uniforms.splotchScale = TSL.uniform( params.splotchScale ).onObjectUpdate( ( { material } ) => material.splotchScale );
uniforms.splotchIntensity = TSL.uniform( params.splotchIntensity ).onObjectUpdate( ( { material } ) => material.splotchIntensity );
uniforms.cellScale = TSL.uniform( params.cellScale ).onObjectUpdate( ( { material } ) => material.cellScale );
uniforms.cellSize = TSL.uniform( params.cellSize ).onObjectUpdate( ( { material } ) => material.cellSize );
uniforms.darkGrainColor = TSL.uniform( new THREE.Color( params.darkGrainColor ) ).onObjectUpdate( ( { material }, self ) => self.value.set( material.darkGrainColor ) );
uniforms.lightGrainColor = TSL.uniform( new THREE.Color( params.lightGrainColor ) ).onObjectUpdate( ( { material }, self ) => self.value.set( material.lightGrainColor ) );
uniforms.transformationMatrix = TSL.uniform( new THREE.Matrix4().copy( params.transformationMatrix ) ).onObjectUpdate( ( { material } ) => material.transformationMatrix );
const colorNode = wood(
uniforms.transformationMatrix.mul( TSL.vec4(TSL.positionLocal, 1) ).xyz,
uniforms.centerSize,
uniforms.largeWarpScale,
uniforms.largeGrainStretch,
uniforms.smallWarpStrength,
uniforms.smallWarpScale,
uniforms.fineWarpStrength,
uniforms.fineWarpScale,
uniforms.ringThickness,
uniforms.ringBias,
uniforms.ringSizeVariance,
uniforms.ringVarianceScale,
uniforms.barkThickness,
uniforms.splotchScale,
uniforms.splotchIntensity,
uniforms.cellScale,
uniforms.cellSize,
uniforms.darkGrainColor,
uniforms.lightGrainColor
).mul( params.clearcoatDarken );
/**
* Procedural wood material using TSL (Three.js Shading Language).
*
* Usage examples:
*
* // Using presets (recommended for common wood types)
* const material = WoodNodeMaterial.fromPreset('walnut', 'gloss');
*
* // Using custom parameters (for advanced customization)
* const material = new WoodNodeMaterial({
* centerSize: 1.2,
* ringThickness: 1/40,
* darkGrainColor: new THREE.Color('#2a1a0a'),
* lightGrainColor: new THREE.Color('#8b4513'),
* clearcoat: 1,
* clearcoatRoughness: 0.3
* });
*
* // Mixing presets with custom overrides
* const walnutParams = GetWoodPreset('walnut', 'raw');
* const material = new WoodNodeMaterial({
* ...walnutParams,
* ringThickness: 1/50, // Override specific parameter
* clearcoat: 1 // Add finish
* });
*/
export class WoodNodeMaterial extends THREE.MeshPhysicalMaterial {
static get type() {
return 'WoodNodeMaterial';
}
constructor( params = {} ) {
super();
this.isWoodNodeMaterial = true;
// Get default parameters from teak/raw preset
const defaultParams = GetWoodPreset( 'teak', 'raw' );
// Merge default params with provided params
const finalParams = { ...defaultParams, ...params };
for ( const key in finalParams ) {
if ( key === 'genus' || key === 'finish' ) continue;
if ( typeof finalParams[ key ] === 'string' ) {
this[ key ] = new THREE.Color( finalParams[ key ] );
} else {
this[ key ] = finalParams[ key ];
}
}
this.colorNode = colorNode;
this.clearcoatNode = finalParams.clearcoat;
this.clearcoatRoughness = finalParams.clearcoatRoughness;
}
// Static method to create material from preset
static fromPreset( genus = 'teak', finish = 'raw' ) {
const params = GetWoodPreset( genus, finish );
return new WoodNodeMaterial( params );
}
}