Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 5f2ae7a5 编写于 作者: A alteredq
浏览文件
操作

Refactored deferred pointlights example to use common code with deferred morphs example. 

Specular parameters will eventually need to go into G-buffer.
上级 05e363b4
隐藏空白更改
内联 并排
Showing with 69 addition and 447 deletion
examples/js/ShaderDeferred.js
浏览文件 @ 5f2ae7a5
......@@ -375,8 +375,8 @@ THREE.ShaderDeferred = {
// specular
"const float shininess = 75.0;",
"const float specularIntensity = 0.4;",
"const float shininess = SHININESS;",
"const float specularIntensity = SPECULAR_INTENSITY;",
"vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );",
"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );",
......@@ -387,7 +387,7 @@ THREE.ShaderDeferred = {
// physically based specular
"vec3 specularColor = specularIntensity * vec3( 0.312 );",
"vec3 specularColor = specularIntensity * vec3( 1.0 );",
"float specularNormalization = ( shininess + 2.0001 ) / 8.0;",
......@@ -403,8 +403,16 @@ THREE.ShaderDeferred = {
"vec4 color = vec4( 0.0 );",
"color.xyz = albedo.xyz * lightColor * lightIntensity;",
"color.w = attenuation;",
//"gl_FragColor = color * vec4( diffuse + specular, 1.0 );",
"gl_FragColor = color * vec4( diffuse, 1.0 ) + vec4( lightColor * lightIntensity * specular, attenuation );",
"#ifdef ADDITIVE_SPECULAR",
"gl_FragColor = color * vec4( diffuse, 1.0 ) + vec4( lightColor * lightIntensity * specular, attenuation );",
"#else",
"gl_FragColor = color * vec4( diffuse + specular, 1.0 );",
"#endif",
"}"
......
examples/webgl_lights_deferred_morphs.html
浏览文件 @ 5f2ae7a5
......@@ -254,17 +254,19 @@
// setup material
var matLight = new THREE.ShaderMaterial({
var matLight = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ),
vertexShader: lightShader.vertexShader,
fragmentShader: lightShader.fragmentShader
fragmentShader: lightShader.fragmentShader,
defines: { "ADDITIVE_SPECULAR": true, "SPECULAR_INTENSITY" : 0.125, "SHININESS": 75.01 },
});
blending: THREE.AdditiveBlending,
depthWrite: false,
transparent: true
} );
matLight.blending = THREE.AdditiveBlending;
matLight.transparent = true;
matLight.depthWrite = false;
matLight.uniforms[ "lightPos" ].value = light.position;
matLight.uniforms[ "lightRadius" ].value = light.distance;
matLight.uniforms[ "lightIntensity" ].value = light.intensity;
......@@ -278,13 +280,13 @@
// create emitter sphere
var matEmitter = new THREE.ShaderMaterial({
var matEmitter = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ),
vertexShader: unlitShader.vertexShader,
fragmentShader: unlitShader.fragmentShader
});
} );
var meshEmitter = new THREE.Mesh( geomEmitter, matEmitter );
meshEmitter.position = light.position;
......
examples/webgl_lights_deferred_pointlights.html
浏览文件 @ 5f2ae7a5
......@@ -50,6 +50,8 @@
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/ShaderDeferred.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/shaders/ColorCorrectionShader.js"></script>
......@@ -110,430 +112,12 @@
// materials
var compColor, compNormals, compDepth, compLightBuffer, compFinal, compEmitter, compositePass;
var matNormal, matClipDepth, matBasic, matUnlit;
var numLights = 50;
var lights = new Array();
// -----------------------
// shader definitions
// -----------------------
var clipdepth_frag = ""+
"varying vec4 clipPos;"+
"void main() {"+
"gl_FragColor = vec4( clipPos.z / clipPos.w, 1.0, 1.0, 1.0 );"+
"}";
var clipdepth_vert = "" +
"varying vec4 clipPos;"+
"void main() {"+
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+
"gl_Position = projectionMatrix * mvPosition;"+
"clipPos = gl_Position;"+
"}";
// -----------------------
var normals_vert = "" +
"varying vec3 normalView;"+
"void main() {"+
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+
"gl_Position = projectionMatrix * mvPosition;"+
"normalView = normalize( normalMatrix * normal );"+
"}";
var normals_frag = "" +
"varying vec3 normalView;"+
"void main() {"+
"gl_FragColor = vec4( vec3( normalView * 0.5 + 0.5 ), 1.0 );"+
"}";
// -----------------------
var bump_vert = "" +
"varying vec3 normalView;"+
"varying vec2 vUv;"+
"varying vec3 vViewPosition;"+
"uniform vec4 offsetRepeat;"+
"void main() {"+
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+
"gl_Position = projectionMatrix * mvPosition;"+
"normalView = normalize( normalMatrix * normal );"+
"vUv = uv * offsetRepeat.zw + offsetRepeat.xy;"+
"vViewPosition = -mvPosition.xyz;"+
"}";
var bump_frag = "" +
"#extension GL_OES_standard_derivatives : enable\n"+
"varying vec3 normalView;"+
"varying vec2 vUv;"+
"varying vec3 vViewPosition;"+
"uniform sampler2D bumpMap;"+
"uniform float bumpScale;"+
// Derivative maps - bump mapping unparametrized surfaces by Morten Mikkelsen
// http://mmikkelsen3d.blogspot.sk/2011/07/derivative-maps.html
// Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2)
"vec2 dHdxy_fwd() {"+
"vec2 dSTdx = dFdx( vUv );"+
"vec2 dSTdy = dFdy( vUv );"+
"float Hll = bumpScale * texture2D( bumpMap, vUv ).x;"+
"float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll;"+
"float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll;"+
"return vec2( dBx, dBy );"+
"}"+
"vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy ) {"+
"vec3 vSigmaX = dFdx( surf_pos );"+
"vec3 vSigmaY = dFdy( surf_pos );"+
"vec3 vN = surf_norm;"+ // normalized
"vec3 R1 = cross( vSigmaY, vN );"+
"vec3 R2 = cross( vN, vSigmaX );"+
"float fDet = dot( vSigmaX, R1 );"+
"vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );"+
"return normalize( abs( fDet ) * surf_norm - vGrad );"+
"}"+
"void main() {"+
"vec3 normal = normalize( normalView );"+
"normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );"+
"gl_FragColor = vec4( vec3( normal * 0.5 + 0.5 ), 1.0 );"+
"}";
// -----------------------
var unlit_vert = "" +
"varying vec4 clipPos;"+
"void main() {"+
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
"clipPos = gl_Position;"+
"}";
var unlit_frag = "" +
"varying vec4 clipPos;"+
"uniform sampler2D samplerDepth;"+
"uniform float viewHeight;"+
"uniform float viewWidth;"+
"uniform vec3 lightColor;" +
"void main() {"+
"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );"+
"float z = texture2D( samplerDepth, texCoord ).x;"+
"vec4 color = vec4( lightColor, 1.0 );"+
"float depth = clipPos.z / clipPos.w;"+
"if( depth > z && z > 0.0 ) color.w = 0.0;"+
"gl_FragColor = color;"+
"}";
// -----------------------
var deferredlight_vert = "" +
"varying vec3 lightView;" +
"varying vec4 clipPos;" +
"uniform vec3 lightPos;" +
"uniform mat4 matView;" +
"void main() { " +
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+
"gl_Position = projectionMatrix * mvPosition;"+
"lightView = vec3( matView * vec4( lightPos, 1.0 ) );" +
"clipPos = gl_Position;"+
"}"
var deferredlight_frag = "" +
"varying vec3 lightView;"+
"varying vec4 clipPos;" +
"uniform sampler2D samplerColor;"+
"uniform sampler2D samplerDepth;"+
"uniform sampler2D samplerNormals;"+
"uniform sampler2D samplerLightBuffer;"+
"uniform float lightRadius;"+
"uniform float lightIntensity;"+
"uniform float viewHeight;"+
"uniform float viewWidth;"+
"uniform vec3 lightColor;"+
"uniform mat4 matProjInverse;"+
"void main() {"+
"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );"+
"float z = texture2D( samplerDepth, texCoord ).x;"+
"float lightZ = clipPos.z / clipPos.w;"+
/*
"if ( z == 0.0 ) {"+
"gl_FragColor = vec4( vec3( 0.0 ), 1.0 );"+
"return;"+
"}"+
*/
"if ( z == 0.0 || lightZ > z ) discard;"+
"float x = texCoord.x * 2.0 - 1.0;"+
"float y = texCoord.y * 2.0 - 1.0;"+
"vec4 projectedPos = vec4( x, y, z, 1.0 );"+
"vec4 viewPos = matProjInverse * projectedPos;"+
"viewPos.xyz /= viewPos.w;"+
"viewPos.w = 1.0;"+
"vec3 lightDir = lightView - viewPos.xyz;"+
"float dist = length( lightDir );"+
"if ( dist > lightRadius ) discard;" +
"lightDir = normalize( lightDir );"+
"float cutoff = 0.3;"+
"float denom = dist/lightRadius + 1.0;"+
"float attenuation = 1.0 / ( denom * denom );"+
"attenuation = ( attenuation - cutoff ) / ( 1.0 - cutoff );"+
"attenuation = max( attenuation, 0.0 );"+
"attenuation *= attenuation;"+
"vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;" +
// wrap around lighting
"float diffuseFull = max( dot( normal, lightDir ), 0.0 );" +
"float diffuseHalf = max( 0.5 + 0.5 * dot( normal, lightDir ), 0.0 );" +
"const vec3 wrapRGB = vec3( 0.6, 0.2, 0.2 );"+
"vec3 diffuse = mix( vec3 ( diffuseFull ), vec3( diffuseHalf ), wrapRGB );"+
// simple lighting
//"float diffuseFull = max( dot( normal, lightDir ), 0.0 );" +
//"vec3 diffuse = vec3 ( diffuseFull );"+
// specular
"const float shininess = 75.0;" +
"const float specularIntensity = 0.4;"+
"vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );" +
"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );" +
// simple specular
//"vec3 specular = specularIntensity * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse;" +
// physically based specular
"vec3 specularColor = specularIntensity * vec3( 0.12 );"+
"float specularNormalization = ( shininess + 2.0001 ) / 8.0;"+
"vec3 schlick = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lightDir, halfVector ), 5.0 );"+
"vec3 specular = schlick * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse * specularNormalization;"+
// color
"vec4 albedo = texture2D( samplerColor, texCoord );"+
// combine
"vec4 color = vec4( 0.0 );"+
"color.xyz = albedo.xyz * lightColor * lightIntensity;"+
"color.w = attenuation;"+
"gl_FragColor = color * vec4( diffuse + specular, 1.0 );" +
"}";
var composite_vert = "" +
"varying vec2 texCoord;"+
"void main() {"+
"vec4 pos = vec4( sign( position.xy ), 0.0, 1.0 );"+
"texCoord = pos.xy * vec2( 0.5 ) + 0.5;"+
"gl_Position = pos;"+
"}";
var composite_frag = "" +
"varying vec2 texCoord;"+
"uniform sampler2D samplerLightBuffer;" +
"uniform sampler2D samplerEmitter;" +
"uniform vec3 lightPos;" +
"void main() {" +
"vec3 color = texture2D( samplerLightBuffer, texCoord ).xyz;" +
"vec3 emitter = texture2D( samplerEmitter, texCoord ).xyz;"+
"if ( emitter != vec3( 0.0 ) ) {"+
"gl_FragColor = vec4( emitter, 1.0 );" +
"} else {"+
"gl_FragColor = vec4( sqrt( color ), 1.0 );" +
"}"+
"}"
// -----------------------
var normalShader = {
uniforms: {},
vertexShader: normals_vert,
fragmentShader: normals_frag
};
// -----------------------
var bumpShader = {
uniforms: {
bumpMap: { type: "t", value: null },
bumpScale: { type: "f", value: 1 },
offsetRepeat : { type: "v4", value: new THREE.Vector4( 0, 0, 1, 1 ) }
},
vertexShader: bump_vert,
fragmentShader: bump_frag
};
// -----------------------
var clipDepthShader = {
uniforms: {},
vertexShader: clipdepth_vert,
fragmentShader: clipdepth_frag
};
// -----------------------
var unlitShader = {
uniforms: {
samplerDepth: { type: "t", value: null },
viewWidth: { type: "f", value: SCALE * WIDTH },
viewHeight: { type: "f", value: SCALE * HEIGHT },
lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) }
},
vertexShader: unlit_vert,
fragmentShader: unlit_frag
};
// -----------------------
var lightShader = {
uniforms: {
samplerLightBuffer: { type: "t", value: null },
samplerNormals: { type: "t", value: null },
samplerDepth: { type: "t", value: null },
samplerColor: { type: "t", value: null },
matView : { type: "m4", value: new THREE.Matrix4() },
matProjInverse : { type: "m4", value: new THREE.Matrix4() },
viewWidth: { type: "f", value: SCALE * WIDTH },
viewHeight: { type: "f", value: SCALE * HEIGHT },
lightPos: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) },
lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) },
lightIntensity: { type: "f", value: 1.0 },
lightRadius: { type: "f", value: 1.0 }
},
vertexShader: deferredlight_vert,
fragmentShader: deferredlight_frag
};
// -----------------------
var compositeShader = {
uniforms: {
samplerLightBuffer: { type: "t", value: null },
samplerEmitter: { type: "t", value: null }
},
vertexShader: composite_vert,
fragmentShader: composite_frag
};
// -----------------------------
function bootstrap() {
......@@ -669,17 +253,19 @@
// setup material
var matLight = new THREE.ShaderMaterial({
var matLight = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ),
vertexShader: lightShader.vertexShader,
fragmentShader: lightShader.fragmentShader
fragmentShader: lightShader.fragmentShader,
defines: { "ADDITIVE_SPECULAR": false, "SPECULAR_INTENSITY" : 0.048, "SHININESS": 75.01 },
blending: THREE.AdditiveBlending,
depthWrite: false,
transparent: true
});
} );
matLight.blending = THREE.AdditiveBlending;
matLight.transparent = true;
matLight.depthWrite = false;
matLight.uniforms[ "lightPos" ].value = light.position;
matLight.uniforms[ "lightRadius" ].value = light.distance;
matLight.uniforms[ "lightIntensity" ].value = light.intensity;
......@@ -693,13 +279,13 @@
// create emitter sphere
var matEmitter = new THREE.ShaderMaterial({
var matEmitter = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ),
vertexShader: unlitShader.vertexShader,
fragmentShader: unlitShader.fragmentShader
});
} );
var meshEmitter = new THREE.Mesh( geomEmitter, matEmitter );
meshEmitter.position = light.position;
......@@ -788,7 +374,13 @@
if ( node.material.bumpMap ) {
var uniforms = THREE.UniformsUtils.clone( bumpShader.uniforms );
var normalMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: bumpShader.vertexShader, fragmentShader: bumpShader.fragmentShader } );
var normalMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: bumpShader.vertexShader,
fragmentShader: bumpShader.fragmentShader
} );
uniforms.bumpMap.value = node.material.bumpMap;
uniforms.bumpScale.value = node.material.bumpScale;
......@@ -823,22 +415,42 @@
function initMaterials() {
// -----------------------
// shader definitions
// -----------------------
normalShader = THREE.ShaderDeferred[ "normals" ];
bumpShader = THREE.ShaderDeferred[ "bump" ];
clipDepthShader = THREE.ShaderDeferred[ "clipDepth" ];
unlitShader = THREE.ShaderDeferred[ "unlit" ];
lightShader = THREE.ShaderDeferred[ "light" ];
compositeShader = THREE.ShaderDeferred[ "composite" ];
matNormal = new THREE.ShaderMaterial({
unlitShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
unlitShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
uniforms: normalShader.uniforms,
lightShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
lightShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
// -----------------------
// default materials
// -----------------------
matNormal = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ),
vertexShader: normalShader.vertexShader,
fragmentShader: normalShader.fragmentShader
});
} );
matClipDepth = new THREE.ShaderMaterial({
matClipDepth = new THREE.ShaderMaterial( {
uniforms: clipDepthShader.uniforms,
uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
vertexShader: clipDepthShader.vertexShader,
fragmentShader: clipDepthShader.fragmentShader
});
} );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或