Question

我有一个由THREE.PlaneGeometry和一种材料组成的经典网格。如果我添加THREE.MeshNormalMaterial()，则得到的结果是：

到目前为止，太好了。但是，当我使用外部纹理调用THREE.ShaderMaterial()时，网格的尺寸会完全改变：

即使我的纹理是正方形（512x512），我也总是得到怪异的比率，就像在屏幕截图中一样。我只希望我的MaterialShader适合我的几何形状。

这是我的MaterialShader的代码：

var material = new THREE.ShaderMaterial( {
   uniforms: uniforms,
   vertexShader: document.getElementById( 'vertexShader' ).textContent,
   fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

我看不到我想念的东西。有人有主意吗？非常感谢。

更新：这是我的ShaderMaterial的完整代码：

material = new THREE.ShaderMaterial({
    uniforms:{
        u_time: { type: "f", value: 1.0 },
        u_resolution: { type: "v2", value: new THREE.Vector2() },
        u_mouse: { type: "v2", value: new THREE.Vector2() },
        texture1: { type: "t", value: texture }
    },
    vertexShader:`
        void main() {
            gl_Position = vec4( position, 1.0 );
        }
    `,
    fragmentShader:`
        #ifdef GL_ES
            precision highp float;
            precision highp int;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        uniform sampler2D texture1;

        void main(){

            float pyt=3.1415926*2./3.;
            float m=-1e10;
            vec4 mv= vec4(0.);

            vec2 xy = gl_FragCoord.xy/u_resolution.xy;

            int ic=0;

            for (int i=0;i<30;i++){
                vec2 np=vec2(xy.x+float(i)/u_resolution.x*sin(3.14/2.)  * 4.,xy.y+float(i)/u_resolution.y*cos(3.14/2.) * 4.);


                float jTime = u_time*1.618;  
                vec4 tk=texture2D(texture1,np);
                float t=tk.r*sin(jTime)+tk.g*sin(jTime+pyt)+tk.b*sin(jTime+2.*pyt)-.01*float(i);

                if (t>m){m=t; mv=tk;ic=i;}
            }
            float sc=float(ic)/30.;
            vec4 tk=texture2D(texture1,xy);
            mv=sc*tk+(1.-sc)*mv;
            gl_FragColor = vec4(mv.r,mv.g,mv.b,1.0);
        }
    `
});

UPDATE2：我更改了顶点着色器，但没有任何改变。

我可能有一个线索：我认为这与我的相机设置有关。我更改了它们，并且得到了更好的结果。现在我的纹理适合我的方形网格了。

不幸的是，规模并不理想。由于我的纹理也是正方形，因此我希望它的大小与我的网格大小完全相同，现在可以缩放了。

如何管理纹理的大小？我应该在vertexShader内部执行此操作吗？

现在是我的纹理设置：

texture = new THREE.TextureLoader().load( "test5.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

更新3：

我发现该代码可以应用纹理并使之适合我的网格： https://bl.ocks.org/duhaime/c8375f1c313587ac629e04e0253481f9

它正在工作，但是一旦我按我的方式更改了示例片段着色器，我就没有任何错误，但是着色器成为一种独特的颜色。我不明白我在想什么...

Answer 1

Try this code of the vertex shader:

void main() {
  gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(position,1.0);
}

Reference

Simply pass the uv coordinates from the vertex shader to the fragment shader and use them there.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var iResolution = new THREE.Vector2();

var planeGeo = new THREE.PlaneBufferGeometry(5, 5);
var planeMat = new THREE.ShaderMaterial({
  uniforms: {
    texture: {
      value: null
    },
    iResolution: {
      value: iResolution
    },
    iTime: {
      value: 0
    }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix *
                    modelViewMatrix *
                    vec4(position,1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D texture;
    uniform float iTime;
    uniform vec2 iResolution;
    
    varying vec2 vUv;
    
    void main() {
      float pyt=3.1415926*2./3.;
      float m=-1e10;//very negitive start value for maximisation algorithm.
      vec4 mv= vec4(0.);//lank starting value of max so far

      vec2 xy = vUv;
      int ic=0;//stores smear distance
      for (int i=0;i<30;i++){
          //point offset on a circle
          vec2 np=vec2(xy.x+float(i)/iResolution.x*sin(iTime),xy.y+float(i)/iResolution.y*cos(iTime));
          //colour cycles faster than position
          float jTime = iTime*1.618;  
          //get neerby point
        vec4 tk=texture2D(texture,np);
          // and if its colourfull enough, use that
          float t=tk.r*sin(jTime)+tk.g*sin(jTime+pyt)+tk.b*sin(jTime+2.*pyt)-.01*float(i);
          if (t>m){m=t; mv=tk;ic=i;}
      }
      //mix smeared with background depending ondistance
      float sc=float(ic)/30.;
      vec4 tk=texture2D(texture,xy);
      mv=sc*tk+(1.-sc)*mv;
      gl_FragColor = vec4(mv.rgb,1.0);
    }
  `
});

var textureLoader = new THREE.TextureLoader();
textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg", tex => {
  planeMat.uniforms.texture.value = tex;
  planeMat.uniforms.texture.value.needsUpdate = true;
  iResolution.set(tex.image.width, tex.image.height);
  planeMat.needsUpdate = true;
  console.log(texture);
});

var plane = new THREE.Mesh(planeGeo, planeMat);
scene.add(plane);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  planeMat.uniforms.iTime.value = time;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

THREE.JS ShaderMaterial超出了我的网格

1 个答案: