Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ee524fa3 编写于 作者: M Mr.doob
浏览文件
操作

Examples: Removed SkinShader.

上级 c0205704
隐藏空白更改
内联 并排
Showing with 0 addition and 1992 deletion
examples/files.js
浏览文件 @ ee524fa3
......@@ -131,7 +131,6 @@ var files = {
"webgl_materials_blending",
"webgl_materials_blending_custom",
"webgl_materials_bumpmap",
"webgl_materials_bumpmap_skin",
"webgl_materials_car",
"webgl_materials_channels",
"webgl_materials_cubemap",
......@@ -157,7 +156,6 @@ var files = {
"webgl_materials_physical_transparency",
"webgl_materials_reflectivity",
"webgl_materials_shaders_fresnel",
"webgl_materials_skin",
"webgl_materials_standard",
"webgl_materials_texture_anisotropy",
"webgl_materials_texture_canvas",
......
examples/js/shaders/SkinShader.js 已删除 100644 → 0
浏览文件 @ c0205704
/**
* @author alteredq / http://alteredqualia.com/
*
*/
/* ------------------------------------------------------------------------------------------
// Basic skin shader
// - per-pixel Blinn-Phong diffuse term mixed with half-Lambert wrap-around term (per color component)
// - physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
//
// - diffuse map
// - bump map
// - specular map
// - point, directional and hemisphere lights (use with "lights: true" material option)
// - fog (use with "fog: true" material option)
//
// ------------------------------------------------------------------------------------------ */
THREE.SkinShaderBasic = {
uniforms: THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "fog" ],
THREE.UniformsLib[ "lights" ],
{
"enableBump": { value: 0 },
"enableSpecular": { value: 0 },
"tDiffuse": { value: null },
"tBeckmann": { value: null },
"diffuse": { value: new THREE.Color( 0xeeeeee ) },
"specular": { value: new THREE.Color( 0x111111 ) },
"opacity": { value: 1 },
"uRoughness": { value: 0.15 },
"uSpecularBrightness": { value: 0.75 },
"bumpMap": { value: null },
"bumpScale": { value: 1 },
"specularMap": { value: null },
"offsetRepeat": { value: new THREE.Vector4( 0, 0, 1, 1 ) },
"uWrapRGB": { value: new THREE.Vector3( 0.75, 0.375, 0.1875 ) }
}
] ),
vertexShader: [
"uniform vec4 offsetRepeat;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "lights_pars_begin" ],
THREE.ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
" gl_Position = projectionMatrix * mvPosition;",
THREE.ShaderChunk[ "fog_vertex" ],
"}"
].join( "\n" ),
fragmentShader: [
"#define USE_BUMPMAP",
"uniform bool enableBump;",
"uniform bool enableSpecular;",
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float opacity;",
"uniform float uRoughness;",
"uniform float uSpecularBrightness;",
"uniform vec3 uWrapRGB;",
"uniform sampler2D tDiffuse;",
"uniform sampler2D tBeckmann;",
"uniform sampler2D specularMap;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "bsdfs" ],
THREE.ShaderChunk[ "packing" ],
THREE.ShaderChunk[ "lights_pars_begin" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
// Fresnel term
"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
" float base = 1.0 - dot( V, H );",
" float exponential = pow( base, 5.0 );",
" return exponential + F0 * ( 1.0 - exponential );",
"}",
// Kelemen/Szirmay-Kalos specular BRDF
"float KS_Skin_Specular( vec3 N,", // Bumped surface normal
" vec3 L,", // Points to light
" vec3 V,", // Points to eye
" float m,", // Roughness
" float rho_s", // Specular brightness
" ) {",
" float result = 0.0;",
" float ndotl = dot( N, L );",
" if( ndotl > 0.0 ) {",
" vec3 h = L + V;", // Unnormalized half-way vector
" vec3 H = normalize( h );",
" float ndoth = dot( N, H );",
" float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
" float F = fresnelReflectance( H, V, 0.028 );",
" float frSpec = max( PH * F / dot( h, h ), 0.0 );",
" result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
" }",
" return result;",
"}",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec4 colDiffuse = texture2D( tDiffuse, vUv );",
" colDiffuse.rgb *= colDiffuse.rgb;",
" diffuseColor = diffuseColor * colDiffuse;",
" vec3 normal = normalize( vNormal );",
" vec3 viewerDirection = normalize( vViewPosition );",
" float specularStrength;",
" if ( enableSpecular ) {",
" vec4 texelSpecular = texture2D( specularMap, vUv );",
" specularStrength = texelSpecular.r;",
" } else {",
" specularStrength = 1.0;",
" }",
" #ifdef USE_BUMPMAP",
" if ( enableBump ) normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );",
" #endif",
// point lights
" vec3 totalSpecularLight = vec3( 0.0 );",
" vec3 totalDiffuseLight = vec3( 0.0 );",
" #if NUM_POINT_LIGHTS > 0",
" for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
" vec3 lVector = pointLights[ i ].position + vViewPosition.xyz;",
" float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
" lVector = normalize( lVector );",
" float pointDiffuseWeightFull = max( dot( normal, lVector ), 0.0 );",
" float pointDiffuseWeightHalf = max( 0.5 * dot( normal, lVector ) + 0.5, 0.0 );",
" vec3 pointDiffuseWeight = mix( vec3 ( pointDiffuseWeightFull ), vec3( pointDiffuseWeightHalf ), uWrapRGB );",
" float pointSpecularWeight = KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalDiffuseLight += pointLight[ i ].color * ( pointDiffuseWeight * attenuation );",
" totalSpecularLight += pointLight[ i ].color * specular * ( pointSpecularWeight * specularStrength * attenuation );",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" float dirDiffuseWeightFull = max( dot( normal, dirVector ), 0.0 );",
" float dirDiffuseWeightHalf = max( 0.5 * dot( normal, dirVector ) + 0.5, 0.0 );",
" vec3 dirDiffuseWeight = mix( vec3 ( dirDiffuseWeightFull ), vec3( dirDiffuseWeightHalf ), uWrapRGB );",
" float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" totalSpecularLight += directionalLights[ i ].color * ( dirSpecularWeight * specularStrength );",
" }",
" #endif",
// hemisphere lights
" #if NUM_HEMI_LIGHTS > 0",
" for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
" vec3 lVector = hemisphereLightDirection[ i ];",
" float dotProduct = dot( normal, lVector );",
" float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
" totalDiffuseLight += mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
// specular (sky light)
" float hemiSpecularWeight = 0.0;",
" hemiSpecularWeight += KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
// specular (ground light)
" vec3 lVectorGround = -lVector;",
" hemiSpecularWeight += KS_Skin_Specular( normal, lVectorGround, viewerDirection, uRoughness, uSpecularBrightness );",
" vec3 hemiSpecularColor = mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
" totalSpecularLight += hemiSpecularColor * specular * ( hemiSpecularWeight * specularStrength );",
" }",
" #endif",
" outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor * diffuse ) + totalSpecularLight;",
" gl_FragColor = linearToOutputTexel( vec4( outgoingLight, diffuseColor.a ) );", // TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
THREE.ShaderChunk[ "fog_fragment" ],
"}"
].join( "\n" )
};
/* ------------------------------------------------------------------------------------------
// Skin shader
// - Blinn-Phong diffuse term (using normal + diffuse maps)
// - subsurface scattering approximation by four blur layers
// - physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
//
// - point and directional lights (use with "lights: true" material option)
//
// - based on Nvidia Advanced Skin Rendering GDC 2007 presentation
// and GPU Gems 3 Chapter 14. Advanced Techniques for Realistic Real-Time Skin Rendering
//
// http://developer.download.nvidia.com/presentations/2007/gdc/Advanced_Skin.pdf
// http://http.developer.nvidia.com/GPUGems3/gpugems3_ch14.html
// ------------------------------------------------------------------------------------------ */
THREE.SkinShaderAdvanced = {
uniforms: THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "fog" ],
THREE.UniformsLib[ "lights" ],
{
"passID": { value: 0 },
"tDiffuse": { value: null },
"tNormal": { value: null },
"tBlur1": { value: null },
"tBlur2": { value: null },
"tBlur3": { value: null },
"tBlur4": { value: null },
"tBeckmann": { value: null },
"uNormalScale": { value: 1.0 },
"diffuse": { value: new THREE.Color( 0xeeeeee ) },
"specular": { value: new THREE.Color( 0x111111 ) },
"opacity": { value: 1 },
"uRoughness": { value: 0.15 },
"uSpecularBrightness": { value: 0.75 }
}
] ),
vertexShader: [
"#ifdef VERTEX_TEXTURES",
" uniform sampler2D tDisplacement;",
" uniform float uDisplacementScale;",
" uniform float uDisplacementBias;",
"#endif",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv;",
// displacement mapping
" #ifdef VERTEX_TEXTURES",
" vec3 dv = texture2D( tDisplacement, uv ).xyz;",
" float df = uDisplacementScale * dv.x + uDisplacementBias;",
" vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
" gl_Position = projectionMatrix * displacedPosition;",
" #else",
" gl_Position = projectionMatrix * mvPosition;",
" #endif",
THREE.ShaderChunk[ "fog_vertex" ],
"}",
].join( "\n" ),
vertexShaderUV: [
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
"void main() {",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv;",
" gl_Position = vec4( uv.x * 2.0 - 1.0, uv.y * 2.0 - 1.0, 0.0, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float opacity;",
"uniform float uRoughness;",
"uniform float uSpecularBrightness;",
"uniform int passID;",
"uniform sampler2D tDiffuse;",
"uniform sampler2D tNormal;",
"uniform sampler2D tBlur1;",
"uniform sampler2D tBlur2;",
"uniform sampler2D tBlur3;",
"uniform sampler2D tBlur4;",
"uniform sampler2D tBeckmann;",
"uniform float uNormalScale;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "lights_pars_begin" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
" float base = 1.0 - dot( V, H );",
" float exponential = pow( base, 5.0 );",
" return exponential + F0 * ( 1.0 - exponential );",
"}",
// Kelemen/Szirmay-Kalos specular BRDF
"float KS_Skin_Specular( vec3 N,", // Bumped surface normal
" vec3 L,", // Points to light
" vec3 V,", // Points to eye
" float m,", // Roughness
" float rho_s", // Specular brightness
" ) {",
" float result = 0.0;",
" float ndotl = dot( N, L );",
" if( ndotl > 0.0 ) {",
" vec3 h = L + V;", // Unnormalized half-way vector
" vec3 H = normalize( h );",
" float ndoth = dot( N, H );",
" float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
" float F = fresnelReflectance( H, V, 0.028 );",
" float frSpec = max( PH * F / dot( h, h ), 0.0 );",
" result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
" }",
" return result;",
"}",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec4 mSpecular = vec4( specular, opacity );",
" vec4 colDiffuse = texture2D( tDiffuse, vUv );",
" colDiffuse *= colDiffuse;",
" diffuseColor *= colDiffuse;",
// normal mapping
" vec4 posAndU = vec4( -vViewPosition, vUv.x );",
" vec4 posAndU_dx = dFdx( posAndU ), posAndU_dy = dFdy( posAndU );",
" vec3 tangent = posAndU_dx.w * posAndU_dx.xyz + posAndU_dy.w * posAndU_dy.xyz;",
" vec3 normal = normalize( vNormal );",
" vec3 binormal = normalize( cross( tangent, normal ) );",
" tangent = cross( normal, binormal );", // no normalization required
" mat3 tsb = mat3( tangent, binormal, normal );",
" vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
" normalTex.xy *= uNormalScale;",
" normalTex = normalize( normalTex );",
" vec3 finalNormal = tsb * normalTex;",
" normal = normalize( finalNormal );",
" vec3 viewerDirection = normalize( vViewPosition );",
// point lights
" vec3 totalDiffuseLight = vec3( 0.0 );",
" vec3 totalSpecularLight = vec3( 0.0 );",
" #if NUM_POINT_LIGHTS > 0",
" for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
" vec3 pointVector = normalize( pointLights[ i ].direction );",
" float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
" float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
" totalDiffuseLight += pointLightColor[ i ] * ( pointDiffuseWeight * attenuation );",
" if ( passID == 1 ) {",
" float pointSpecularWeight = KS_Skin_Specular( normal, pointVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalSpecularLight += pointLightColor[ i ] * mSpecular.xyz * ( pointSpecularWeight * attenuation );",
" }",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" if ( passID == 1 ) {",
" float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalSpecularLight += directionalLights[ i ].color * mSpecular.xyz * dirSpecularWeight;",
" }",
" }",
" #endif",
" outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalSpecularLight );",
" if ( passID == 0 ) {",
" outgoingLight = sqrt( outgoingLight );",
" } else if ( passID == 1 ) {",
//"#define VERSION1",
" #ifdef VERSION1",
" vec3 nonblurColor = sqrt(outgoingLight );",
" #else",
" vec3 nonblurColor = outgoingLight;",
" #endif",
" vec3 blur1Color = texture2D( tBlur1, vUv ).xyz;",
" vec3 blur2Color = texture2D( tBlur2, vUv ).xyz;",
" vec3 blur3Color = texture2D( tBlur3, vUv ).xyz;",
" vec3 blur4Color = texture2D( tBlur4, vUv ).xyz;",
//"gl_FragColor = vec4( blur1Color, gl_FragColor.w );",
//"gl_FragColor = vec4( vec3( 0.22, 0.5, 0.7 ) * nonblurColor + vec3( 0.2, 0.5, 0.3 ) * blur1Color + vec3( 0.58, 0.0, 0.0 ) * blur2Color, gl_FragColor.w );",
//"gl_FragColor = vec4( vec3( 0.25, 0.6, 0.8 ) * nonblurColor + vec3( 0.15, 0.25, 0.2 ) * blur1Color + vec3( 0.15, 0.15, 0.0 ) * blur2Color + vec3( 0.45, 0.0, 0.0 ) * blur3Color, gl_FragColor.w );",
" outgoingLight = vec3( vec3( 0.22, 0.437, 0.635 ) * nonblurColor + ",
" vec3( 0.101, 0.355, 0.365 ) * blur1Color + ",
" vec3( 0.119, 0.208, 0.0 ) * blur2Color + ",
" vec3( 0.114, 0.0, 0.0 ) * blur3Color + ",
" vec3( 0.444, 0.0, 0.0 ) * blur4Color );",
" outgoingLight *= sqrt( colDiffuse.xyz );",
" outgoingLight += ambientLightColor * diffuse * colDiffuse.xyz + totalSpecularLight;",
" #ifndef VERSION1",
" outgoingLight = sqrt( outgoingLight );",
" #endif",
" }",
" gl_FragColor = vec4( outgoingLight, diffuseColor.a );", // TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
THREE.ShaderChunk[ "fog_fragment" ],
"}"
].join( "\n" )
};
/* ------------------------------------------------------------------------------------------
// Beckmann distribution function
// - to be used in specular term of skin shader
// - render a screen-aligned quad to precompute a 512 x 512 texture
//
// - from http://developer.nvidia.com/node/171
------------------------------------------------------------------------------------------ */
THREE.SkinShaderBeckmann = {
uniforms: {},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
" vUv = uv;",
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"varying vec2 vUv;",
"float PHBeckmann( float ndoth, float m ) {",
" float alpha = acos( ndoth );",
" float ta = tan( alpha );",
" float val = 1.0 / ( m * m * pow( ndoth, 4.0 ) ) * exp( -( ta * ta ) / ( m * m ) );",
" return val;",
"}",
"float KSTextureCompute( vec2 tex ) {",
// Scale the value to fit within [0,1] invert upon lookup.
" return 0.5 * pow( PHBeckmann( tex.x, tex.y ), 0.1 );",
"}",
"void main() {",
" float x = KSTextureCompute( vUv );",
" gl_FragColor = vec4( x, x, x, 1.0 );",
"}"
].join( "\n" )
};
examples/jsm/shaders/SkinShader.d.ts 已删除 100644 → 0
浏览文件 @ c0205704
import {
Uniform
} from '../../../src/Three';
export const SkinShaderBasic: {
uniforms: {
ambientLightColor: Uniform;
bumpMap: Uniform;
bumpScale: Uniform;
diffuse: Uniform;
directionalLights: Uniform;
directionalShadowMap: Uniform;
directionalShadowMatrix: Uniform;
enableBump: Uniform;
enableSpecular: Uniform;
fogColor: Uniform;
fogDensity: Uniform;
fogFar: Uniform;
fogNear: Uniform;
hemisphereLights: Uniform;
lightProbe: Uniform;
offsetRepeat: Uniform;
opacity: Uniform;
pointLights: Uniform;
pointShadowMap: Uniform;
pointShadowMatrix: Uniform;
rectAreaLights: Uniform;
specular: Uniform;
specularMap: Uniform;
spotLights: Uniform;
spotShadowMap: Uniform;
spotShadowMatrix: Uniform;
tBeckmann: Uniform;
tDiffuse: Uniform;
uRoughness: Uniform;
uSpecularBrightness: Uniform;
uWrapRGB: Uniform;
};
vertexShader: string;
fragmentShader: string;
};
export const SkinShaderAdvanced: {
uniforms: {
ambientLightColor: Uniform;
diffuse: Uniform;
directionalLights: Uniform;
directionalShadowMap: Uniform;
directionalShadowMatrix: Uniform;
fogColor: Uniform;
fogDensity: Uniform;
fogFar: Uniform;
fogNear: Uniform;
hemisphereLights: Uniform;
lightProbe: Uniform;
opacity: Uniform;
passID: Uniform;
pointLights: Uniform;
pointShadowMap: Uniform;
pointShadowMatrix: Uniform;
rectAreaLights: Uniform;
specular: Uniform;
spotLights: Uniform;
spotShadowMap: Uniform;
spotShadowMatrix: Uniform;
tBeckmann: Uniform;
tBlur1: Uniform;
tBlur2: Uniform;
tBlur3: Uniform;
tBlur4: Uniform;
tDiffuse: Uniform;
tNormal: Uniform;
uNormalScale: Uniform;
uRoughness: Uniform;
uSpecularBrightness: Uniform;
};
vertexShader: string;
fragmentShader: string;
};
export const SkinShaderBeckmann: {
uniforms: {};
vertexShader: string;
fragmentShader: string;
};
examples/jsm/shaders/SkinShader.js 已删除 100644 → 0
浏览文件 @ c0205704
/**
* @author alteredq / http://alteredqualia.com/
*
*/
import {
Color,
ShaderChunk,
UniformsLib,
UniformsUtils,
Vector3,
Vector4
} from "../../../build/three.module.js";
/* ------------------------------------------------------------------------------------------
// Basic skin shader
// - per-pixel Blinn-Phong diffuse term mixed with half-Lambert wrap-around term (per color component)
// - physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
//
// - diffuse map
// - bump map
// - specular map
// - point, directional and hemisphere lights (use with "lights: true" material option)
// - fog (use with "fog: true" material option)
//
// ------------------------------------------------------------------------------------------ */
var SkinShaderBasic = {
uniforms: UniformsUtils.merge( [
UniformsLib[ "fog" ],
UniformsLib[ "lights" ],
{
"enableBump": { value: 0 },
"enableSpecular": { value: 0 },
"tDiffuse": { value: null },
"tBeckmann": { value: null },
"diffuse": { value: new Color( 0xeeeeee ) },
"specular": { value: new Color( 0x111111 ) },
"opacity": { value: 1 },
"uRoughness": { value: 0.15 },
"uSpecularBrightness": { value: 0.75 },
"bumpMap": { value: null },
"bumpScale": { value: 1 },
"specularMap": { value: null },
"offsetRepeat": { value: new Vector4( 0, 0, 1, 1 ) },
"uWrapRGB": { value: new Vector3( 0.75, 0.375, 0.1875 ) }
}
] ),
vertexShader: [
"uniform vec4 offsetRepeat;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
ShaderChunk[ "lights_pars_begin" ],
ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
" gl_Position = projectionMatrix * mvPosition;",
ShaderChunk[ "fog_vertex" ],
"}"
].join( "\n" ),
fragmentShader: [
"#define USE_BUMPMAP",
"uniform bool enableBump;",
"uniform bool enableSpecular;",
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float opacity;",
"uniform float uRoughness;",
"uniform float uSpecularBrightness;",
"uniform vec3 uWrapRGB;",
"uniform sampler2D tDiffuse;",
"uniform sampler2D tBeckmann;",
"uniform sampler2D specularMap;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
ShaderChunk[ "bsdfs" ],
ShaderChunk[ "packing" ],
ShaderChunk[ "lights_pars_begin" ],
ShaderChunk[ "fog_pars_fragment" ],
ShaderChunk[ "bumpmap_pars_fragment" ],
// Fresnel term
"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
" float base = 1.0 - dot( V, H );",
" float exponential = pow( base, 5.0 );",
" return exponential + F0 * ( 1.0 - exponential );",
"}",
// Kelemen/Szirmay-Kalos specular BRDF
"float KS_Skin_Specular( vec3 N,", // Bumped surface normal
" vec3 L,", // Points to light
" vec3 V,", // Points to eye
" float m,", // Roughness
" float rho_s", // Specular brightness
" ) {",
" float result = 0.0;",
" float ndotl = dot( N, L );",
" if( ndotl > 0.0 ) {",
" vec3 h = L + V;", // Unnormalized half-way vector
" vec3 H = normalize( h );",
" float ndoth = dot( N, H );",
" float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
" float F = fresnelReflectance( H, V, 0.028 );",
" float frSpec = max( PH * F / dot( h, h ), 0.0 );",
" result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
" }",
" return result;",
"}",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec4 colDiffuse = texture2D( tDiffuse, vUv );",
" colDiffuse.rgb *= colDiffuse.rgb;",
" diffuseColor = diffuseColor * colDiffuse;",
" vec3 normal = normalize( vNormal );",
" vec3 viewerDirection = normalize( vViewPosition );",
" float specularStrength;",
" if ( enableSpecular ) {",
" vec4 texelSpecular = texture2D( specularMap, vUv );",
" specularStrength = texelSpecular.r;",
" } else {",
" specularStrength = 1.0;",
" }",
" #ifdef USE_BUMPMAP",
" if ( enableBump ) normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );",
" #endif",
// point lights
" vec3 totalSpecularLight = vec3( 0.0 );",
" vec3 totalDiffuseLight = vec3( 0.0 );",
" #if NUM_POINT_LIGHTS > 0",
" for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
" vec3 lVector = pointLights[ i ].position + vViewPosition.xyz;",
" float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
" lVector = normalize( lVector );",
" float pointDiffuseWeightFull = max( dot( normal, lVector ), 0.0 );",
" float pointDiffuseWeightHalf = max( 0.5 * dot( normal, lVector ) + 0.5, 0.0 );",
" vec3 pointDiffuseWeight = mix( vec3 ( pointDiffuseWeightFull ), vec3( pointDiffuseWeightHalf ), uWrapRGB );",
" float pointSpecularWeight = KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalDiffuseLight += pointLight[ i ].color * ( pointDiffuseWeight * attenuation );",
" totalSpecularLight += pointLight[ i ].color * specular * ( pointSpecularWeight * specularStrength * attenuation );",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" float dirDiffuseWeightFull = max( dot( normal, dirVector ), 0.0 );",
" float dirDiffuseWeightHalf = max( 0.5 * dot( normal, dirVector ) + 0.5, 0.0 );",
" vec3 dirDiffuseWeight = mix( vec3 ( dirDiffuseWeightFull ), vec3( dirDiffuseWeightHalf ), uWrapRGB );",
" float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" totalSpecularLight += directionalLights[ i ].color * ( dirSpecularWeight * specularStrength );",
" }",
" #endif",
// hemisphere lights
" #if NUM_HEMI_LIGHTS > 0",
" for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
" vec3 lVector = hemisphereLightDirection[ i ];",
" float dotProduct = dot( normal, lVector );",
" float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
" totalDiffuseLight += mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
// specular (sky light)
" float hemiSpecularWeight = 0.0;",
" hemiSpecularWeight += KS_Skin_Specular( normal, lVector, viewerDirection, uRoughness, uSpecularBrightness );",
// specular (ground light)
" vec3 lVectorGround = -lVector;",
" hemiSpecularWeight += KS_Skin_Specular( normal, lVectorGround, viewerDirection, uRoughness, uSpecularBrightness );",
" vec3 hemiSpecularColor = mix( hemisphereLightGroundColor[ i ], hemisphereLightSkyColor[ i ], hemiDiffuseWeight );",
" totalSpecularLight += hemiSpecularColor * specular * ( hemiSpecularWeight * specularStrength );",
" }",
" #endif",
" outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor * diffuse ) + totalSpecularLight;",
" gl_FragColor = linearToOutputTexel( vec4( outgoingLight, diffuseColor.a ) );", // TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
ShaderChunk[ "fog_fragment" ],
"}"
].join( "\n" )
};
/* ------------------------------------------------------------------------------------------
// Skin shader
// - Blinn-Phong diffuse term (using normal + diffuse maps)
// - subsurface scattering approximation by four blur layers
// - physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
//
// - point and directional lights (use with "lights: true" material option)
//
// - based on Nvidia Advanced Skin Rendering GDC 2007 presentation
// and GPU Gems 3 Chapter 14. Advanced Techniques for Realistic Real-Time Skin Rendering
//
// http://developer.download.nvidia.com/presentations/2007/gdc/Advanced_Skin.pdf
// http://http.developer.nvidia.com/GPUGems3/gpugems3_ch14.html
// ------------------------------------------------------------------------------------------ */
var SkinShaderAdvanced = {
uniforms: UniformsUtils.merge( [
UniformsLib[ "fog" ],
UniformsLib[ "lights" ],
{
"passID": { value: 0 },
"tDiffuse": { value: null },
"tNormal": { value: null },
"tBlur1": { value: null },
"tBlur2": { value: null },
"tBlur3": { value: null },
"tBlur4": { value: null },
"tBeckmann": { value: null },
"uNormalScale": { value: 1.0 },
"diffuse": { value: new Color( 0xeeeeee ) },
"specular": { value: new Color( 0x111111 ) },
"opacity": { value: 1 },
"uRoughness": { value: 0.15 },
"uSpecularBrightness": { value: 0.75 }
}
] ),
vertexShader: [
"#ifdef VERTEX_TEXTURES",
" uniform sampler2D tDisplacement;",
" uniform float uDisplacementScale;",
" uniform float uDisplacementBias;",
"#endif",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv;",
// displacement mapping
" #ifdef VERTEX_TEXTURES",
" vec3 dv = texture2D( tDisplacement, uv ).xyz;",
" float df = uDisplacementScale * dv.x + uDisplacementBias;",
" vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
" gl_Position = projectionMatrix * displacedPosition;",
" #else",
" gl_Position = projectionMatrix * mvPosition;",
" #endif",
ShaderChunk[ "fog_vertex" ],
"}",
].join( "\n" ),
vertexShaderUV: [
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
"void main() {",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" vViewPosition = -mvPosition.xyz;",
" vNormal = normalize( normalMatrix * normal );",
" vUv = uv;",
" gl_Position = vec4( uv.x * 2.0 - 1.0, uv.y * 2.0 - 1.0, 0.0, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float opacity;",
"uniform float uRoughness;",
"uniform float uSpecularBrightness;",
"uniform int passID;",
"uniform sampler2D tDiffuse;",
"uniform sampler2D tNormal;",
"uniform sampler2D tBlur1;",
"uniform sampler2D tBlur2;",
"uniform sampler2D tBlur3;",
"uniform sampler2D tBlur4;",
"uniform sampler2D tBeckmann;",
"uniform float uNormalScale;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
ShaderChunk[ "lights_pars_begin" ],
ShaderChunk[ "fog_pars_fragment" ],
"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
" float base = 1.0 - dot( V, H );",
" float exponential = pow( base, 5.0 );",
" return exponential + F0 * ( 1.0 - exponential );",
"}",
// Kelemen/Szirmay-Kalos specular BRDF
"float KS_Skin_Specular( vec3 N,", // Bumped surface normal
" vec3 L,", // Points to light
" vec3 V,", // Points to eye
" float m,", // Roughness
" float rho_s", // Specular brightness
" ) {",
" float result = 0.0;",
" float ndotl = dot( N, L );",
" if( ndotl > 0.0 ) {",
" vec3 h = L + V;", // Unnormalized half-way vector
" vec3 H = normalize( h );",
" float ndoth = dot( N, H );",
" float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
" float F = fresnelReflectance( H, V, 0.028 );",
" float frSpec = max( PH * F / dot( h, h ), 0.0 );",
" result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
" }",
" return result;",
"}",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec4 mSpecular = vec4( specular, opacity );",
" vec4 colDiffuse = texture2D( tDiffuse, vUv );",
" colDiffuse *= colDiffuse;",
" diffuseColor *= colDiffuse;",
// normal mapping
" vec4 posAndU = vec4( -vViewPosition, vUv.x );",
" vec4 posAndU_dx = dFdx( posAndU ), posAndU_dy = dFdy( posAndU );",
" vec3 tangent = posAndU_dx.w * posAndU_dx.xyz + posAndU_dy.w * posAndU_dy.xyz;",
" vec3 normal = normalize( vNormal );",
" vec3 binormal = normalize( cross( tangent, normal ) );",
" tangent = cross( normal, binormal );", // no normalization required
" mat3 tsb = mat3( tangent, binormal, normal );",
" vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
" normalTex.xy *= uNormalScale;",
" normalTex = normalize( normalTex );",
" vec3 finalNormal = tsb * normalTex;",
" normal = normalize( finalNormal );",
" vec3 viewerDirection = normalize( vViewPosition );",
// point lights
" vec3 totalDiffuseLight = vec3( 0.0 );",
" vec3 totalSpecularLight = vec3( 0.0 );",
" #if NUM_POINT_LIGHTS > 0",
" for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
" vec3 pointVector = normalize( pointLights[ i ].direction );",
" float attenuation = calcLightAttenuation( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
" float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
" totalDiffuseLight += pointLightColor[ i ] * ( pointDiffuseWeight * attenuation );",
" if ( passID == 1 ) {",
" float pointSpecularWeight = KS_Skin_Specular( normal, pointVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalSpecularLight += pointLightColor[ i ] * mSpecular.xyz * ( pointSpecularWeight * attenuation );",
" }",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" if ( passID == 1 ) {",
" float dirSpecularWeight = KS_Skin_Specular( normal, dirVector, viewerDirection, uRoughness, uSpecularBrightness );",
" totalSpecularLight += directionalLights[ i ].color * mSpecular.xyz * dirSpecularWeight;",
" }",
" }",
" #endif",
" outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalSpecularLight );",
" if ( passID == 0 ) {",
" outgoingLight = sqrt( outgoingLight );",
" } else if ( passID == 1 ) {",
//"#define VERSION1",
" #ifdef VERSION1",
" vec3 nonblurColor = sqrt(outgoingLight );",
" #else",
" vec3 nonblurColor = outgoingLight;",
" #endif",
" vec3 blur1Color = texture2D( tBlur1, vUv ).xyz;",
" vec3 blur2Color = texture2D( tBlur2, vUv ).xyz;",
" vec3 blur3Color = texture2D( tBlur3, vUv ).xyz;",
" vec3 blur4Color = texture2D( tBlur4, vUv ).xyz;",
//"gl_FragColor = vec4( blur1Color, gl_FragColor.w );",
//"gl_FragColor = vec4( vec3( 0.22, 0.5, 0.7 ) * nonblurColor + vec3( 0.2, 0.5, 0.3 ) * blur1Color + vec3( 0.58, 0.0, 0.0 ) * blur2Color, gl_FragColor.w );",
//"gl_FragColor = vec4( vec3( 0.25, 0.6, 0.8 ) * nonblurColor + vec3( 0.15, 0.25, 0.2 ) * blur1Color + vec3( 0.15, 0.15, 0.0 ) * blur2Color + vec3( 0.45, 0.0, 0.0 ) * blur3Color, gl_FragColor.w );",
" outgoingLight = vec3( vec3( 0.22, 0.437, 0.635 ) * nonblurColor + ",
" vec3( 0.101, 0.355, 0.365 ) * blur1Color + ",
" vec3( 0.119, 0.208, 0.0 ) * blur2Color + ",
" vec3( 0.114, 0.0, 0.0 ) * blur3Color + ",
" vec3( 0.444, 0.0, 0.0 ) * blur4Color );",
" outgoingLight *= sqrt( colDiffuse.xyz );",
" outgoingLight += ambientLightColor * diffuse * colDiffuse.xyz + totalSpecularLight;",
" #ifndef VERSION1",
" outgoingLight = sqrt( outgoingLight );",
" #endif",
" }",
" gl_FragColor = vec4( outgoingLight, diffuseColor.a );", // TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
ShaderChunk[ "fog_fragment" ],
"}"
].join( "\n" )
};
/* ------------------------------------------------------------------------------------------
// Beckmann distribution function
// - to be used in specular term of skin shader
// - render a screen-aligned quad to precompute a 512 x 512 texture
//
// - from http://developer.nvidia.com/node/171
------------------------------------------------------------------------------------------ */
var SkinShaderBeckmann = {
uniforms: {},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
" vUv = uv;",
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"varying vec2 vUv;",
"float PHBeckmann( float ndoth, float m ) {",
" float alpha = acos( ndoth );",
" float ta = tan( alpha );",
" float val = 1.0 / ( m * m * pow( ndoth, 4.0 ) ) * exp( -( ta * ta ) / ( m * m ) );",
" return val;",
"}",
"float KSTextureCompute( vec2 tex ) {",
// Scale the value to fit within [0,1] invert upon lookup.
" return 0.5 * pow( PHBeckmann( tex.x, tex.y ), 0.1 );",
"}",
"void main() {",
" float x = KSTextureCompute( vUv );",
" gl_FragColor = vec4( x, x, x, 1.0 );",
"}"
].join( "\n" )
};
export { SkinShaderBasic, SkinShaderAdvanced, SkinShaderBeckmann };
examples/webgl_materials_bumpmap_skin.html 已删除 100644 → 0
浏览文件 @ c0205704
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - bump map - skin [Lee Perry-Smith]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - single-pass skin material with tangent-less bump mapping</a><br/>
<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
import { CopyShader } from './jsm/shaders/CopyShader.js';
import { SkinShaderBasic, SkinShaderBeckmann } from './jsm/shaders/SkinShader.js';
var camera, scene, renderer, stats;
var mesh;
var mouseX = 0;
var mouseY = 0;
var targetX = 0, targetY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var firstPass = true;
var composerBeckmann;
init();
animate();
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
//
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1200;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x242a34 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x333344 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 500, 0, 500 );
scene.add( directionalLight );
//
var loader = new GLTFLoader();
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
createScene( gltf.scene.children[ 0 ].geometry, 100 );
} );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.autoClear = false;
renderer.outputEncoding = THREE.sRGBEncoding;
//
stats = new Stats();
container.appendChild( stats.dom );
// BECKMANN
var effectBeckmann = new ShaderPass( SkinShaderBeckmann );
var effectCopy = new ShaderPass( CopyShader );
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var rtwidth = 512, rtheight = 512;
composerBeckmann = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composerBeckmann.addPass( effectBeckmann );
composerBeckmann.addPass( effectCopy );
// EVENTS
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function createScene( geometry, scale ) {
var textureLoader = new THREE.TextureLoader();
var mapHeight = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
mapHeight.anisotropy = 4;
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;
var mapSpecular = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
mapSpecular.anisotropy = 4;
mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
mapSpecular.format = THREE.RGBFormat;
var mapColor = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
mapColor.anisotropy = 4;
mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;
mapColor.format = THREE.RGBFormat;
var shader = SkinShaderBasic;
var fragmentShader = shader.fragmentShader;
var vertexShader = shader.vertexShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "enableBump" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "tBeckmann" ].value = composerBeckmann.renderTarget1.texture;
uniforms[ "tDiffuse" ].value = mapColor;
uniforms[ "bumpMap" ].value = mapHeight;
uniforms[ "specularMap" ].value = mapSpecular;
uniforms[ "diffuse" ].value.setHex( 0xa0a0a0 );
uniforms[ "specular" ].value.setHex( 0xa0a0a0 );
uniforms[ "uRoughness" ].value = 0.2;
uniforms[ "uSpecularBrightness" ].value = 0.5;
uniforms[ "bumpScale" ].value = 8;
var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true } );
material.extensions.derivatives = true;
mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 50;
mesh.scale.set( scale, scale, scale );
scene.add( mesh );
}
//
function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 1;
mouseY = ( event.clientY - windowHalfY ) * 1;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
targetX = mouseX * .001;
targetY = mouseY * .001;
if ( mesh ) {
mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
}
if ( firstPass ) {
composerBeckmann.render();
firstPass = false;
}
renderer.clear();
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_materials_skin.html 已删除 100644 → 0
浏览文件 @ c0205704
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - skin [Lee Perry-Smith]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl skin rendering demo.<br/>
<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head.
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
import { BloomPass } from './jsm/postprocessing/BloomPass.js';
import { TexturePass } from './jsm/postprocessing/TexturePass.js';
import { SkinShaderAdvanced, SkinShaderBeckmann } from './jsm/shaders/SkinShader.js';
var statsEnabled = true;
var container, stats, loader;
var camera, scene, renderer;
var mesh;
var composer, composerUV1, composerUV2, composerUV3, composerBeckmann;
var directionalLight;
var mouseX = 0, mouseY = 0;
var targetX = 0, targetY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var firstPass = true;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 900;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );
// LIGHTS
directionalLight = new THREE.DirectionalLight( 0xffeedd, 1.5 );
directionalLight.position.set( 1, 0.5, 1 );
scene.add( directionalLight );
directionalLight = new THREE.DirectionalLight( 0xddddff, 0.5 );
directionalLight.position.set( - 1, 0.5, - 1 );
scene.add( directionalLight );
// MATERIALS
var diffuse = 0xbbbbbb, specular = 0x555555;
var shader = SkinShaderAdvanced;
var uniformsUV = THREE.UniformsUtils.clone( shader.uniforms );
var textureLoader = new THREE.TextureLoader();
uniformsUV[ "tNormal" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
uniformsUV[ "uNormalScale" ].value = - 1.5;
uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
uniformsUV[ "passID" ].value = 0;
uniformsUV[ "diffuse" ].value.setHex( diffuse );
uniformsUV[ "specular" ].value.setHex( specular );
uniformsUV[ "uRoughness" ].value = 0.185;
uniformsUV[ "uSpecularBrightness" ].value = 0.7;
var uniforms = THREE.UniformsUtils.clone( uniformsUV );
uniforms[ "tDiffuse" ].value = uniformsUV[ "tDiffuse" ].value;
uniforms[ "tNormal" ].value = uniformsUV[ "tNormal" ].value;
uniforms[ "passID" ].value = 1;
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
var material = new THREE.ShaderMaterial( parameters );
material.extensions.derivatives = true;
var materialUV = new THREE.ShaderMaterial( parametersUV );
materialUV.extensions.derivatives = true;
// LOADER
loader = new GLTFLoader();
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
createScene( gltf.scene.children[ 0 ].geometry, 100, material );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
// STATS
if ( statsEnabled ) {
stats = new Stats();
container.appendChild( stats.dom );
}
// EVENTS
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
// POSTPROCESSING
var renderModelUV = new RenderPass( scene, camera, materialUV, new THREE.Color( 0x575757 ) );
var effectBloom1 = new BloomPass( 1, 15, 2, 512 );
var effectBloom2 = new BloomPass( 1, 25, 3, 512 );
var effectBloom3 = new BloomPass( 1, 25, 4, 512 );
effectBloom1.clear = true;
effectBloom2.clear = true;
effectBloom3.clear = true;
//
var pars = {
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: false
};
var rtwidth = 512;
var rtheight = 512;
//
composer = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composer.addPass( renderModelUV );
composer.renderToScreen = false;
var renderScene = new TexturePass( composer.renderTarget2.texture );
//
composerUV1 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composerUV1.addPass( renderScene );
composerUV1.addPass( effectBloom1 );
composerUV1.renderToScreen = false;
composerUV2 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composerUV2.addPass( renderScene );
composerUV2.addPass( effectBloom2 );
composerUV2.renderToScreen = false;
composerUV3 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composerUV3.addPass( renderScene );
composerUV3.addPass( effectBloom3 );
composerUV3.renderToScreen = false;
//
var effectBeckmann = new ShaderPass( SkinShaderBeckmann );
composerBeckmann = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
composerBeckmann.addPass( effectBeckmann );
//
uniforms[ "tBlur1" ].value = composer.renderTarget2.texture;
uniforms[ "tBlur2" ].value = composerUV1.renderTarget2.texture;
uniforms[ "tBlur3" ].value = composerUV2.renderTarget2.texture;
uniforms[ "tBlur4" ].value = composerUV3.renderTarget2.texture;
uniforms[ "tBeckmann" ].value = composerBeckmann.renderTarget1.texture;
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function createScene( geometry, scale, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 50;
mesh.scale.set( scale, scale, scale );
scene.add( mesh );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
if ( statsEnabled ) stats.update();
}
function render() {
targetX = mouseX * .001;
targetY = mouseY * .001;
if ( mesh ) {
mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
}
renderer.clear();
if ( firstPass ) {
composerBeckmann.render();
firstPass = false;
}
composer.render();
composerUV1.render();
composerUV2.render();
composerUV3.render();
renderer.render( scene, camera );
}
</script>
</body>
</html>
utils/modularize.js
浏览文件 @ ee524fa3
......@@ -210,7 +210,6 @@ var files = [
{ path: 'shaders/RGBShiftShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SAOShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SepiaShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SkinShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SMAAShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SobelOperatorShader.js', dependencies: [], ignoreList: [] },
{ path: 'shaders/SSAOShader.js', dependencies: [], ignoreList: [] },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或