改变圆圈中间的颜色答案

【问题标题】：Change color in middle of circle改变圆圈中间的颜色
【发布时间】：2015-08-04 15:29:28
【问题描述】：

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

【问题讨论】：

Three.js WebGL Draw a circle custom fill and border color from shader 的可能重复项

标签： javascript html canvas webgl shader

【解决方案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;

我的片段着色器只需要做一件事，就是决定像素是否在圆圈中。简单方程：

如果左侧比右侧小，则像素在圆圈内。如果不是，那么它在外面，所以看不见：

    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)？我是，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 章节中自行查找。

【讨论】：

什么是 var middle = vec2(0.0, 0.0)？我是，vec2？