Question

我试图通过自定义着色器为组件内部创建的实体添加波浪，但是添加着色器后场景立即消失。如果删除着色器，则该实体将显示为静态实体。

控制台不会引发任何错误，所以我不确定发生了什么问题

这是一个codepen：codepen

如果删除了材质属性，则将显示实体。

    <script>
  AFRAME.registerComponent('waves', {
  init: function() {
    var texture = new THREE.TextureLoader().load( "https://cinemont.com/tutorials/zelda/water.png" );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(5, 5);
  this.geometry = new THREE.PlaneBufferGeometry( 4000, 2000, 128, 64 ); 
  this.material = new THREE.MeshPhongMaterial({
   map:texture,
   color: 0xffffff,
   opacity: 1,
   blending: THREE.NoBlending,
   side: THREE.DoubleSide,
   transparent: false,
   depthTest: false,
   wireframe: false 
  });
    var plane = new THREE.Mesh(this.geometry, this.material);
    plane.position.set(0, -400, -300);
    plane.rotation.set(Math.PI / 2, 0, 0);
    var el = this.el;
    el.setObject3D('mesh', plane);
  }
});
</script>
<script>
AFRAME.registerShader('makewaves', {
  schema: {
    color: {type: 'color', is: 'uniform', default: '#0051da'},
    timeMsec: {type: 'time', is: 'uniform'}
  },

  vertexShader: `
#define SCALE 10.0

varying vec2 vUv;

uniform float timeMsec;  

float calculateSurface(float x, float z) {
    float uTime = timeMsec / 1000.0;
    float y = 0.0;
    y += (sin(x * 1.0 / SCALE + uTime * 1.0) + sin(x * 2.3 / SCALE + uTime * 1.5) + sin(x * 3.3 / SCALE + uTime * 0.4)) / 3.0;
    y += (sin(z * 0.2 / SCALE + uTime * 1.8) + sin(z * 1.8 / SCALE + uTime * 1.8) + sin(z * 2.8 / SCALE + uTime * 0.8)) / 3.0;
    return y;
}

void main() {
    float uTime = timeMsec / 1000.0;
    vUv = uv;
    vec3 pos = position;    
    float strength = 1.0;
    pos.y += strength * calculateSurface(pos.x, pos.z);
    pos.y -= strength * calculateSurface(0.0, 0.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}  
`,
  fragmentShader: `
varying vec2 vUv;

uniform sampler2D uMap;

uniform vec3 color;

uniform float timeMsec; 

void main() {
    float uTime = timeMsec / 1000.0;     
    vec2 uv = vUv * 10.0 + vec2(uTime * -0.05);

    uv.y += 0.01 * (sin(uv.x * 3.5 + uTime * 0.35) + sin(uv.x * 4.8 + uTime * 1.05) + sin(uv.x * 7.3 + uTime * 0.45)) / 3.0;
    uv.x += 0.12 * (sin(uv.y * 4.0 + uTime * 0.5) + sin(uv.y * 6.8 + uTime * 0.75) + sin(uv.y * 11.3 + uTime * 0.2)) / 3.0;
    uv.y += 0.12 * (sin(uv.x * 4.2 + uTime * 0.64) + sin(uv.x * 6.3 + uTime * 1.65) + sin(uv.x * 8.2 + uTime * 0.45)) / 3.0;

    vec4 tex1 = texture2D(uMap, uv * 1.0);
    vec4 tex2 = texture2D(uMap, uv * 1.0 + vec2(0.2));

    vec3 blue = color;

    gl_FragColor = vec4(blue + vec3(tex1.a * 0.9 - tex2.a * 0.02), 1.0);

}`
});
</script>
<a-scene>
        <a-camera postion="0 1.2 0"></a-camera>     
  <a-entity material="shader:makewaves;" 
            waves></a-entity>
  <a-entity light="type: directional; color: #ffffff; intensity: 2.8; castShadow:true;" position="0 2 -10"></a-entity>
  <a-light type="point" color="blue" position="0 5 0"></a-light>
    <a-light type="directional" color="blue" intensity="1.8" position="0 5 0"></a-light> 
</a-scene>

Answer 1

这里的问题是，所应用材质中的着色器不提供贴图均匀度/纹理值。

另一方面，您尝试两次创建材质：

1）首先，您使用a-frame s material组件创建材质
2）然后，在waves组件内创建一个新的几何+一个新的材料（三种材料类型不正确）。您需要让a-frame处理大部分工作，或者完全在THREE.js中创建网格（几何+材质）。

AFRAME
没有太多要在这里添加。您的着色器不会暴露纹理的任何统一，因此您需要在registerShader内部将其添加到架构中：

AFRAME.registerShader('makewaves', {
  schema: {
     ......,
    uMap: {
      type: 'map',
      is: 'uniform'
    }
  }, .....

并像这样使用着色器：

<a-plane postion="1 1.2 2" width="5" height="5" rotation="-90 0 90" material="shader:makewaves; 
uMap: https://cinemont.com/tutorials/zelda/water.png;"></a-plane>

然后a-frame将使用您的vertexShader和fragmentShader创建一个新的着色器。示例here。

同样，基于@ngoKevin的anwser，向默认平面添加更多的线段将允许更多的顶点以“波动”运动。

segments-height="20" segments-width="20"

提琴here。

三个

要使用自定义着色器，您需要使用THREE.ShaderMaterial：

THREE.ShaderMaterial({
     fragmentShader: this.fragmentShader, // custom fragment shader
     vertexShader: this.vertexShader, // custom vertex shader
     ......

这是三种设计用于自定义着色器的材料。

签出here。

Answer 2

您还需要segments-height="20" segments-width="20"中的a-plane来使其顶点移位。默认平面的拐角处只有顶点，因此不会产生波浪。

https://codepen.io/anon/pen/MPoBKz?editors=1000

具有ThreeJS材质的着色器无法在框架中使用

2 个答案: