Question

我是WebGL的新手，我试图在这个绿色圆圈的中间创建一个黑色圆环而不另外制作圆圈。我相信我可以通过使这些三角形的法线走向另一种方式来做到这一点，但我不确定如何做到这一点。我的朋友建议改变纹理坐标，但我真的不明白这会有什么帮助。任何人都可以对这些想法和可能的直觉有所启发吗？

_______ HTML文件__________

<!DOCTYPE html>
<html>
<head>

<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;

void
main()
{
    gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

void
main()
{
    gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
}
</script>

<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="Circle.js"></script>
</head>

<body>
<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 );
    if ( !gl ) { alert( "WebGL isn't available" ); }


    // The Vertices
    var pi = 3.14159;
    var x = 2*pi/100;
    var y = 2*pi/100;
    var r = 0.9;

    points = [ vec2(0.0, 0.0) ]; //establish origin 

    //for loop to push points
    for(var i = 0; i < 100; i++){
        points.push(vec2(r*Math.cos(x*i), r*Math.sin(y*i)));
        points.push(vec2(r*Math.cos(x*(i+1)), r*Math.sin(y*(i+1))));
    }

    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 0.3, 0.3, 0.3, 1.0 );

    //  Load shaders and initialize attribute buffers

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

    // Load the data into the GPU

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

    // Associate out shader variables with our data buffer

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    render();
};


function render() {
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays( gl.TRIANGLE_FAN, 0, points.length );
}

Answer 1

我根据您的要求收集了部分任务。我试图不改变你的代码，所以你可以理解我所做的所有改变。第一个小秀：

你用100个点（顶点）做圆圈。现在你想在里面做另一个形状。这意味着使用另外100分，这可能是你不想做的。而不是这个，你想使用法线。但是从着色器（负责绘制）的角度来看，法线，顶点和纹理坐标之类的其他东西只是数据，如果数据意味着顶点，法线，纹理坐标或其他任何东西，那么你就是决定它的人。

如果我理解得很好，您需要自定义对象而不添加太多额外数据。我不认为法线或纹理可以帮助你。

纹理面临的问题很少......

首先，如果圆圈太大（靠近你），那么只有100分就不会那么好。
如果圆圈太小（远离你），但会有很多圈子，你会使用太多的积分来降低性能。
如果你在里面使用黑色环的纹理，如果你会更近，它将是模糊的。
如果你对很多小圆圈使用太大的纹理，它会再次降低性能。

...和法线用于light reflection like this。

方式我想到了这个问题。您可以使用几个参数，半径和中心来定义圆。使用webgl，您只能绘制三角形（和点）。但您可以自定义着色器以在每个三角形中绘制内切圆。

所以我只定义了半径和中心：

var r = 0.9;
var middle = vec2(0.0, 0.0);

然后我在圆圈周围生成3个三角形点（圆圈是这个新三角形的内切圆圈）：

function buildCircle(center, r) {
    var points = [];

    points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(0 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(0 * DEG_TO_RAD)) + center[1]));
    points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(120 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(120 * DEG_TO_RAD) + center[1])));
    points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(240 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(240 * DEG_TO_RAD)) + center[1]));

    vertexPositions = points;
}

然后我将中间，半径和三角形传递给我的着色器：

var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

program.middle = gl.getUniformLocation(program, "middle");
gl.uniform2f(program.middle, middle[0], middle[1]);

program.r = gl.getUniformLocation(program, "r");
gl.uniform1f(program.r, r);

然后我只是像你一样渲染它，除了我需要允许alpha绘图，因为三角形的某些部分是不可见的，所以它看起来像圆圈：

gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);

现在好了。

您需要了解的事情很少，所以请在此处阅读：http://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

我的顶点着色器与你的相同，除了我需要将插值顶点位置传递给片段着色器：

varying vec4 pos;

... 

void main() {
    pos = vPosition;

我的片段着色器只需要做一件事就是决定像素是否在圆圈中。简单等式： enter image description here

如果左侧小于右侧，则像素位于圆圈内。如果没有，那么它就在外面，所以看不见：

    float inside = pow(pos.r - middle.r, 2.0) + pow(pos.g - middle.g, 2.0);
    if (inside < pow(r, 2.0)) {
        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
    } else {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
    }

<强>结束

所以现在你可能知道如何从几个点开圆。你可以用类似的方法在里面画一个戒指。然后你可以在任何距离绘制成千上万的它们并让它们移动。程序仍然很快，形状将尽可能清晰。

最后一件事。通常你不会简化这样的形状，但有时你可能会。好的例子是Bézier curve，它可以帮助你用几点做疯狂的尖锐形状。但这一切都很重要你想做什么。一种技术无法解决所有问题，您必须继续寻找更多解决方案。

编辑1： “什么是var middle = vec2（0.0,0.0）？我是meam，vec2？”

我在我的解决方案中复制了此问题中的其他3个脚本（在左侧的jsfiddle中：外部资源）。它不是这个问题的一部分，但很容易找到它们的起源：

<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>

MV.js是一些带有基本数学的供应javascript或者像向量和矩阵这样的代数结构。 vec2是返回长度为2的数组的函数。因此var middle = [0.0, 0.0];完全相同。这不是本机javascript的一部分，所以你需要一些库（你不需要它，但它非常有用）。我使用glmatrix。

另一方面，在着色器中，向量和矩阵是原生的。请在第4.1 Basic Types章中自行查找。

改变圆圈中间的颜色

1 个答案: