如何使这些三角形没有填充，只有边框？

Question

我尝试按照各种来源的说明进行操作，但没有取得任何成功。我对 WebGL 和 OpenGL 很陌生。我得到了这段代码，并且从那以后一直在进行调整。如果有人愿意分享任何资源，以便我可以回答我自己的问题，我将不胜感激！

这是我的 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>

这是我的 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 );
}

Answer 1

没有“简单”的方法来获得轮廓与纯色。您的选择是

gl.LINES
```
 画线
```
您需要根据您想要绘制的内容更改提供不同的顶点或索引。例如，您正在上面绘制一个
TRIANGLE_STRIP
，但要绘制一个轮廓四边形，您可以在这种情况下使用
```
LINE_LOOP
```
。对于更复杂的形状，您可能需要提供不同的索引。
gl.LINES
、
```
gl.LINE_LOOP
```
和
```
gl.LINE_STRIP
```
的问题是WebGL仅支持1像素宽的线条。
这是常用的方法。您需要了解
纹理和纹理坐标
。
这与上面相同，但不是使用纹理坐标来引用实际纹理，而是在计算中使用纹理坐标，仅在纹理边缘附近绘制某种颜色。
有一些方法可以在着色器中计算轮廓。他们要求您提供更多数据。
这是一个
计算绘制轮廓的顶点
这是大多数 3D 库（和 2D 库）所做的事情

Answer 2

glPolygonMode(GL_FRONT_AND_BACK,GL_LINE)

每一帧，就在

glClear

之后

如何使这些三角形没有填充，只有边框？

问题描述投票：0回答：2

2个回答

最新问题

如何使这些三角形没有填充，只有边框？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2