Шейдер с материалом Threejs не работает в рамке - PullRequest
Новая
       33

Шейдер с материалом Threejs не работает в рамке

0 голосов
/ 09 октября 2018

Я пытаюсь добавить волны через пользовательский шейдер для объекта, созданного внутри компонента, но сцена исчезает, как только шейдер добавляется.Если я удаляю шейдер, сущность отображается как статическая сущность.

Консоль не выдает никаких ошибок, поэтому я не уверен, что происходит не так

Вот кодовая ручка: 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>

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Вам также нужно segments-height="20" segments-width="20" в вашем a-plane, чтобы дать вершинам смещение.Плоскость по умолчанию имеет только вершины в углу, поэтому вы не получите волн.

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

0 голосов
/ 09 октября 2018

Проблема здесь в том, что ваш шейдер в применяемом материале не обеспечивает форму карты / значение текстуры.

С другой стороны, вы пытаетесь создать материал дважды:

1)Сначала вы создаете материал с компонентом a-frame s material
2) Затем вы создаете новую геометрию + новый материал (с неверным ТРИ типом материала) в компоненте waves.Вам нужно либо позволить a-frame позаботиться о большей части этого, либо создать сетку (геометрия + материал) целиком в THREE.js.

РАМКА
Не так много здесь, чтобы добавить.Ваш шейдер не предоставляет никакой формы для текстуры, поэтому внутри 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 и фрагмента шейдера.Пример здесь .

Кроме того, основываясь на ответе @ ngoKevin, добавление большего количества сегментов к плоскости по умолчанию позволит перемещать больше вершин с помощью движения "wave". 
segments-height="20" segments-width="20"

fiddle here .

ТРИ

Чтобы использовать пользовательский шейдер, вам необходимо использовать THREE.ShaderMaterial : 

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

Это ТРИ материала, предназначенного для использования с пользовательскими шейдерами.

Проверьте здесь .

...