Как заставить текстуру двигаться по оси Y и X в WebGL - PullRequest
Новая
       17

Как заставить текстуру двигаться по оси Y и X в WebGL

0 голосов
/ 20 ноября 2018

В этом проекте я пытаюсь переместить текстуру (изображение капель дождя, отправленное в формате 1024x2048 png) вниз по моему экрану, прежде чем зациклить пиксели вверх до верхней части экрана, как только они достигнут нижней части холста. Как только пиксели достигнут вершины, я также хочу немного переместить его вправо, и после нескольких итераций он достигнет самой левой стороны холста, а затем он будет отправлен на крайнюю правую сторону холста. Тем не менее, я не могу заставить его работать правильно. Поскольку мои знания WebGL весьма ограничены, я не уверен, что делаю неправильно или какие правильные вопросы мне следует задавать. Я почти уверен, что проблема в том, как я пытаюсь переместить пиксели, но я не знаю, что мне следует делать вместо этого.

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

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

attribute  vec4 vPosition;
attribute vec2 vTexCoord;

varying vec2 fTexCoord;

void main() 
{
	float y= vTexCoord.y - float(0.01);
	float x= vTexCoord.x;
	
	if(y < float(0.0)) {
		y = float(1.0);
		//x = fTexCoord.x + float(0.1) ;
	}
/*	if(x > float(1.0)){
		x = float(0.0);
	}
*/	
   gl_Position = vPosition;
	fTexCoord= vec2(x,y);
} 
</script>

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

<script id="fragment-shader1" type="x-shader/x-fragment">

precision mediump float;

uniform sampler2D texture1;

varying vec2 fTexCoord;

void
main()
{

//	gl_FragColor = texture2D(texture1, vec2(x,y)); 

	
	gl_FragColor= texture2D(texture1, fTexCoord);
}

</script>

Вышеуказанные шейдеры должны заставлять капли дождя с изображения (ссылка ниже) перемещаться вниз по экрану. raindrop.png

Но вместо этого он просто растягивает капли дождя. (Это делает это: messedup_raindrops.png )

Есть идеи как это исправить?

1 Ответ

0 голосов
/ 20 ноября 2018

Похоже, вы хотите "прокрутить" текстуру.Для этого вы можете просто передать смещение координатам текстуры.Вы можете сделать это либо в фрагментном, либо в вершинном шейдере

Эффективно 

uniform vec2 offset;

vec2 newTexCoords = texCoords + offset;

И затем просто изменить offset с течением времени.Значения смещения, как правило, должны находиться в диапазоне от 0 до 1, поскольку в прошлом все повторяется.

Пример: 

const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform vec2 offset;

varying vec2 v_texcoord;

void main() {
  gl_Position = position;
  v_texcoord = texcoord + offset;
}
`;

const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D tex;
void main() {
  gl_FragColor = texture2D(tex, v_texcoord);
}
`;

const gl = document.querySelector('canvas').getContext('webgl');

// compile shaders, link program, lookup locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    numComponents: 2,
    data: [
      -1, -1,
       1, -1,
      -1,  1,
      -1,  1,
       1, -1,
       1,  1,
    ],
  },
  texcoord: {
    numComponents: 2,
    data: [
       0,  1,
       1,  1,
       0,  0,
       0,  0,
       1,  1,
       1,  0,
    ],
  },
});

const texture = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/ZKMnXce.png',
  crossOrigin: 'anonymous',
});

function render(time) {
  time *= 0.001;  // convert to seconds
  
  gl.useProgram(programInfo.program);
  // bind buffers and set attributes
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  // set uniforms and bind textures
  twgl.setUniforms(programInfo, {
    tex: texture,
    offset: [(time * .5) % 1, (time * .6) % 1],
  });
  const count = 6;
  gl.drawArrays(gl.TRIANGLES, 0, count);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);
canvas { border: 1px solid black; }
<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.js"></script>

Если вы хотите что-то более гибкое, я бы предложил вам использовать матрицу для текстурных координат 

uniform mat4 texMatrix;

vec2 newTexCoords = (texMatrix * vec4(texCoords, 0, 1)).xy;

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

...