Three.js .HDR текстура в ShaderPass - PullRequest
       85

Three.js .HDR текстура в ShaderPass

0 голосов
/ 30 апреля 2019

Я работал над проектом в течение некоторого времени и столкнулся с, казалось бы, большим препятствием. Используя ShaderPass Three.js, я хочу загрузить файл .hdr в sampler2D моего пользовательского шейдера. Загрузка изображения «работает», но полученный результат неверен. Увидеть ниже. enter image description here

Вот мой код, на котором я застрял.

///////////////////////////////// <<<<<<<<<<<<<<<<<<<<<<<<<<<
        // 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;
        });

Я использовал шейдер из примеров ThreeJS, который, казалось, красиво «декодировал» HDR-изображение https://threejs.org/examples/webgl_loader_texture_hdr.html

THREE.VrayPost = {
uniforms: {
    "map": { value: null },     
    "exposure": { value: null },        
    "brightmax": { value: null },               
},
vertexShader: [
    "varying vec2 vUv;",
    "void main() {",
        "vUv = uv;",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" ),
fragmentShader: [
    "uniform sampler2D map;",

    'uniform sampler2D   tDiffuse;',
    'uniform float       exposure;',
    'uniform float       brightMax;',

    "varying vec2 vUv;",

    'vec3 decode_pnghdr( const in vec4 color ) {',
    '   vec4 rgbcolor = vec4( 0.0, 0.0, 0.0, 0.0 );',
    '   if ( color.w > 0.0 ) {',
    '       float f = pow(2.0, 127.0*(color.w-0.5));',
    '       rgbcolor.xyz = color.xyz * f;',
    '   }',
    '   return rgbcolor.xyz;',
    '}',

    "void main() {",
        'vec4 color = texture2D( map, vUv );',
        'color.xyz  = decode_pnghdr( color );',

        "gl_FragColor = vec4( color.xyz, 1.0 )*vec4(exposure);",
    "}"
].join( "\n" )

};

...