Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Updated video and dynamic particles examples to use new postprocessing system.

上级 797530e4
隐藏空白更改
内联 并排
Showing with 99 addition and 265 deletion
examples/webgl_materials_video.html
浏览文件 @ 743363b5
......@@ -40,6 +40,11 @@
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -59,14 +64,14 @@
var video, texture, material, mesh;
var composer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled: true };
var cube_count,
meshes = [],
......@@ -165,7 +170,6 @@
}
initPostprocessing();
renderer.autoClear = false;
stats = new Stats();
......@@ -175,6 +179,20 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectScreen );
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
......@@ -197,58 +215,6 @@
}
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderExtras["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
screen_uniforms["opacity"].value = 1.0;
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderExtras["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
postprocessing.quad.position.z = -500;
postprocessing.scene.addObject( postprocessing.quad );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
......@@ -321,51 +287,11 @@
}
counter++;
counter ++;
renderer.clear();
composer.render();
if ( postprocessing.enabled ) {
// Render scene into texture
renderer.render( scene, camera, postprocessing.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing.quad.materials = [ postprocessing.materialConvolution ];
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing.quad.materials = [ postprocessing.materialScreen ];
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
postprocessing.materialScreen.uniforms.opacity.value = 1.3;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
// Render to screen
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
renderer.render( postprocessing.scene, postprocessing.camera );
} else {
renderer.render( scene, camera );
}
}
......
examples/webgl_particles_dynamic.html
浏览文件 @ 743363b5
......@@ -43,6 +43,12 @@
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
......@@ -67,8 +73,7 @@
var total = 0, totaln = 0;
var postprocessing1 = {};
var postprocessing2 = {};
var composer;
init();
animate();
......@@ -90,9 +95,6 @@
directionalLight.position.normalize();
scene.addLight( directionalLight );
initPostprocessingBloom( postprocessing1 );
initPostprocessingFocus( postprocessing2 );
aloader = new THREE.JSONLoader( );
bloader = new THREE.BinaryLoader( true );
......@@ -132,6 +134,8 @@
} } );
//
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......@@ -140,11 +144,15 @@
renderer.setClearColor( scene.fog.color, 1 );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
//
parent = new THREE.Object3D();
scene.addObject( parent );
......@@ -156,6 +164,22 @@
totaln += 1;
total += grid.geometry.vertices.length;
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.75 );
var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false );
var effectFocus = new THREE.ShaderPass( generateFocusShader(), "map" );
effectFocus.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
composer.addPass( effectFocus );
}
function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
......@@ -240,30 +264,20 @@
}
function initPostprocessingFocus( effect ) {
effect.type = "focus";
effect.scene = new THREE.Scene();
function generateFocusShader() {
effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
var shader = {
effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
uniforms : {
var heatUniforms = {
"map": { type: "t", value:0, texture: effect.texture },
"screenWidth": { type: "f", value: SCREEN_WIDTH },
"screenHeight": { type: "f", value: SCREEN_HEIGHT },
"sampleDistance": { type: "f", value: 0.94 },
"waveFactor": { type: "f", value: 0.00125 }
};
"map": { type: "t", value: 0, texture: null },
"screenWidth": { type: "f", value: SCREEN_WIDTH },
"screenHeight": { type: "f", value: SCREEN_HEIGHT },
"sampleDistance": { type: "f", value: 0.94 },
"waveFactor": { type: "f", value: 0.00125 }
effect.materialHeat = new THREE.MeshShaderMaterial( {
},
uniforms: heatUniforms,
vertexShader: [
"varying vec2 vUv;",
......@@ -279,134 +293,67 @@
fragmentShader: [
"uniform float screenWidth;",
"uniform float screenHeight;",
"uniform float sampleDistance;",
"uniform float waveFactor;",
"uniform float screenWidth;",
"uniform float screenHeight;",
"uniform float sampleDistance;",
"uniform float waveFactor;",
"uniform sampler2D map;",
"varying vec2 vUv;",
"uniform sampler2D map;",
"varying vec2 vUv;",
"void main() {",
"void main() {",
"vec4 color, org, tmp, add;",
"float sample_dist, f;",
"vec2 vin;",
"vec2 uv = vUv;",
"vec4 color, org, tmp, add;",
"float sample_dist, f;",
"vec2 vin;",
"vec2 uv = vUv;",
"add += color = org = texture2D( map, uv );",
"add += color = org = texture2D( map, uv );",
"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
"sample_dist = dot( vin, vin ) * 2.0;",
"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
"sample_dist = dot( vin, vin ) * 2.0;",
"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
"vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
"vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
"if( tmp.b < color.b ) color = tmp;",
"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
"}"
"}"
].join("\n")
].join("\n")
} );
};
effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
return shader;
}
function initPostprocessingBloom( effect ) {
effect.type = "bloomnoise";
effect.scene = new THREE.Scene();
effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
effect.camera.position.z = 100;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
var screen_shader = THREE.ShaderExtras[ "screen" ];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
screen_uniforms["opacity"].value = 0.75;
effect.materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true
} );
var convolution_shader = THREE.ShaderExtras[ "convolution" ];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
effect.blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
convolution_uniforms["uImageIncrement"].value = effect.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
effect.materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var film_shader = THREE.ShaderExtras[ "film" ];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = effect.rtTexture1;
effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
effect.materialFilm.uniforms.grayscale.value = 0;
effect.materialFilm.uniforms.nIntensity.value = 0.5;
effect.materialFilm.uniforms.sIntensity.value = 0.5;
effect.materialFilm.uniforms.sCount.value = 1448;
effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
effect.quad.position.z = -500;
effect.scene.addObject( effect.quad );
}
var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
time, oldTime, delta;
......@@ -591,46 +538,7 @@
}
renderer.clear();
// BLOOM
// Render scene into texture
renderer.render( scene, camera, postprocessing1.rtTexture1, true );
// Render quad with blured scene into texture (convolution pass 1)
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );
// Render quad with blured scene into texture (convolution pass 2)
postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );
// Render original scene with superimposed blur to texture
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );
// NOISE + SCANLINES
postprocessing1.materialFilm.uniforms.time.value += 0.01;
postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;
renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );
// FOCUS
renderer.render( postprocessing2.scene, postprocessing2.camera );
composer.render( 0.01 );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或