Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 344ff23a 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #15026 from WestLangley/dev-exr_example 

EXR example: remove custom tone mapping shader
上级 aa044f69 af6d4615
隐藏空白更改
内联 并排
Showing with 44 addition and 98 deletion
examples/webgl_loader_texture_exr.html
浏览文件 @ 344ff23a
......@@ -31,7 +31,6 @@
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl EXR texture loader example
</div>
......@@ -42,154 +41,101 @@
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<!-- HDR fragment shader -->
<script id="fs-hdr" type="x-shader/x-fragment">
uniform sampler2D tDiffuse;
uniform float exposure;
uniform float brightMax;
varying vec2 vUv;
void main() {
vec4 color = texture2D( tDiffuse, vUv );
// Perform tone-mapping
float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
float YD = exposure * (exposure / brightMax + 1.0) / (exposure + 1.0);
color *= YD;
gl_FragColor = vec4( color.xyz, 1.0 );
}
</script>
<!-- HDR vertex shader -->
<script id="vs-hdr" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script>
var params = {
exposure: 1.0,
};
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var container, stats;
var params = {
exposure: 1.0
};
var camera, scene, renderer;
var materialHDR, quad, gamma, exposure;
var renderer, scene, camera;
init();
function init() {
container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = params.exposure;
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 900;
renderer.gammaOutput = true;
scene = new THREE.Scene();
var loader = new THREE.EXRLoader();
var aspect = window.innerWidth / window.innerHeight;
loader.load( "textures/piz_compressed.exr", function( texture, textureData ) {
camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
console.log( textureData.header ); // exr header
new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture, textureData ) {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
//console.log( textureData );
//console.log( texture );
materialHDR = new THREE.ShaderMaterial( {
texture.generateMipmaps = true;
uniforms: {
tDiffuse: { value: texture },
exposure: { value: 1.0 },
brightMax: { value: 18.0 }
},
vertexShader: getText( 'vs-hdr' ),
fragmentShader: getText( 'fs-hdr' )
// these setting are currently set correctly by default
//texture.encoding = THREE.LinearEncoding;
//texture.minFilter = THREE.LinearMipMapLinearFilter;
//texture.magFilter = THREE.LinearFilter;
//texture.flipY = true;
} );
var material = new THREE.MeshBasicMaterial( { map: texture } );
quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( textureData.width, textureData.height ), materialHDR );
quad.position.z = -100;
scene.add( quad );
animate();
var quad = new THREE.PlaneBufferGeometry( textureData.width / textureData.height, 1 );
} );
var mesh = new THREE.Mesh( quad, material );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
scene.add( mesh );
stats = new Stats();
container.appendChild( stats.dom );
render();
window.addEventListener( 'resize', onWindowResize, false );
} );
//
var gui = new dat.GUI();
gui.add( params, 'exposure', 0.1, 5 );
gui.add( params, 'exposure', 0, 2 ).onChange( render );
gui.open();
}
//
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
window.addEventListener( 'resize', onWindowResize, false );
}
function getText( id ) {
function onWindowResize() {
return document.getElementById( id ).textContent;
var aspect = window.innerWidth / window.innerHeight;
}
var frustumHeight = camera.top - camera.bottom;
//
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
function animate() {
camera.updateProjectionMatrix();
requestAnimationFrame( animate );
renderer.setSize( window.innerWidth, window.innerHeight );
render();
stats.update();
}
//
function render() {
materialHDR.uniforms.exposure.value = params.exposure;
renderer.toneMappingExposure = params.exposure;
renderer.render( scene, camera );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或