文章/答案/技术大牛

发布

问在圆圈中间改变颜色
EN

Stack Overflow用户

提问于 2014-09-22 04:45:21

回答 1查看 1.1K关注 0票数 1

我是WebGL的新手，我试图在这个绿色的圆圈中间创建一个黑色的环，而不需要额外的圆圈。我相信我能做到这一点，使这些三角形的正常走向相反，但我不知道具体如何做到这一点。我的朋友建议改变纹理坐标，但我真的不明白这有什么用。有人能为这些想法和可能的直觉发光吗？

_______HTML File__________

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

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

javascript

html

canvas

webgl

shader

回答 1

Stack Overflow用户

发布于 2014-09-25 17:01:30

我按照你的要求安排了你的任务的一部分。我尽量不更改您的代码，所以您可以理解我所做的所有更改。第一次小演出：

使用您的代码的三角形
由三点组成的圆

你用100点(顶点)做圆圈。现在你想在里面做另一个形状。这意味着再使用100分，这可能是你不想做的。而不是这个，你想要使用法线。但从着色器(负责绘图)的角度来看，法线、顶点和纹理坐标等其他东西都只是数据，而你才是决定数据是否意味着顶点、法线、纹理坐标或其他任何东西的人。

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

有几个问题你将不得不面对的纹理..。

首先，如果圆圈太大(接近你)，那么它就不会那么好，只有100分。
如果圆圈太小(离你很远)，但是会有很多圆圈，那么你就会白白地使用太多的点，这会降低性能。
如果你使用纹理内的黑色环，它将是模糊的，如果你将接近。
如果你对很多小圆圈使用太大的纹理，它会再次降低性能。

..。法线用于做像这样的光反射。

我思考这个问题的方式。你可以定义只有几个平行线，半径和中心的圆。使用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);

Ok现在着色器.

有几件事你真的需要知道才能继续，所以请在这里阅读：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曲线就是一个很好的例子，它可以帮助你用几个点做疯狂的尖锐形状。但这一切都很重要你想做什么。一种技术不能解决所有的问题，你必须不断寻找更多的解决方案。

编辑1:“变量中间= vec2(0.0，0.0)是什么？

在这个问题中还有另外三个脚本，我在我的解决方案中复制了这些脚本(左侧是jsfiddle：External )。这不是这个问题的一部分，但很容易找到它们的来源：

<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的一部分，因此您需要一些库(您不需要它，但它非常有用)。我用玻璃基质。

另一方面，在着色器中，向量和矩阵是原生的。在4.1基本类型章节中自己找到它。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25966841

复制

相似问题

问在圆圈中间改变颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在圆圈中间改变颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在圆圈中间改变颜色
EN