Wie mache ich diese Dreiecke haben keine Füllung und nur Grenzen?

Ich habe folgende Anweisungen für verschiedene Quellen versucht, aber keinen Erfolg gehabt. Ich bin sehr neu in WebGL und OpenGL. Ich wurde diesen Code zur Verfügung gestellt und seitdem habe ich Verbesserungen vorgenommen. Wenn jemand irgendwelche Ressourcen hat, die sie teilen möchten, damit ich meine eigene Frage beantworten kann, würde ich das schätzen!Wie mache ich diese Dreiecke haben keine Füllung und nur Grenzen?

Hier ist mein HTML:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <!--Include A/S WebGL support libraries--> 
    <script type="text/javascript" src="../Common/webgl-utils.js"></script> 
    <script type="text/javascript" src="../Common/initShaders.js"></script> 
    <script type="text/javascript" src="../Common/MV.js"></script> 
    <script type="text/javascript" src="../Common/webgl-debug.js"></script> 
    <script type="text/javascript" src="assignment1.js"></script> 
    <script id="vertex-shader" type="x-shader/x-vertex"> 
     // GLSL vertex shader code 
     attribute vec4 vPosition; 
     void main() 
     { 
      gl_Position = vPosition; 
     } 
    </script> 
    <script id="fragment-shader" type="x-shader/x-fragment"> 
     // GLSL fragment shader code 
     precision mediump float; 
     uniform float u_time; 
     void main() 
     { 
      gl_FragColor = vec4(abs(sin(u_time)), 1.0, 1.0, 1.0); 
     } 
    </script> 
<canvas id="gl-canvas" width="512" height=" 512">> 
Oops ... your browser doesn't support the HTML5 canvas element 
</canvas> 
</body> 
</html>

Hier ist mein JavaScript:

var gl; 
var points; 

window.onload = function init(){ 
    var canvas = document.getElementById("gl-canvas"); 

    // gl = WebGLUtils.setupWebGL(canvas); // More efficient 
    gl = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl")); // For debugging 
    if (!gl) { alert("WebGL isn't available"); 
       } 

    // Four 2D Vertices using Angel/Shreiner utility class vac2 
    var vertices = [   
     vec2(-0.5, -0.5), 
     vec2(-0.5, 0.5), 
     vec2(0.5, 0.5), 
     vec2(0.5, -0.5) 
    ]; 


    // Configure WebGL 

    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(0.0, 0.0, 0.0, 0.0); 

    // Load shaders and initialize attribute buffers using A/S utility initShaders 

    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 

    // Load the data into the GPU using A/S flatten function 

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 


    // Associate our shader variables with our data buffer 

    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(
     vPosition, // Specifies the index of the generic vertex attribute to be modified. 
     2,   // Specifies the number of components per generic vertex attribute. 
        // Must be 1, 2, 3, or 4. 
     gl.FLOAT, // Specifies the data type of each component in the array. 
      // GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_FIXED, or GL_FLOAT. 
     false,  // Specifies whether fixed-point data values should be normalized (GL_TRUE) 
      // or converted directly as fixed-point values (GL_FALSE) when they are accessed. 
     0,   // Specifies the byte offset between consecutive generic vertex attributes. 
      // If stride is 0, the generic vertex attributes are understood 
      // to be tightly packed in the array. 
     0   // Specifies a pointer to the first component 
      // of the first generic vertex attribute in the array. 
         ); 
    gl.enableVertexAttribArray(vPosition);  

    render(); 
}; 

function render() { 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
}

Quelle

2017-09-11 Michael Drum

Es gibt keine leicht Weise Umrisse vs Unifarben zu haben.

Ihre Optionen sind

Linien zeichnen gl.LINES

Sie benötigen, um Versorgungs verschiedene Ecken oder Indizes zu ändern, je nachdem, was Sie zeichnen möchten verwenden. Zum Beispiel zeichnen Sie oben eine TRIANGLE_STRIP, aber um einen umrissenen Quad zu zeichnen, könnten Sie LINE_LOOP für diesen einen Fall verwenden. Bei komplexeren Formen müssen Sie wahrscheinlich verschiedene Indizes angeben.

Das Problem mit gl.LINES, gl.LINE_LOOP und gl.LINE_STRIP sind WebGL unterstützt nur Linien 1 Pixel breit.
eine Textur machen, die einen Umriss hat, gilt es

Dies ist eine gängige Methode, um Ihre Daten. Sie müssen über textures and texture coordinates lernen.
Machen Sie eine prozedurale Textur

Dies ist das gleiche wie oben, sondern die Textur der Koordinaten eine tatsächliche Textur Sie die Texturkoordinaten in einer Berechnung ziehen eine bestimmte Farbe in der Nähe der Ränder der Textur nur verwenden, verweisen .
Compute ein Umriss in dem Fragment-Shader

Es gibt Methoden Konturen im Shader zu berechnen. Sie verlangen, dass Sie mehr Daten liefern. Here's one
Compute vertices that draw outlines

Dies ist, was die meisten 3D-Bibliotheken (und 2D-Bibliotheken) tun

Quelle

2017-09-12 00:05:28 gman

Wie mache ich diese Dreiecke haben keine Füllung und nur Grenzen?

Antwort

Verwandte Themen