mercredi 26 décembre 2018

WebGL Resetting vertex positions

I am creating a simple webgl program that puts 3 random vertices on the canvas and connects them into a triangle. I tried to add translation to move the triangle to the right (increase the X value of each vertex), but of course if it goes forever, the triangle will go out of the canvas. Does anyone know how to detect if the vertex has an x value above 1 and if yes, reset the position of the given vertex because my solution doesnt seem to do anything, its like it doesnt even trigger

      <!-- language: lang-js --> 
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("webgl");

  gl.clearColor(0.1, 0.2, 0.2, 1.0);
  gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);

  var indices = [0, 0, 0, 0, 0, 0];
  for(var points = 0; points < 6; points++)
  {
    indices[points] = (Math.random() * 2) - 1;
    //indices[points + 1] = Math.random() < 0.5 ? -1 : 1;
  }

  var buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), 
  gl.STATIC_DRAW);

  var vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vert, `
  precision mediump float;

  attribute vec2 position;
  uniform vec2 translation;

  void main(){
    gl_Position = vec4(position + translation, 0.0, 1.0);
  }
  `);
  gl.compileShader(vert);
  var success1 = gl.getShaderParameter(vert, gl.COMPILE_STATUS);
  if (!success1) {
    // Something went wrong during compilation; get the error
    throw gl.getShaderInfoLog(vert);
  }

  var frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(frag, `
  precision mediump float;
  void main(){
    gl_FragColor = vec4(0.3, 0.6, 0.4, 1.0);
  }
  `);
  gl.compileShader(frag);
  var success2 = gl.getShaderParameter(frag, gl.COMPILE_STATUS);
  if (!success2) {
    // Something went wrong during compilation; get the error
    throw gl.getShaderInfoLog(frag);
  }




  var program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);

  var vertLoc = gl.getAttribLocation(program, "position");
  gl.vertexAttribPointer(vertLoc, 2, gl.FLOAT, gl.FALSE, 0, 0);
  gl.enableVertexAttribArray(vertLoc);

  gl.useProgram(program);

  var trans = gl.getUniformLocation(program, "translation");
  var translation = [0.0, 0.0];
  gl.uniform2fv(trans, translation);


  gl.drawArrays(gl.TRIANGLES, 0, 3);
  function loop(){
    gl.clearColor(0.1, 0.2, 0.2, 1.0);
    gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
    translation[0] += 0.01;
    gl.uniform2fv(trans, translation);



    gl.drawArrays(gl.TRIANGLES, 0, 3);

    for(var points = 0; points < 6; points++)
    {
      if(indices[points] % 2 == 0){
        if(indices[points] + translation[0] > 1){
          indices[points] = (Math.random() * 2) - 1;
        }
      }
      //indices[points + 1] = Math.random() < 0.5 ? -1 : 1;
    }
    requestAnimationFrame(loop);
  }
  loop();




Aucun commentaire:

Enregistrer un commentaire