Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色 [英] Three.js WebGL Draw a circle custom fill and border color from shader

问题描述

我将 Three.js 与 WebGLRenderer 一起使用.我正在尝试找出或查看如何使用 CircleGeometry 绘制圆圈的示例，并能够从顶点或片段着色器控制它们的填充和边框颜色.这甚至可能不使用纹理图像吗?抱歉，如果这真的很简单，我仍在尝试围绕 Three.js 和 WebGL 进行思考，因此感谢您提供任何帮助.

I'm using Three.js with the WebGLRenderer. I'm trying to figure out or see an example for how to draw circles using CircleGeometry and be able to control their fill and border color from a vertex or fragment shader. Is this even possible without using an image for the texture? Sorry if this is really simple, I'm still trying to wrap my head around Three.js and WebGL so any help is appreciated.

推荐答案

• 圆的几何表示不完美，因为圆度取决于构成该圆的顶点数，并且很难更改参数.

  • Geometry presentation of the circle is imprefect because roundness depends on the number of vertices that make up that circle and it's quite difficult to change parameters.

    纹理呈现在放大和缩小时显然有限制.

    Texture presentation has limitation when zooming in and out, obviously.

    最佳选择:着色器.创建方形表面并为其编写片段着色器以生成圆形图像.这很容易修改，因为在片段着色器中，您只需检查片段与圆心的距离，并且您可以轻松更改颜色和笔触参数.此外，您只有 4 个顶点，如果您有许多类似圆形的对象，这真的很低而且很棒.

    The best choice: shader. Create square surface and write fragment shader for it that will generate the circle image. That's easy to modify because in fragment shader you're only checking fragment's distance from center of the circle and you can easily change colors and stroke params. Also, you have only 4 vertices, which is really low and great if you have many circle-like objects.

    希望这会有所帮助.

    uniform vec3 innerCol;
    uniform vec3 strokeCol;
    uniform float radius;
    uniform float stroke;
    
    varying vec2 vUV;
    
    void main() {
        float border = (radius - stroke/2.)/(stroke/2.+radius);
        float d = distance(vUV, vec2(.5, .5));
    
        if(d<=border) gl_FragColor = vec4(innerCol, 1.);
        else if(d>border && d<1.) gl_FragColor = vec4(strokeCol, 1.);
        else discard;
    }
    

    这是片段着色器，我不确定它是否 100% 正确，但您应该从中了解要点并看看发生了什么.

    This is fragment shader, I am not sure if it's 100% correct but you should get the point from it and see what's going on.

    这篇关于Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！