2016-03-28 16 views
1

Normal bir doku uygulandığında, offset.y değerini değiştirmeme izin veren bir nesne var, ancak RGBELoader ve bir HDR dosyası kullanıldığında artık kaymayı değiştiremiyorum .Y.Three.JS HDR değiştirilemiyor RGBELoader Offset.y Değer

   var loader3 = new THREE.ObjectLoader(); 
      loader3.load("model/dome/dome2.json",function (obj) { 
       obj.scale.x = 7; 
       obj.scale.y = 7; 
       obj.scale.z = 7; 
       obj.position.x = 0; 
       obj.position.z = 0; 
       obj.position.y = 0; 


       var loader = new THREE.RGBELoader(); 
       var texture = loader.load("maps/scene2.hdr", function(texture, textureData){ 
        materialHDR = new THREE.ShaderMaterial({ 
         uniforms: { 
          tDiffuse: { type: "t", value: texture }, 
          exposure: { type: "f", value: textureData.exposure }, 
          brightMax: { type: "f", value: textureData.gamma } 
          }, 
         vertexShader: getText('vs-hdr'), 
         fragmentShader: getText('fs-hdr') 
        }); 


        texture.offset.y = 0.5; // HERE LIES THE PROBLEM 
        texture.flipY = true; 

        obj.traverse(function (child) { 
         if (child instanceof THREE.Mesh) { 
          child.material = materialHDR; 
          child.receiveShadow = true; 
          //child.material.side = THREE.BackSide; 
          child.material.side = THREE.DoubleSide; 
         } 
        }); 

        scene.add(obj); 
       }); 


      }); 

HDR görüntü yükleri sadece iyi ve nesneye uygulanan ben normal bir doku kullandığınızda ancak ben sadece modelin etrafına dokusunu hareket edemez olduğu gibi şu şekildedir:

Benim kodudur herşey.

Tekrarla ve her türlü kombinasyonla sarmayı denedim, ancak inatçı ofset çalışmayacak!

Ayrıca şu an eklemek istediğim üç tane (awesome!) Öğreniyorum.

Şimdiden herhangi bir yardım için teşekkürler, beni deli ediyor!

 <script id="fs-hdr" type="x-shader/x-fragment"> 
     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; 
      /* 
      // remove gamma correction 
      vec4 res = color * color; 
      // decoded RI 
      float ri = pow(2.0, res.w * 32.0 - 16.0); 
      // decoded HDR pixel 
      res.xyz = res.xyz * ri; 
      return res.xyz; 
      */ 
     } 
     void main() { 
      vec4 color = texture2D(tDiffuse, vUv); 
      color.xyz = decode_pnghdr(color); 
      // apply gamma correction and exposure 
      //gl_FragColor = vec4(pow(exposure * color.xyz, vec3(0.474)), 1.0); 
      // 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, 3); 
     } 
    </script> 
+0

göstermek Can ayarlamalısınız gölgelendirici kodun? – WestLangley

+0

emin shader kodu teşekkürler :) –

cevap

0

Size özel shader altında

Shader kodu offset/repeat işlemesi gerekir.

Üniformalarınıza offsetRepeat ekleyin;

offsetRepeat: { type: "v4", value: new THREE.Vector4(0, 0.5, 1, 1) } 

Ve değiştirmek için tepe tarayıcı

uniform vec4 offsetRepeat; 
varying vec2 vUv; 

void main() { 

    vUv = uv * offsetRepeat.zw + offsetRepeat.xy; 

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 

} 

Sizin doku güç-iki olabilir ve

texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 

Three.js r.75

+0

WestLangley ... siz efendim, modern bir gündü dehası, 4 saat başağrısı üzerinde bir soğuk içecek için şimdi benim buzdolabına emekli olacaksınız üzerinde yardımlarınız için teşekkür ederim :) –