ShaderPass中的Three.js .HDR纹理

时间:2019-04-30 02:29:43

标签: three.js webgl shader fragment-shader hdr

我从事一个项目已经有一段时间了,似乎遇到了很大的障碍。 使用Three.js的ShaderPass,我想将.hdr文件加载到自定义着色器的sampler2D中。 加载图像“作品”,但是我得到的结果不正确。 见下文。 enter image description here

这是我一直坚持的代码。

MessageView

我一直在使用ThreeJS示例中的着色器,它似乎很好地“解码”了hdr图像 https://threejs.org/examples/webgl_loader_texture_hdr.html

///////////////////////////////// <<<<<<<<<<<<<<<<<<<<<<<<<<<
        // Setup Composer & ShaderPass // <<<<<<<<<<<<<<<<<<<<<<<<<<<

        var composer;
        composer = new THREE.EffectComposer( renderer );
        composer.addPass( new THREE.RenderPass( scene, camera ) );
        var effect = new THREE.ShaderPass( THREE.VrayPost );    
        effect.renderToScreen = true;
        composer.addPass( effect ); 

        var loader = new THREE.RGBELoader();            
        var texture = loader.load( "../../images/mini/car.hdr", function( texture, textureData ){
            console.log( textureData.header ); // header string
            console.log( [textureData.width, textureData.height] ); // dimensions
            console.log( textureData.exposure);
            console.log( textureData.gamma );
            texture.flipY = true;
            texture.minFilter  = THREE.NearestFilter;
            texture.needsUpdate = true;
            effect.uniforms[ 'map' ].value = texture;
            effect.uniforms[ 'exposure' ].value = 1;
            effect.uniforms[ 'brightmax' ].value = 1;
        });

};

0 个答案:

没有答案