Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Started to experiment with properties packing in geometry passes in deferred shading. 

Using vec3 <=> float conversions from @benaadams

For the moment just testing how it works (had to fix blending in WebGLRenderer for this). Seems with two RGBA float passes we could eventually get quite decent material range.
上级 5fc41c0e
隐藏空白更改
内联 并排
Showing with 75 addition and 40 deletion
examples/js/ShaderDeferred.js
浏览文件 @ c0fb64de
/**
* @author alteredq / http://alteredqualia.com/
* @author MPanknin / http://www.redplant.de/
* @author benaadams / http://blog.illyriad.co.uk/
*
*/
......@@ -30,6 +31,15 @@ THREE.ShaderDeferred = {
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "specularmap_pars_fragment" ],
"const float unit = 255.0/256.0;",
"float vec3_to_float( vec3 data ) {",
"highp float compressed = fract( data.x * unit ) + floor( data.y * unit * 255.0 ) + floor( data.z * unit * 255.0 ) * 255.0;",
"return compressed;",
"}",
"void main() {",
"gl_FragColor = vec4( diffuse, opacity );",
......@@ -46,6 +56,9 @@ THREE.ShaderDeferred = {
THREE.ShaderChunk[ "fog_fragment" ],
"gl_FragColor.x = vec3_to_float( 0.999 * gl_FragColor.xyz );",
"gl_FragColor.yzw = vec3( 0.0 );",
"}"
].join("\n"),
......@@ -364,6 +377,17 @@ THREE.ShaderDeferred = {
"uniform mat4 matProjInverse;",
"vec3 float_to_vec3( float data ) {",
"vec3 uncompressed;",
"uncompressed.x = fract( data );",
"float zInt = floor( data / 255.0 );",
"uncompressed.z = fract( zInt / 255.0 );",
"uncompressed.y = fract( floor( data - ( zInt * 255.0 ) ) / 255.0 );",
"return uncompressed;",
"}",
"void main() {",
"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );",
......@@ -443,7 +467,8 @@ THREE.ShaderDeferred = {
// color
"vec4 albedo = texture2D( samplerColor, texCoord );",
"vec4 colorMap = texture2D( samplerColor, texCoord );",
"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
// combine
......
examples/webgl_lights_deferred_morphs.html
浏览文件 @ c0fb64de
......@@ -75,6 +75,9 @@
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight - 2 * MARGIN;
var SCALED_WIDTH = Math.floor( SCALE * WIDTH );
var SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
var NEAR = 1.0, FAR = 350.0;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
......@@ -100,7 +103,7 @@
// rendertargets
var rtColor, rtNormals, rtDepth, rtLightBuffer, rtEmitter, rtFinal;
var rtColor, rtNormals, rtDepth, rtLight, rtEmitter, rtFinal;
// composer
......@@ -187,8 +190,11 @@
function createRenderTargets() {
var rtParamsFloat = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsFloatLinear = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsFloatNearest = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBFormat, type: THREE.UnsignedByteType };
......@@ -197,14 +203,18 @@
// g-buffer
// ----------------------------------------------------------
rtNormals = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtDepth = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtColor = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtNormals = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtDepth = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtColor = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatNearest );
rtLight = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtEmitter = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsUByte );
rtNormals.generateMipmaps = false;
rtDepth.generateMipmaps = false;
rtColor.generateMipmaps = false;
rtLight.generateMipmaps = false;
rtEmitter.generateMipmaps = false;
rtFinal.generateMipmaps = false;
var passNormals = new THREE.RenderPass( scene, camera );
......@@ -224,8 +234,6 @@
// ----------------------------------------------------------
var emitterPass = new THREE.RenderPass( emitterScene, camera );
rtEmitter = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtEmitter.generateMipmaps = false;
compEmitter = new THREE.EffectComposer( renderer, rtEmitter );
compEmitter.addPass( emitterPass );
......@@ -234,17 +242,14 @@
// lighting pass
// ----------------------------------------------------------
rtLightBuffer = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtLightBuffer.generateMipmaps = false;
var passLight = new THREE.RenderPass( lightScene, camera );
compLightBuffer = new THREE.EffectComposer( renderer, rtLightBuffer );
compLightBuffer = new THREE.EffectComposer( renderer, rtLight );
compLightBuffer.addPass( passLight );
lightShader.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
lightShader.uniforms[ 'samplerNormals' ].value = compNormals.renderTarget2;
lightShader.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLightBuffer;
lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLight;
var geomEmitter = new THREE.SphereGeometry( 0.7, 7, 7 );
......@@ -309,7 +314,7 @@
compositePass.needsSwap = true;
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / ( SCALE * WIDTH ), 1 / ( SCALE * HEIGHT ) );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCALED_WIDTH, 1 / SCALED_HEIGHT );
var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
effectColor.renderToScreen = true;
......@@ -470,11 +475,11 @@
lightShader = THREE.ShaderDeferred[ "light" ];
compositeShader = THREE.ShaderDeferred[ "composite" ];
unlitShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
unlitShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
unlitShader.uniforms[ "viewWidth" ].value = SCALED_WIDTH;
unlitShader.uniforms[ "viewHeight" ].value = SCALED_HEIGHT;
lightShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
lightShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
lightShader.uniforms[ "viewWidth" ].value = SCALED_WIDTH;
lightShader.uniforms[ "viewHeight" ].value = SCALED_HEIGHT;
// -----------------------
// default materials
......
examples/webgl_lights_deferred_pointlights.html
浏览文件 @ c0fb64de
......@@ -78,6 +78,9 @@
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight - 2 * MARGIN;
var SCALED_WIDTH = Math.floor( SCALE * WIDTH );
var SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
var NEAR = 1.0, FAR = 350.0;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
......@@ -103,7 +106,7 @@
// rendertargets
var rtColor, rtNormals, rtDepth, rtLightBuffer, rtEmitter, rtFinal;
var rtColor, rtNormals, rtDepth, rtLight, rtEmitter, rtFinal;
// composer
......@@ -186,8 +189,11 @@
function createRenderTargets() {
var rtParamsFloat = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsFloatLinear = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsFloatNearest = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBFormat, type: THREE.UnsignedByteType };
......@@ -196,14 +202,18 @@
// g-buffer
// ----------------------------------------------------------
rtNormals = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtDepth = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtColor = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtNormals = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtDepth = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtColor = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatNearest );
rtLight = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsFloatLinear );
rtEmitter = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( SCALED_WIDTH, SCALED_HEIGHT, rtParamsUByte );
rtNormals.generateMipmaps = false;
rtDepth.generateMipmaps = false;
rtColor.generateMipmaps = false;
rtLight.generateMipmaps = false;
rtEmitter.generateMipmaps = false;
rtFinal.generateMipmaps = false;
var passNormals = new THREE.RenderPass( scene, camera );
......@@ -223,8 +233,6 @@
// ----------------------------------------------------------
var emitterPass = new THREE.RenderPass( emitterScene, camera );
rtEmitter = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtEmitter.generateMipmaps = false;
compEmitter = new THREE.EffectComposer( renderer, rtEmitter );
compEmitter.addPass( emitterPass );
......@@ -233,17 +241,14 @@
// lighting pass
// ----------------------------------------------------------
rtLightBuffer = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtLightBuffer.generateMipmaps = false;
var passLight = new THREE.RenderPass( lightScene, camera );
compLightBuffer = new THREE.EffectComposer( renderer, rtLightBuffer );
compLightBuffer = new THREE.EffectComposer( renderer, rtLight );
compLightBuffer.addPass( passLight );
lightShader.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
lightShader.uniforms[ 'samplerNormals' ].value = compNormals.renderTarget2;
lightShader.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLightBuffer;
lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLight;
var geomEmitter = new THREE.SphereGeometry( 0.7, 7, 7 );
......@@ -310,8 +315,8 @@
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
//effectFXAA.uniforms[ 'resolution' ].value.set( 1 / ( WIDTH ), 1 / ( HEIGHT ) );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / ( SCALE * WIDTH ), 1 / ( SCALE * HEIGHT ) );
//effectFXAA.uniforms[ 'resolution' ].value.set( 1 / WIDTH, 1 / HEIGHT );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCALED_WIDTH, 1 / SCALED_HEIGHT );
//effectFXAA.renderToScreen = true;
var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
......@@ -434,11 +439,11 @@
lightShader = THREE.ShaderDeferred[ "light" ];
compositeShader = THREE.ShaderDeferred[ "composite" ];
unlitShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
unlitShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
unlitShader.uniforms[ "viewWidth" ].value = SCALED_WIDTH;
unlitShader.uniforms[ "viewHeight" ].value = SCALED_HEIGHT;
lightShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH;
lightShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT;
lightShader.uniforms[ "viewWidth" ].value = SCALED_WIDTH;
lightShader.uniforms[ "viewHeight" ].value = SCALED_HEIGHT;
// -----------------------
// default materials
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或