threejs第十二用 BloomPass辉光
看DEMO的名字 这个特效是参考UE4的 很炫
下面是需要的头文件
辉光的原理 了解过的是渲染一个场景进行模糊 再渲染一个原本的场景 再混合两个texture作为最后到屏幕的纹理
这个基于UE4的渲染方式，不知道有什么不一样的操作
var createRenderer=function()
{
renderer=new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.LinearToneMapping;这个是使HDR保留细节的东西。
renderer.domElement.style.position = "relative";
document.body.appendChild( renderer.domElement );
}
先来创建一个球
加载资源
var genCubeUrls = function ( prefix, postfix ) {
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
};
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
} );
var standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
color: 0xffffff,
metalness: 1.0
} );
var textureLoader = new THREE.TextureLoader();
textureLoader.load( './textures/roughness_map.jpg', function ( map ) {
map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 2 );
standardMaterial.roughnessMap = map;
standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
} );
这个是DEMO里面的一个立方体纹理 感觉像伪反光用的。
var geo2=new THREE.SphereGeometry(20,50,50);
var material=new THREE.MeshLambertMaterial({color:0xffffff});
var mesh2 =new THREE.Mesh(geo2,material);
mesh2.castShadow = true;
scene.add(mesh2);
var renderScene = new THREE.RenderPass( scene, camera );第一层通道绘制应该是原图
var effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );这个应该是模糊了
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );这个值应该是范围
var bloomPass=new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);
这个应该是混合两个纹理吧 猜的。
bloomPass.renderToScreen=true;
renderer.gammaInput = true;GAMMA矫正把计算机画面弄得更像人眼效果
renderer.gammaOutput = true;
使用通道
composer = new THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth,window.innerHeight);
composer.addPass(renderScene);
composer.addPass(effectFXAA);
composer.addPass(bloomPass);
var render=function()
{
如果使用了那个standardMaterial
//begin
if ( standardMaterial !== undefined ) {
standardMaterial.roughness = 1.0;
standardMaterial.bumpScale = 0.25;
var newEnvMap = standardMaterial.envMap;把环境贴图作为纹理贴在物体上
if ( hdrCubeRenderTarget ) newEnvMap = hdrCubeRenderTarget.texture;
if ( newEnvMap !== standardMaterial.envMap ) {
standardMaterial.envMap = newEnvMap;
standardMaterial.envMapIntensity = 1;
standardMaterial.needsUpdate = true;
}
}
//end
renderer.toneMappingExposure = Math.pow( 1.3, 4.0 );
requestAnimationFrame(render);
composer.render();
}
一起交流threejs吧 企鹅群511163089