Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Added specular color and shininess to color G-buffer in deferred shading examples. 

This allows to have different per-object Phong materials in deferred shading.
上级 a7b8ec26
隐藏空白更改
内联 并排
Showing with 131 addition and 74 deletion
examples/js/ShaderDeferred.js
浏览文件 @ c12109d7
......@@ -14,14 +14,20 @@ THREE.ShaderDeferred = {
THREE.UniformsLib[ "common" ],
THREE.UniformsLib[ "fog" ],
THREE.UniformsLib[ "shadowmap" ]
THREE.UniformsLib[ "shadowmap" ],
{
"specular" : { type: "c", value: new THREE.Color( 0x111111 ) },
"shininess": { type: "f", value: 30 }
}
] ),
fragmentShader : [
"uniform vec3 diffuse;",
"uniform float opacity;",
"uniform vec3 specular;",
"uniform float shininess;",
THREE.ShaderChunk[ "color_pars_fragment" ],
THREE.ShaderChunk[ "map_pars_fragment" ],
......@@ -42,6 +48,8 @@ THREE.ShaderDeferred = {
"void main() {",
"const float opacity = 1.0;",
"gl_FragColor = vec4( diffuse, opacity );",
THREE.ShaderChunk[ "map_fragment" ],
......@@ -56,8 +64,21 @@ THREE.ShaderDeferred = {
THREE.ShaderChunk[ "fog_fragment" ],
// diffuse color
"gl_FragColor.x = vec3_to_float( 0.999 * gl_FragColor.xyz );",
"gl_FragColor.yzw = vec3( 0.0 );",
// specular color
"gl_FragColor.y = vec3_to_float( 0.999 * specular );",
// shininess
"gl_FragColor.z = shininess;",
// free
"gl_FragColor.w = 0.0;",
"}"
......@@ -429,8 +450,18 @@ THREE.ShaderDeferred = {
"attenuation = max( attenuation, 0.0 );",
"attenuation *= attenuation;",
// normal
"vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;",
// color
"vec4 colorMap = texture2D( samplerColor, texCoord );",
"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
"vec3 specularColor = float_to_vec3( abs( colorMap.y ) );",
"float shininess = colorMap.z;",
// wrap around lighting
"float diffuseFull = max( dot( normal, lightDir ), 0.0 );",
......@@ -446,8 +477,8 @@ THREE.ShaderDeferred = {
// specular
"const float shininess = SHININESS;",
"const float specularIntensity = SPECULAR_INTENSITY;",
//"const float shininess = SHININESS;",
//"const float specularIntensity = SPECULAR_INTENSITY;",
"vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );",
"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );",
......@@ -458,18 +489,13 @@ THREE.ShaderDeferred = {
// physically based specular
"vec3 specularColor = specularIntensity * vec3( 1.0 );",
//"vec3 specularColor = specularIntensity * vec3( 1.0 );",
"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 colorMap = texture2D( samplerColor, texCoord );",
"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
// combine
"vec4 color = vec4( 0.0 );",
......
examples/webgl_lights_deferred_morphs.html
浏览文件 @ c12109d7
......@@ -332,6 +332,8 @@
function initScene( object, y, scale ) {
var black = new THREE.Color( 0x000000 );
object.traverse( function( node ) {
if ( node.material ) {
......@@ -351,7 +353,14 @@
} );
uniforms.diffuse.value.copy( node.material.color );
var diffuse = node.material.color;
var specular = node.material.specular !== undefined ? node.material.specular : black;
var shininess = node.material.shininess !== undefined ? node.material.shininess : 1;
uniforms.diffuse.value.copy( diffuse );
uniforms.specular.value.copy( specular );
uniforms.shininess.value = shininess;
uniforms.map.value = node.material.map;
material.vertexColors = node.material.vertexColors;
......@@ -431,13 +440,13 @@
if ( node.material.morphTargets ) {
var depthMaterial = new THREE.ShaderMaterial({
var depthMaterial = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
vertexShader: clipDepthShader.vertexShader,
fragmentShader: clipDepthShader.fragmentShader
});
} );
depthMaterial.morphTargets = node.material.morphTargets;
......@@ -734,14 +743,14 @@
mapHeight3.format = THREE.RGBFormat;
var geoPlane = new THREE.PlaneGeometry( 40, 20 );
var matPlane = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight2, bumpScale: 0.5 } );
var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 0.5 } );
var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 1 } );
var matPlaneSide = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight2, bumpScale: 0.5 } );
var matPlaneBottom = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 0.5 } );
var matPlaneTop = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 1 } );
// bottom
var mesh = new THREE.Mesh( geoPlane, matPlane2 );
var mesh = new THREE.Mesh( geoPlane, matPlaneBottom );
mesh.position.z = -2;
mesh.position.y = -6;
mesh.rotation.x = -Math.PI/2;
......@@ -749,7 +758,7 @@
// top
var mesh = new THREE.Mesh( geoPlane, matPlane3 );
var mesh = new THREE.Mesh( geoPlane, matPlaneTop );
mesh.position.z = -2;
mesh.position.y = 7;
mesh.rotation.x = Math.PI/2;
......@@ -757,14 +766,14 @@
// back
var mesh = new THREE.Mesh( geoPlane, matPlane );
var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
mesh.position.z = -4;
mesh.position.y = 0;
object.add( mesh );
// right
var mesh = new THREE.Mesh( geoPlane, matPlane );
var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
mesh.position.z = 0;
mesh.position.y = 0;
mesh.position.x = 13;
......@@ -773,7 +782,7 @@
// left
var mesh = new THREE.Mesh( geoPlane, matPlane );
var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
mesh.position.z = 0;
mesh.position.y = 0;
mesh.position.x = -13;
......@@ -800,7 +809,7 @@
geometry.computeMorphNormals();
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x333333, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
meshAnim.duration = 3000;
......
examples/webgl_lights_deferred_pointlights.html
浏览文件 @ c12109d7
......@@ -336,6 +336,8 @@
function initScene( object, y, scale ) {
var black = new THREE.Color( 0x000000 );
object.traverse( function( node ) {
if ( node.material ) {
......@@ -354,7 +356,14 @@
} );
uniforms.diffuse.value.copy( node.material.color );
var diffuse = node.material.color;
var specular = node.material.specular !== undefined ? node.material.specular : black;
var shininess = node.material.shininess !== undefined ? node.material.shininess : 1;
uniforms.diffuse.value.copy( diffuse );
uniforms.specular.value.copy( specular );
uniforms.shininess.value = shininess;
uniforms.map.value = node.material.map;
if ( node.material.bumpMap ) {
......@@ -669,51 +678,9 @@
}
// -----------------------------
// entry point
// -----------------------------
function generateBox() {
bootstrap();
initMaterials();
initLights();
createRenderTargets();
/*
var loader = new THREE.UTF8Loader();
loader.load( "models/utf8/ben_dds.js", function ( object ) {
initScene( object, -75, 150 );
animate();
}, { normalizeRGB: true } );
*/
/*
loader.load( "models/utf8/WaltHi.js", function ( object ) {
initScene( object, -35, 1 );
animate();
}, { normalizeRGB: true } );
*/
var loader = new THREE.JSONLoader();
loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry, materials ) {
var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
mapHeight.repeat.set( 0.998, 0.998 );
mapHeight.offset.set( 0.001, 0.001 )
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.anisotropy = 4;
mapHeight.format = THREE.RGBFormat;
var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 2.5 } );
var object = new THREE.Mesh( geometry, material );
// box
var object = new THREE.Object3D();
var mapHeight2 = THREE.ImageUtils.loadTexture( "obj/lightmap/rocks.jpg" );
mapHeight2.repeat.set( 3, 1.5 );
......@@ -728,13 +695,15 @@
mapHeight3.format = THREE.RGBFormat;
var geoPlane = new THREE.PlaneGeometry( 40, 20 );
var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight2, bumpScale: 0.5 } );
var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, bumpMap: mapHeight2, bumpScale: 1 } );
var matPlane3 = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight3, bumpScale: 1 } );
var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, bumpMap: mapHeight2, bumpScale: 0.5 } );
var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, specular: 0x111111, shininess: 50, bumpMap: mapHeight2, bumpScale: 1 } );
var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x00aaff, specular: 0xffffff, shininess: 200, bumpMap: mapHeight3, bumpScale: 1.2 } );
var matPlane4 = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, bumpMap: mapHeight3, bumpScale: 1 } );
// bottom
var mesh = new THREE.Mesh( geoPlane, matPlane2 );
var mesh = new THREE.Mesh( geoPlane, matPlane3 );
mesh.position.z = -2;
mesh.position.y = -6;
mesh.rotation.x = -Math.PI/2;
......@@ -742,7 +711,7 @@
// top
var mesh = new THREE.Mesh( geoPlane, matPlane3 );
var mesh = new THREE.Mesh( geoPlane, matPlane4 );
mesh.position.z = -2;
mesh.position.y = 6;
mesh.rotation.x = Math.PI/2;
......@@ -773,11 +742,64 @@
mesh.rotation.y = Math.PI/2;
//object.add( mesh );
initScene( object, 0, 8 );
return object;
}
// -----------------------------
// entry point
// -----------------------------
bootstrap();
initMaterials();
initLights();
createRenderTargets();
/*
var loader = new THREE.UTF8Loader();
loader.load( "models/utf8/ben_dds.js", function ( object ) {
initScene( object, -75, 150 );
animate();
}, { normalizeRGB: true } );
*/
/*
loader.load( "models/utf8/WaltHi.js", function ( object ) {
initScene( object, -35, 1 );
animate();
}, { normalizeRGB: true } );
*/
var loader = new THREE.JSONLoader();
loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry, materials ) {
var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
mapHeight.repeat.set( 0.998, 0.998 );
mapHeight.offset.set( 0.001, 0.001 )
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.anisotropy = 4;
mapHeight.format = THREE.RGBFormat;
var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 2.5, shininess: 75, specular: 0x090909 } );
var object = new THREE.Mesh( geometry, material );
initScene( object, 0, 8 );
} );
// create box
var object = generateBox();
initScene( object, 0, 8 );
animate();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或