未验证 提交 3b5eec89 编写于 作者: M Mr.doob 提交者: GitHub

Merge pull request #18098 from WestLangley/dev_remove_terrain_shader

Examples: remove TerrainShader
......@@ -33,7 +33,6 @@
<p>[example:webgl_rtt rtt ]</p>
<p>[example:webgl_shaders_tonemapping shaders / tonemapping ]</p>
<p>[example:webgl_shadowmap shadowmap ]</p>
<p>[example:webgl_terrain_dynamic terrain / dynamic ]</p>
<code>var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );</code>
......
......@@ -26,8 +26,7 @@
[example:webgl_loader_fbx WebGL / loader / fbx]<br />
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_materials_reflectivity WebGL / materials / reflectivity]<br />
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]<br />
[example:webgl_terrain_dynamic WebGL / terrain / dynamic]
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
</p>
<p>
......
......@@ -225,7 +225,6 @@ var files = {
"webgl_shadowmesh",
"webgl_skinning_simple",
"webgl_sprites",
"webgl_terrain_dynamic",
"webgl_test_memory",
"webgl_test_memory2",
"webgl_tonemapping",
......
/**
* @author alteredq / http://alteredqualia.com/
*
*/
THREE.TerrainShader = {
/* -------------------------------------------------------------------------
// Dynamic terrain shader
// - Blinn-Phong
// - height + normal + diffuse1 + diffuse2 + specular + detail maps
// - point, directional and hemisphere lights (use with "lights: true" material option)
// - shadow maps receiving
------------------------------------------------------------------------- */
uniforms: THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "fog" ],
THREE.UniformsLib[ "lights" ],
{
"enableDiffuse1": { value: 0 },
"enableDiffuse2": { value: 0 },
"enableSpecular": { value: 0 },
"enableReflection": { value: 0 },
"tDiffuse1": { value: null },
"tDiffuse2": { value: null },
"tDetail": { value: null },
"tNormal": { value: null },
"tSpecular": { value: null },
"tDisplacement": { value: null },
"uNormalScale": { value: 1.0 },
"uDisplacementBias": { value: 0.0 },
"uDisplacementScale": { value: 1.0 },
"diffuse": { value: new THREE.Color( 0xeeeeee ) },
"specular": { value: new THREE.Color( 0x111111 ) },
"shininess": { value: 30 },
"opacity": { value: 1 },
"uRepeatBase": { value: new THREE.Vector2( 1, 1 ) },
"uRepeatOverlay": { value: new THREE.Vector2( 1, 1 ) },
"uOffset": { value: new THREE.Vector2( 0, 0 ) }
}
] ),
fragmentShader: [
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float shininess;",
"uniform float opacity;",
"uniform bool enableDiffuse1;",
"uniform bool enableDiffuse2;",
"uniform bool enableSpecular;",
"uniform sampler2D tDiffuse1;",
"uniform sampler2D tDiffuse2;",
"uniform sampler2D tDetail;",
"uniform sampler2D tNormal;",
"uniform sampler2D tSpecular;",
"uniform sampler2D tDisplacement;",
"uniform float uNormalScale;",
"uniform vec2 uRepeatOverlay;",
"uniform vec2 uRepeatBase;",
"uniform vec2 uOffset;",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "bsdfs" ],
THREE.ShaderChunk[ "lights_pars_begin" ],
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
"float calcLightAttenuation( float lightDistance, float cutoffDistance, float decayExponent ) {",
" if ( decayExponent > 0.0 ) {",
" return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent );",
" }",
" return 1.0;",
" }",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec3 specularTex = vec3( 1.0 );",
" vec2 uvOverlay = uRepeatOverlay * vUv + uOffset;",
" vec2 uvBase = uRepeatBase * vUv;",
" vec3 normalTex = texture2D( tDetail, uvOverlay ).xyz * 2.0 - 1.0;",
" normalTex.xy *= uNormalScale;",
" normalTex = normalize( normalTex );",
" if( enableDiffuse1 && enableDiffuse2 ) {",
" vec4 colDiffuse1 = texture2D( tDiffuse1, uvOverlay );",
" vec4 colDiffuse2 = texture2D( tDiffuse2, uvOverlay );",
" colDiffuse1 = GammaToLinear( colDiffuse1, float( GAMMA_FACTOR ) );",
" colDiffuse2 = GammaToLinear( colDiffuse2, float( GAMMA_FACTOR ) );",
" diffuseColor *= mix ( colDiffuse1, colDiffuse2, 1.0 - texture2D( tDisplacement, uvBase ) );",
" } else if( enableDiffuse1 ) {",
" diffuseColor *= texture2D( tDiffuse1, uvOverlay );",
" } else if( enableDiffuse2 ) {",
" diffuseColor *= texture2D( tDiffuse2, uvOverlay );",
" }",
" if( enableSpecular )",
" specularTex = texture2D( tSpecular, uvOverlay ).xyz;",
" mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
" vec3 finalNormal = tsb * normalTex;",
" vec3 normal = normalize( finalNormal );",
" vec3 viewPosition = normalize( vViewPosition );",
" vec3 totalDiffuseLight = vec3( 0.0 );",
" vec3 totalSpecularLight = vec3( 0.0 );",
// point lights
" #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 );",
" vec3 pointHalfVector = normalize( lVector + viewPosition );",
" float pointDotNormalHalf = max( dot( normal, pointHalfVector ), 0.0 );",
" float pointDiffuseWeight = max( dot( normal, lVector ), 0.0 );",
" float pointSpecularWeight = specularTex.r * max( pow( pointDotNormalHalf, shininess ), 0.0 );",
" totalDiffuseLight += attenuation * pointLights[ i ].color * pointDiffuseWeight;",
" totalSpecularLight += attenuation * pointLights[ i ].color * specular * pointSpecularWeight * pointDiffuseWeight;",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" vec3 dirDiffuse = vec3( 0.0 );",
" vec3 dirSpecular = vec3( 0.0 );",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" vec3 dirHalfVector = normalize( dirVector + viewPosition );",
" float dirDotNormalHalf = max( dot( normal, dirHalfVector ), 0.0 );",
" float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
" float dirSpecularWeight = specularTex.r * max( pow( dirDotNormalHalf, shininess ), 0.0 );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" totalSpecularLight += directionalLights[ i ].color * specular * dirSpecularWeight * dirDiffuseWeight;",
" }",
" #endif",
// hemisphere lights
" #if NUM_HEMI_LIGHTS > 0",
" vec3 hemiDiffuse = vec3( 0.0 );",
" vec3 hemiSpecular = vec3( 0.0 );",
" for( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
" vec3 lVector = hemisphereLightDirection[ i ];",
// diffuse
" float dotProduct = dot( normal, lVector );",
" float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
" totalDiffuseLight += mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight );",
// specular (sky light)
" float hemiSpecularWeight = 0.0;",
" vec3 hemiHalfVectorSky = normalize( lVector + viewPosition );",
" float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;",
" hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfSky, shininess ), 0.0 );",
// specular (ground light)
" vec3 lVectorGround = -lVector;",
" vec3 hemiHalfVectorGround = normalize( lVectorGround + viewPosition );",
" float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;",
" hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfGround, shininess ), 0.0 );",
" totalSpecularLight += specular * mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight ) * hemiSpecularWeight * hemiDiffuseWeight;",
" }",
" #endif",
" outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor + totalSpecularLight );",
" 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" ),
vertexShader: [
"attribute vec4 tangent;",
"uniform vec2 uRepeatBase;",
"uniform sampler2D tNormal;",
"#ifdef VERTEX_TEXTURES",
" uniform sampler2D tDisplacement;",
" uniform float uDisplacementScale;",
" uniform float uDisplacementBias;",
"#endif",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
THREE.ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vNormal = normalize( normalMatrix * normal );",
// tangent and binormal vectors
" vTangent = normalize( normalMatrix * tangent.xyz );",
" vBinormal = cross( vNormal, vTangent ) * tangent.w;",
" vBinormal = normalize( vBinormal );",
// texture coordinates
" vUv = uv;",
" vec2 uvBase = uv * uRepeatBase;",
// displacement mapping
" #ifdef VERTEX_TEXTURES",
" vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",
" float df = uDisplacementScale * dv.x + uDisplacementBias;",
" vec3 displacedPosition = normal * df + position;",
" vec4 worldPosition = modelMatrix * vec4( displacedPosition, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( displacedPosition, 1.0 );",
" #else",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" #endif",
" gl_Position = projectionMatrix * mvPosition;",
" vViewPosition = -mvPosition.xyz;",
" vec3 normalTex = texture2D( tNormal, uvBase ).xyz * 2.0 - 1.0;",
" vNormal = normalMatrix * normalTex;",
THREE.ShaderChunk[ "shadowmap_vertex" ],
THREE.ShaderChunk[ "fog_vertex" ],
"}"
].join( "\n" )
};
import {
Uniform
} from '../../../src/Three';
export const TerrainShader: {
uniforms: {
ambientLightColor: Uniform;
diffuse: Uniform;
directionalLights: Uniform;
directionalShadowMap: Uniform;
directionalShadowMatrix: Uniform;
enableDiffuse1: Uniform;
enableDiffuse2: Uniform;
enableReflection: Uniform;
enableSpecular: Uniform;
fogColor: Uniform;
fogDensity: Uniform;
fogFar: Uniform;
fogNear: Uniform;
hemisphereLights: Uniform;
lightProbe: Uniform;
opacity: Uniform;
pointLights: Uniform;
pointShadowMap: Uniform;
pointShadowMatrix: Uniform;
rectAreaLights: Uniform;
shininess: Uniform;
specular: Uniform;
spotLights: Uniform;
spotShadowMap: Uniform;
spotShadowMatrix: Uniform;
tDetail: Uniform;
tDiffuse1: Uniform;
tDiffuse2: Uniform;
tDisplacement: Uniform;
tNormal: Uniform;
tSpecular: Uniform;
uDisplacementBias: Uniform;
uDisplacementScale: Uniform;
uNormalScale: Uniform;
uOffset: Uniform;
uRepeatBase: Uniform;
uRepeatOverlay: Uniform;
};
vertexShader: string;
fragmentShader: string;
};
/**
* @author alteredq / http://alteredqualia.com/
*
*/
import {
Color,
ShaderChunk,
UniformsLib,
UniformsUtils,
Vector2
} from "../../../build/three.module.js";
var TerrainShader = {
/* -------------------------------------------------------------------------
// Dynamic terrain shader
// - Blinn-Phong
// - height + normal + diffuse1 + diffuse2 + specular + detail maps
// - point, directional and hemisphere lights (use with "lights: true" material option)
// - shadow maps receiving
------------------------------------------------------------------------- */
uniforms: UniformsUtils.merge( [
UniformsLib[ "fog" ],
UniformsLib[ "lights" ],
{
"enableDiffuse1": { value: 0 },
"enableDiffuse2": { value: 0 },
"enableSpecular": { value: 0 },
"enableReflection": { value: 0 },
"tDiffuse1": { value: null },
"tDiffuse2": { value: null },
"tDetail": { value: null },
"tNormal": { value: null },
"tSpecular": { value: null },
"tDisplacement": { value: null },
"uNormalScale": { value: 1.0 },
"uDisplacementBias": { value: 0.0 },
"uDisplacementScale": { value: 1.0 },
"diffuse": { value: new Color( 0xeeeeee ) },
"specular": { value: new Color( 0x111111 ) },
"shininess": { value: 30 },
"opacity": { value: 1 },
"uRepeatBase": { value: new Vector2( 1, 1 ) },
"uRepeatOverlay": { value: new Vector2( 1, 1 ) },
"uOffset": { value: new Vector2( 0, 0 ) }
}
] ),
fragmentShader: [
"uniform vec3 diffuse;",
"uniform vec3 specular;",
"uniform float shininess;",
"uniform float opacity;",
"uniform bool enableDiffuse1;",
"uniform bool enableDiffuse2;",
"uniform bool enableSpecular;",
"uniform sampler2D tDiffuse1;",
"uniform sampler2D tDiffuse2;",
"uniform sampler2D tDetail;",
"uniform sampler2D tNormal;",
"uniform sampler2D tSpecular;",
"uniform sampler2D tDisplacement;",
"uniform float uNormalScale;",
"uniform vec2 uRepeatOverlay;",
"uniform vec2 uRepeatBase;",
"uniform vec2 uOffset;",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "common" ],
ShaderChunk[ "bsdfs" ],
ShaderChunk[ "lights_pars_begin" ],
ShaderChunk[ "shadowmap_pars_fragment" ],
ShaderChunk[ "fog_pars_fragment" ],
"float calcLightAttenuation( float lightDistance, float cutoffDistance, float decayExponent ) {",
" if ( decayExponent > 0.0 ) {",
" return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent );",
" }",
" return 1.0;",
" }",
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );", // outgoing light does not have an alpha, the surface does
" vec4 diffuseColor = vec4( diffuse, opacity );",
" vec3 specularTex = vec3( 1.0 );",
" vec2 uvOverlay = uRepeatOverlay * vUv + uOffset;",
" vec2 uvBase = uRepeatBase * vUv;",
" vec3 normalTex = texture2D( tDetail, uvOverlay ).xyz * 2.0 - 1.0;",
" normalTex.xy *= uNormalScale;",
" normalTex = normalize( normalTex );",
" if( enableDiffuse1 && enableDiffuse2 ) {",
" vec4 colDiffuse1 = texture2D( tDiffuse1, uvOverlay );",
" vec4 colDiffuse2 = texture2D( tDiffuse2, uvOverlay );",
" colDiffuse1 = GammaToLinear( colDiffuse1, float( GAMMA_FACTOR ) );",
" colDiffuse2 = GammaToLinear( colDiffuse2, float( GAMMA_FACTOR ) );",
" diffuseColor *= mix ( colDiffuse1, colDiffuse2, 1.0 - texture2D( tDisplacement, uvBase ) );",
" } else if( enableDiffuse1 ) {",
" diffuseColor *= texture2D( tDiffuse1, uvOverlay );",
" } else if( enableDiffuse2 ) {",
" diffuseColor *= texture2D( tDiffuse2, uvOverlay );",
" }",
" if( enableSpecular )",
" specularTex = texture2D( tSpecular, uvOverlay ).xyz;",
" mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
" vec3 finalNormal = tsb * normalTex;",
" vec3 normal = normalize( finalNormal );",
" vec3 viewPosition = normalize( vViewPosition );",
" vec3 totalDiffuseLight = vec3( 0.0 );",
" vec3 totalSpecularLight = vec3( 0.0 );",
// point lights
" #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 );",
" vec3 pointHalfVector = normalize( lVector + viewPosition );",
" float pointDotNormalHalf = max( dot( normal, pointHalfVector ), 0.0 );",
" float pointDiffuseWeight = max( dot( normal, lVector ), 0.0 );",
" float pointSpecularWeight = specularTex.r * max( pow( pointDotNormalHalf, shininess ), 0.0 );",
" totalDiffuseLight += attenuation * pointLights[ i ].color * pointDiffuseWeight;",
" totalSpecularLight += attenuation * pointLights[ i ].color * specular * pointSpecularWeight * pointDiffuseWeight;",
" }",
" #endif",
// directional lights
" #if NUM_DIR_LIGHTS > 0",
" vec3 dirDiffuse = vec3( 0.0 );",
" vec3 dirSpecular = vec3( 0.0 );",
" for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
" vec3 dirVector = directionalLights[ i ].direction;",
" vec3 dirHalfVector = normalize( dirVector + viewPosition );",
" float dirDotNormalHalf = max( dot( normal, dirHalfVector ), 0.0 );",
" float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
" float dirSpecularWeight = specularTex.r * max( pow( dirDotNormalHalf, shininess ), 0.0 );",
" totalDiffuseLight += directionalLights[ i ].color * dirDiffuseWeight;",
" totalSpecularLight += directionalLights[ i ].color * specular * dirSpecularWeight * dirDiffuseWeight;",
" }",
" #endif",
// hemisphere lights
" #if NUM_HEMI_LIGHTS > 0",
" vec3 hemiDiffuse = vec3( 0.0 );",
" vec3 hemiSpecular = vec3( 0.0 );",
" for( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {",
" vec3 lVector = hemisphereLightDirection[ i ];",
// diffuse
" float dotProduct = dot( normal, lVector );",
" float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
" totalDiffuseLight += mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight );",
// specular (sky light)
" float hemiSpecularWeight = 0.0;",
" vec3 hemiHalfVectorSky = normalize( lVector + viewPosition );",
" float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;",
" hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfSky, shininess ), 0.0 );",
// specular (ground light)
" vec3 lVectorGround = -lVector;",
" vec3 hemiHalfVectorGround = normalize( lVectorGround + viewPosition );",
" float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;",
" hemiSpecularWeight += specularTex.r * max( pow( hemiDotNormalHalfGround, shininess ), 0.0 );",
" totalSpecularLight += specular * mix( hemisphereLights[ i ].groundColor, hemisphereLights[ i ].skyColor, hemiDiffuseWeight ) * hemiSpecularWeight * hemiDiffuseWeight;",
" }",
" #endif",
" outgoingLight += diffuseColor.xyz * ( totalDiffuseLight + ambientLightColor + totalSpecularLight );",
" 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" ),
vertexShader: [
"attribute vec4 tangent;",
"uniform vec2 uRepeatBase;",
"uniform sampler2D tNormal;",
"#ifdef VERTEX_TEXTURES",
" uniform sampler2D tDisplacement;",
" uniform float uDisplacementScale;",
" uniform float uDisplacementBias;",
"#endif",
"varying vec3 vTangent;",
"varying vec3 vBinormal;",
"varying vec3 vNormal;",
"varying vec2 vUv;",
"varying vec3 vViewPosition;",
ShaderChunk[ "shadowmap_pars_vertex" ],
ShaderChunk[ "fog_pars_vertex" ],
"void main() {",
" vNormal = normalize( normalMatrix * normal );",
// tangent and binormal vectors
" vTangent = normalize( normalMatrix * tangent.xyz );",
" vBinormal = cross( vNormal, vTangent ) * tangent.w;",
" vBinormal = normalize( vBinormal );",
// texture coordinates
" vUv = uv;",
" vec2 uvBase = uv * uRepeatBase;",
// displacement mapping
" #ifdef VERTEX_TEXTURES",
" vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",
" float df = uDisplacementScale * dv.x + uDisplacementBias;",
" vec3 displacedPosition = normal * df + position;",
" vec4 worldPosition = modelMatrix * vec4( displacedPosition, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( displacedPosition, 1.0 );",
" #else",
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" #endif",
" gl_Position = projectionMatrix * mvPosition;",
" vViewPosition = -mvPosition.xyz;",
" vec3 normalTex = texture2D( tNormal, uvBase ).xyz * 2.0 - 1.0;",
" vNormal = normalMatrix * normalTex;",
ShaderChunk[ "shadowmap_vertex" ],
ShaderChunk[ "fog_vertex" ],
"}"
].join( "\n" )
};
export { TerrainShader };
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - dynamic procedural terrain</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">
<style>
body {
color: #333;
}
a {
color: #080;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic procedural terrain using
<a href="https://github.com/ashima/webgl-noise" target="_blank" rel="noopener">3d simplex noise</a><br/>
textures by <a href="http://opengameart.org/content/dark-grass">qubodup</a> and
<a href="http://opengameart.org/content/backgrounds-topdown-games">davis123</a>
<br/>
day / night: <strong>n</strong>&nbsp;&nbsp;
animate terrain: <strong>m</strong>
</div>
<script id="fragmentShaderNoise" type="x-shader/x-fragment">
//
// Description : Array and textureless GLSL 3D simplex noise function.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// Lastmod : 20110409 (stegu)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
//
uniform float time;
varying vec2 vUv;
vec4 permute( vec4 x ) {
return mod( ( ( x * 34.0 ) + 1.0 ) * x, 289.0 );
}
vec4 taylorInvSqrt( vec4 r ) {
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise( vec3 v ) {
const vec2 C = vec2( 1.0 / 6.0, 1.0 / 3.0 );
const vec4 D = vec4( 0.0, 0.5, 1.0, 2.0 );
// First corner
vec3 i = floor( v + dot( v, C.yyy ) );
vec3 x0 = v - i + dot( i, C.xxx );
// Other corners
vec3 g = step( x0.yzx, x0.xyz );
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
vec3 x1 = x0 - i1 + 1.0 * C.xxx;
vec3 x2 = x0 - i2 + 2.0 * C.xxx;
vec3 x3 = x0 - 1. + 3.0 * C.xxx;
// Permutations
i = mod( i, 289.0 );
vec4 p = permute( permute( permute(
i.z + vec4( 0.0, i1.z, i2.z, 1.0 ) )
+ i.y + vec4( 0.0, i1.y, i2.y, 1.0 ) )
+ i.x + vec4( 0.0, i1.x, i2.x, 1.0 ) );
// Gradients
// ( N*N points uniformly over a square, mapped onto an octahedron.)
float n_ = 1.0 / 7.0; // N=7
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor( p * ns.z *ns.z ); // mod(p,N*N)
vec4 x_ = floor( j * ns.z );
vec4 y_ = floor( j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs( x ) - abs( y );
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
vec4 s0 = floor( b0 ) * 2.0 + 1.0;
vec4 s1 = floor( b1 ) * 2.0 + 1.0;
vec4 sh = -step( h, vec4( 0.0 ) );
vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
vec3 p0 = vec3( a0.xy, h.x );
vec3 p1 = vec3( a0.zw, h.y );
vec3 p2 = vec3( a1.xy, h.z );
vec3 p3 = vec3( a1.zw, h.w );
// Normalise gradients
vec4 norm = taylorInvSqrt( vec4( dot( p0, p0 ), dot( p1, p1 ), dot( p2, p2 ), dot( p3, p3 ) ) );
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max( 0.6 - vec4( dot( x0, x0 ), dot( x1, x1 ), dot( x2, x2 ), dot( x3, x3 ) ), 0.0 );
m = m * m;
return 42.0 * dot( m*m, vec4( dot( p0, x0 ), dot( p1, x1 ),
dot( p2, x2 ), dot( p3, x3 ) ) );
}
float surface3( vec3 coord ) {
float n = 0.0;
n += 1.0 * abs( snoise( coord ) );
n += 0.5 * abs( snoise( coord * 2.0 ) );
n += 0.25 * abs( snoise( coord * 4.0 ) );
n += 0.125 * abs( snoise( coord * 8.0 ) );
return n;
}
void main( void ) {
vec3 coord = vec3( vUv, -time );
float n = surface3( coord );
gl_FragColor = vec4( vec3( n, n, n ), 1.0 );
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
uniform vec2 scale;
uniform vec2 offset;
void main( void ) {
vUv = uv * scale + offset;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { NormalMapShader } from './jsm/shaders/NormalMapShader.js';
import { TerrainShader } from './jsm/shaders/TerrainShader.js';
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var renderer, container, stats;
var camera, scene, controls;
var cameraOrtho, sceneRenderTarget;
var uniformsNoise, uniformsNormal, uniformsTerrain,
heightMap, normalMap,
quadTarget;
var directionalLight, pointLight;
var terrain;
var animDelta = 0, animDeltaDir = - 1;
var lightVal = 0, lightDir = 1;
var clock = new THREE.Clock();
var updateNoise = true;
var mlib = {};
init();
animate();
function init() {
container = document.getElementById( 'container' );
// SCENE (RENDER TARGET)
sceneRenderTarget = new THREE.Scene();
cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, - 10000, 10000 );
cameraOrtho.position.z = 100;
sceneRenderTarget.add( cameraOrtho );
// CAMERA
camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
camera.position.set( - 1200, 800, 1200 );
// SCENE (FINAL)
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );
scene.fog = new THREE.Fog( 0x050505, 2000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x111111 ) );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.15 );
directionalLight.position.set( 500, 2000, 0 );
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xff4400, 1.5 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
// HEIGHT + NORMAL MAPS
var normalShader = NormalMapShader;
var rx = 256, ry = 256;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
heightMap = new THREE.WebGLRenderTarget( rx, ry, pars );
heightMap.texture.generateMipmaps = false;
normalMap = new THREE.WebGLRenderTarget( rx, ry, pars );
normalMap.texture.generateMipmaps = false;
uniformsNoise = {
"time": { value: 1.0 },
"scale": { value: new THREE.Vector2( 1.5, 1.5 ) },
"offset": { value: new THREE.Vector2( 0, 0 ) }
};
uniformsNormal = THREE.UniformsUtils.clone( normalShader.uniforms );
uniformsNormal[ "height" ].value = 0.05;
uniformsNormal[ "resolution" ].value.set( rx, ry );
uniformsNormal[ "heightMap" ].value = heightMap.texture;
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
// TEXTURES
var loadingManager = new THREE.LoadingManager( function () {
terrain.visible = true;
} );
var textureLoader = new THREE.TextureLoader( loadingManager );
var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
specularMap.texture.generateMipmaps = false;
var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big.jpg" );
var diffuseTexture2 = textureLoader.load( "textures/terrain/backgrounddetailed6.jpg" );
var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg" );
diffuseTexture1.wrapS = diffuseTexture1.wrapT = THREE.RepeatWrapping;
diffuseTexture2.wrapS = diffuseTexture2.wrapT = THREE.RepeatWrapping;
detailTexture.wrapS = detailTexture.wrapT = THREE.RepeatWrapping;
specularMap.texture.wrapS = specularMap.texture.wrapT = THREE.RepeatWrapping;
// TERRAIN SHADER
var terrainShader = TerrainShader;
uniformsTerrain = THREE.UniformsUtils.clone( terrainShader.uniforms );
uniformsTerrain[ 'tNormal' ].value = normalMap.texture;
uniformsTerrain[ 'uNormalScale' ].value = 3.5;
uniformsTerrain[ 'tDisplacement' ].value = heightMap.texture;
uniformsTerrain[ 'tDiffuse1' ].value = diffuseTexture1;
uniformsTerrain[ 'tDiffuse2' ].value = diffuseTexture2;
uniformsTerrain[ 'tSpecular' ].value = specularMap.texture;
uniformsTerrain[ 'tDetail' ].value = detailTexture;
uniformsTerrain[ 'enableDiffuse1' ].value = true;
uniformsTerrain[ 'enableDiffuse2' ].value = true;
uniformsTerrain[ 'enableSpecular' ].value = true;
uniformsTerrain[ 'diffuse' ].value.setHex( 0xffffff );
uniformsTerrain[ 'specular' ].value.setHex( 0xffffff );
uniformsTerrain[ 'shininess' ].value = 30;
uniformsTerrain[ 'uDisplacementScale' ].value = 375;
uniformsTerrain[ 'uRepeatOverlay' ].value.set( 6, 6 );
var params = [
[ 'heightmap', document.getElementById( 'fragmentShaderNoise' ).textContent, vertexShader, uniformsNoise, false ],
[ 'normal', normalShader.fragmentShader, normalShader.vertexShader, uniformsNormal, false ],
[ 'terrain', terrainShader.fragmentShader, terrainShader.vertexShader, uniformsTerrain, true ]
];
for ( var i = 0; i < params.length; i ++ ) {
var material = new THREE.ShaderMaterial( {
uniforms: params[ i ][ 3 ],
vertexShader: params[ i ][ 2 ],
fragmentShader: params[ i ][ 1 ],
lights: params[ i ][ 4 ],
fog: true
} );
mlib[ params[ i ][ 0 ] ] = material;
}
var plane = new THREE.PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
quadTarget.position.z = - 500;
sceneRenderTarget.add( quadTarget );
// TERRAIN MESH
var geometryTerrain = new THREE.PlaneBufferGeometry( 6000, 6000, 256, 256 );
BufferGeometryUtils.computeTangents( geometryTerrain );
terrain = new THREE.Mesh( geometryTerrain, mlib[ 'terrain' ] );
terrain.position.set( 0, - 125, 0 );
terrain.rotation.x = - Math.PI / 2;
terrain.visible = false;
scene.add( terrain );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
// CONTROLS
controls = new OrbitControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.keys = [ 65, 83, 68 ];
// STATS
stats = new Stats();
container.appendChild( stats.dom );
// EVENTS
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );
}
//
function onWindowResize() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
//
function onKeyDown( event ) {
switch ( event.keyCode ) {
case 78: /*N*/ lightDir *= - 1; break;
case 77: /*M*/ animDeltaDir *= - 1; break;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
if ( terrain.visible ) {
var fLow = 0.1, fHigh = 0.8;
lightVal = THREE.Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
var valNorm = ( lightVal - fLow ) / ( fHigh - fLow );
scene.background.setHSL( 0.1, 0.5, lightVal );
scene.fog.color.setHSL( 0.1, 0.5, lightVal );
directionalLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
uniformsTerrain[ 'uNormalScale' ].value = THREE.Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
if ( updateNoise ) {
animDelta = THREE.Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
uniformsNoise[ 'time' ].value += delta * animDelta;
uniformsNoise[ 'offset' ].value.x += delta * 0.05;
uniformsTerrain[ 'uOffset' ].value.x = 4 * uniformsNoise[ 'offset' ].value.x;
quadTarget.material = mlib[ 'heightmap' ];
renderer.setRenderTarget( heightMap );
renderer.clear();
renderer.render( sceneRenderTarget, cameraOrtho );
quadTarget.material = mlib[ 'normal' ];
renderer.setRenderTarget( normalMap );
renderer.clear();
renderer.render( sceneRenderTarget, cameraOrtho );
}
renderer.setRenderTarget( null );
renderer.render( scene, camera );
}
}
</script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册