how to create a parabola in openGl or webGL

Question

how to create a parabola in openGl or webGL

Navigation

#1 by (-1 votes)

0

I need to draw the equation y = 2x^2 - 1 , but I can not find how to do it, in the code you can find the JS to draw on the video card, etc. They ask me to do that equation by modifying the function draw , how?

function draw(){
    init('gl_canvas', 'vertexShader', 'fragmentShader');
    if( gl ){
        var buffer;
        buffer = gl.createBuffer();
                       //x y  z
        var vertices = [0, 0 ,0 , -1 , -1 ,0 , 1 ,-1 ,0]; 

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        gl.clearColor(0, 0, 0, 1);
        gl.clear( gl.COLOR_BUFFER_BIT );

        gl.bindBuffer(gl.ARRAY_BUFFER , buffer);
        gl.vertexAttribPointer( program.aVertexPosition , 3 , gl.FLOAT , false , 0 , 0);

        gl.drawArrays(gl.TRIANGLES, 0, 3);
        G.deleteBuffer(buffer);          
    }
}

var gl;
var program;

function setupShaders( vertexShaderName, fragmentShaderName ){

    // Setup Shaders:
    var v = document.getElementById(vertexShaderName).firstChild.nodeValue;
    var f = document.getElementById(fragmentShaderName).firstChild.nodeValue;

    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, v);
    gl.compileShader(vs);

    if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
        alert(gl.getShaderInfoLog(vs));

    var fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fs, f);
    gl.compileShader(fs);

    if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
        alert(gl.getShaderInfoLog(fs));

    program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
        alert(gl.getProgramInfoLog(program));

    // Setup Geometry:
    gl.useProgram(program);
    
    program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
    gl.enableVertexAttribArray(program.aVertexPosition);
}

function init( canvasName, vertexShaderName, fragmentShaderName ){

    var canvas = document.getElementById(canvasName);
    gl = canvas.getContext("webgl");
    if(gl){

        setupShaders(vertexShaderName, fragmentShaderName);
    }

}

<html>
   <head>
      <meta charset="utf-8" />
      <script id="vertexShader" type="x-shader/x-fragment">
         attribute vec3 aVertexPosition;
         
         void main() {
             gl_Position  = vec4(aVertexPosition, 1.0);
             gl_PointSize = 10.0;
         }
      </script>
      <script id="fragmentShader"  type="x-shader/x-fragment">
         void main() {
             gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
         }
      </script>
      <script src="test.js" ></script>
      <script>
         function draw(){
         
             init('gl_canvas', 'vertexShader', 'fragmentShader');
             if( gl ){
         var buffer;
         buffer = gl.createBuffer();
                 //x y  z
         var vertices = [0, 0 ,0 , -1 , -1 ,0 , 1 ,-1 ,0]; 
         //q metodo esta activo
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer); //lo  q se haga de ahora en adelante es con ese buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);//llenar el buffer en la memoria de video
         		//32 bits por pixel , valores q no se cambian
         		//float 0-255  
         
         gl.clearColor(0, 0, 0, 1);
                 gl.clear( gl.COLOR_BUFFER_BIT );
         
         gl.bindBuffer(gl.ARRAY_BUFFER , buffer);
         gl.vertexAttribPointer( program.aVertexPosition , 3 , gl.FLOAT , false , 0 , 0);//pasar vertice al vertexShader
         					//cada vertice del arreglo tiene 3 coordenadas 
         					//tipo flotantes 
         					//escala falso
         					//desde q indice del arreglo empieza a dibujar
         					//espacios entre cada punto
         //coordenadas x y z = 3
         //gl.drawArrays(gl.POINTS, 0, 3);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
         //dibujar puntos q son solo los vertices 
         // gl.TRIANGLES une los puntos y los rellena
         
         gl.deleteBuffer(buffer);			 
         
         
         
                 
             }
         } 
         
      </script>
   </head>
   <body onload="draw();">
      <canvas id='gl_canvas' width="400" height="400"/>
   </body>
</html>

javascript html5 opengl webgl

asked by santiago 14.02.2018 в 05:05

source

1 answer

SQL Server 2008 - Modify the option: "Modify the first x rows" Laravel 5.5 Containers

score -1 · Answer 1

Well there are several ways, the simplest way is to change your type of primitive to lines or points, and simply generate the coordinates of your parabola and pass that data as attributes of the vertex shader, or you can also use a fragment shader manipulating the color of each fragment using the formula of the prabola to each fragment. The following code fragment is to generate your vertices:

var vertices = new Float32Array(14);

for (var i = 0; i <= 12; i+=2)
{
    var x = (i / 12) * 2 - 1; // coordenadas NDC
    vertices[i] = x;
    vertices[i + 1] = x * x;
}

var n = 7;

And to draw just change the primitive to lines or points