我已尝试按照各种来源的说明进行操作，但没有取得任何成功。我对 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 );
}
最佳答案
没有简单的方法来获得轮廓与纯色。
您的选择是
使用
gl.LINES绘制线条您需要根据您想要绘制的内容更改提供不同的顶点或索引。例如，您在上面绘制一个
TRIANGLE_STRIP，但要绘制一个轮廓四边形，您可以在这种情况下使用LINE_LOOP。对于更复杂的形状，您可能需要提供不同的索引。gl.LINES、gl.LINE_LOOP和gl.LINE_STRIP的问题是 WebGL 仅支持 1 像素宽的线条。制作一个具有轮廓的纹理，并将其应用到您的数据
这是一个常用的方法。您需要了解textures and texture coordinates .
制作程序纹理
这与上面相同，但不是使用纹理坐标来引用实际纹理，而是在计算中使用纹理坐标仅在纹理边缘附近绘制某种颜色。
在片段着色器中计算轮廓
有一些方法可以在着色器中计算轮廓。他们要求您提供更多数据。 Here's one
Compute vertices that draw outlines
这就是大多数 3D 库(和 2D 库)所做的
关于javascript - 如何使这些三 Angular 形没有填充而只有边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46165746/