Fatal编程技术网
  • javascript/
  • Javascript 在圆圈中间改变颜色 我是新的WebGL，我试图在这个绿色圆圈中间创造一个黑色的圆环而不做额外的圆圈。我相信我可以通过使这些三角形的法线向另一个方向移动来做到这一点，但我不确定具体怎么做。我的朋友建议更改纹理坐标，但我真的不明白这会有什么帮助。有人能对这些想法和可能的直觉有所启发吗

Javascript 在圆圈中间改变颜色 我是新的WebGL，我试图在这个绿色圆圈中间创造一个黑色的圆环而不做额外的圆圈。我相信我可以通过使这些三角形的法线向另一个方向移动来做到这一点，但我不确定具体怎么做。我的朋友建议更改纹理坐标，但我真的不明白这会有什么帮助。有人能对这些想法和可能的直觉有所启发吗

javascript html canvas webgl

Javascript 在圆圈中间改变颜色 我是新的WebGL，我试图在这个绿色圆圈中间创造一个黑色的圆环而不做额外的圆圈。我相信我可以通过使这些三角形的法线向另一个方向移动来做到这一点，但我不确定具体怎么做。我的朋友建议更改纹理坐标，但我真的不明白这会有什么帮助。有人能对这些想法和可能的直觉有所启发吗,javascript,html,canvas,webgl,shader,Javascript,Html,Canvas,Webgl,Shader,_______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-shade

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


属性向量4位置；
无效的
main（）
{
gl_位置=V位置；
}
精密中泵浮子；
无效的
main（）
{
gl_FragColor=vec4（0.0,1.0,0.0,1.0）；
}
哎呀。。。您的浏览器不支持HTML5画布元素
_____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 );
}

var-gl；
var点；
window.onload=函数init（）
{
var canvas=document.getElementById（“gl画布”）；
gl=WebGLUtils.setupWebGL（画布）；
如果（！gl）{alert（“WebGL不可用”）；}
//顶点
var-pi=3.14159；
var x=2*pi/100；
变量y=2*pi/100；
var r=0.9；
点=[vec2（0.0，0.0）]；//建立原点
//用于循环到推送点
对于（变量i=0；i<100；i++）{
push（vec2（r*Math.cos（x*i），r*Math.sin（y*i））；
点推（vec2（r*Math.cos（x*（i+1）），r*Math.sin（y*（i+1））；
}
//
//配置WebGL
//
总图视口（0，0，canvas.width，canvas.height）；
gl.clearColor（0.3,0.3,0.3,1.0）；
//加载着色器并初始化属性缓冲区
var program=initShaders（gl，“顶点着色器”、“片段着色器”）；
gl.useProgram（程序）；
//将数据加载到GPU中
var bufferId=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，bufferId）；
gl.bufferData（gl.ARRAY\u BUFFER、展平（点）、gl.STATIC\u DRAW）；
//将着色器变量与数据缓冲区相关联
var vPosition=gl.GetAttriblLocation（程序，“vPosition”）；
gl.VertexAttribute指针（vPosition，2，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（vPosition）；
render（）；
};
函数render（）{
总账清除（总账颜色\缓冲\位）；
gl.绘图阵列（gl.TRIANGLE\u FAN，0，points.length）；
}
我按照你的要求完成了你的部分任务。我尽量不改变你的代码太多，所以你可以理解我所做的所有改变。第一场小型演出：

您使用100个点（顶点）创建了一个圆。现在你想在里面做另一个形状。这意味着再使用100分，这可能是你不想做的。与此相反，您希望使用法线。但从着色器（负责绘制）的角度来看，法线、顶点和其他东西（如纹理坐标）都只是数据，而你是决定数据是指顶点、法线、纹理坐标还是其他任何东西的人

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

有几个问题，你将不得不面对与纹理

  • 首先，若圆太大（离你们太近），那个么只有100点就没那个么好了
  • 若圆太小（离你们很远），但会有很多圆，你们会徒劳地使用太多的点，这会降低性能
  • 若你们在黑环内部使用纹理，若你们更靠近它，它会变得模糊
  • 如果对许多小圆圈使用过大的纹理，则会再次降低性能
。。。和法线是用来做的

我对这个问题的看法。您可以仅使用几个参数、半径和中心来定义圆。使用webgl，您只能绘制三角形（和点）。但您可以自定义着色器以在每个三角形中绘制内接圆

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

var r = 0.9;
var middle = vec2(0.0, 0.0);
然后我围绕圆生成3个三角形点（圆是这个新三角形的内接圆）：

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

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);
现在确定着色器。

要继续，您真正需要知道的事情很少，因此请在此处阅读：

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

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

float-inside=pow（pos.r-middle.r，2.0）+pow（pos.g-middle.g，2.0）；
如果（内部<功率（r，2.0））{
gl_FragColor=vec4（0.0,1.0,0.0,1.0）；
}否则{
gl_FragColor=vec4（0.0,0.0,0.0,0.0）；
}
结束

现在你可能知道如何从几个点开始画一个圆。你们可以用类似的方法在里面画一个环。然后你可以在任何距离上画上数千个，让它们移动。程序将仍然快速，形状将尽可能清晰

最后一件事。通常你不会像那样简化形状，但有时你可能会。一个很好的例子是，它可以帮助你用很少的点做疯狂的尖锐形状。但你想做什么都很重要。一种技术不能解决所有问题，你必须不断寻找更多的解决方案

编辑1:“什么是var middle=vec2（0.0，0.0）？我是说，vec2？”

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

<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>
js是一些提供基本数学的javascript。。。或者像向量和m这样的代数结构 
<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>