Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Updated text example to use new postprocessing system.

上级 3a5d02cc
隐藏空白更改
内联 并排
Showing with 35 addition and 109 deletion
examples/webgl_geometry_text.html
浏览文件 @ beeac6bc
......@@ -41,6 +41,11 @@
<script type="text/javascript" src="../build/Three.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/FilmPass.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>
......@@ -68,6 +73,8 @@
var camera, scene, renderer;
var composer;
var textMesh1, textMesh2, textGeo, faceMaterial, textMaterialFront, textMaterialSide, parent;
var firstLetter = true;
......@@ -148,11 +155,15 @@
permalink = document.getElementById( "permalink" );
// CAMERA
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
camera.position.y = 400;
camera.position.z = 700;
camera.target.position.y = 100;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
......@@ -222,6 +233,8 @@
plane.position.y = 100;
scene.addChild( plane );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
......@@ -229,11 +242,15 @@
container.appendChild( renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
// EVENTS
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
......@@ -315,9 +332,23 @@
}, false );
initPostprocessing();
// POSTPROCESSING
renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 0.25 );
var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
effectFilm.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
}
//
......@@ -561,76 +592,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.ShaderUtils.lib["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.ShaderUtils.lib["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.ShaderUtils.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
} );
var film_shader = THREE.ShaderUtils.lib["film"];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
postprocessing.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
postprocessing.materialFilm.uniforms.grayscale.value = 0;
postprocessing.materialFilm.uniforms.nIntensity.value = 0.15;
postprocessing.materialFilm.uniforms.sIntensity.value = 0.25;
postprocessing.materialFilm.uniforms.sCount.value = 2048;
//postprocessing.materialFilm.uniforms.nIntensity.value = 0;
//postprocessing.materialFilm.uniforms.sIntensity.value = 0;
postprocessing.materialScreen.uniforms.opacity.value = glow;
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 animate() {
requestAnimationFrame( animate );
......@@ -652,49 +613,14 @@
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
if ( postprocessing.enabled ) {
renderer.clear();
// Render scene into texture
renderer.render( scene, camera, postprocessing.rtTexture1, true );
renderer.clear();
// Render quad with blured scene into texture (convolution pass 1)
postprocessing.quad.materials[ 0 ] = 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[ 0 ] = postprocessing.materialScreen;
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
// Render to screen
postprocessing.materialFilm.uniforms.time.value += 0.01;
postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
if ( postprocessing.enabled ) {
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
renderer.render( postprocessing.scene, postprocessing.camera );
composer.render( 0.05 );
} else {
renderer.clear();
renderer.render( scene, camera );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或