Не удается сделать шейдер, работающий на three.js, из shaderfrom - PullRequest
Новая
       5

Не удается сделать шейдер, работающий на three.js, из shaderfrom

0 голосов
/ 14 сентября 2018

Я хотел бы импортировать этот шейдер в мой проект: https://shaderfrog.com/app/view/2447

Это мой фрагментный шейдер: 

<script id="fragmentShader" type="x-shader/x-fragment">
    #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;

    // Example varyings passed from the vertex shader
    varying vec3 vPosition;
    varying vec3 vNormal;
    varying vec2 vUv;

    void main() {
        vec3 color = vec3(texture2D(texture1, vUv));
        vec3 outcolor=color;
        float v = u_time + (vUv.x*0.5 + vUv.y*0.5);
        vec2 Uv2 = vec2(color.r+color.b+v,color.g+color.b+v);
        outcolor = vec3(texture2D(texture1, Uv2));
        gl_FragColor = vec4( outcolor, 1.0 );

    }
</script>

А это мой вершинный шейдер: 

<script id="vertexShader" type="x-shader/x-vertex">

    varying vec3 vPosition;
    varying vec3 vNormal;
    varying vec2 vUv;

    void main() {

        vNormal = normal;
        vUv = uv;
        vPosition = position;

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

    }

</script>

Мой шейдер компилируется, но у меня нет того же результата, у меня только сильно замороженное контрастное изображение. Кроме того, я увеличиваю свое равномерное значение u_time в функции requestAnimationFrame.

Я не вижу, что я делаю не так?

1 Ответ

0 голосов
/ 14 сентября 2018

Я упростил ваш код и заставил его работать с последней версией (r96).

Обратите внимание на настройки текстуры. 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 2);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var tex = new THREE.TextureLoader().load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
tex.wrapS = THREE.RepeatWrapping;
tex.wrapT = THREE.RepeatWrapping;

var geo = new THREE.PlaneBufferGeometry(2, 2);
var mat = new THREE.ShaderMaterial({
  uniforms:{
      time: {value: 0},
      texture1: {value: tex}
  },
  vertexShader:`
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    uniform sampler2D texture1;
    varying vec2 vUv;
    void main() {
      vec3 c = vec3(texture2D(texture1, vUv));
      float v = time + (vUv.x*0.5 + vUv.y*0.5);
      vec2 Uv2 = vec2(c.r + c.b+v, c.g + c.b + v);
      vec3 outcolor = vec3(texture2D(texture1, Uv2));
      gl_FragColor = vec4( outcolor, 1.0 );
    }
  `
});
var plane = new THREE.Mesh(geo, mat);
scene.add(plane);

var clock = new THREE.Clock();
var time = 0;

render();
function render(){
  requestAnimationFrame(render);
  time += clock.getDelta();
  mat.uniforms.time.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>
...