在由半径定义的圆盘内寻找点

Question

我遇到了一个着色器，我试图了解一个点在由半径定义的圆盘中的什么位置。

这个功能 DiskPoint 是如何工作的？

float HASHVALUE = 0.0f;
vec2 RandomHashValue()
{
    return fract(sin(vec2(HASHVALUE += 0.1, HASHVALUE += 0.1)) * vec2(43758.5453123, 22578.1459123));
}

vec2 DiskPoint(in float radius, in float x1, in float x2)
{
    float P = radius * sqrt(1.0f - x1);
    float theta = x2 * 2.0 * PI;
    return vec2(P * cos(theta), P * sin(theta));
}

void main()
{
    HASHVALUE = (uvCoords.x * uvCoords.y) * 64.0;
    HASHVALUE += fract(time) * 64.0f;

    for (int i = 0; i < samples; ++i)
    {
        vec2 hash = RandomHashValue();
        vec2 disk = DiskPoint(sampleRadius, hash.x, hash.y);
        //....
    }

}

Answer 1

我是这样看的：

vec2 DiskPoint(in float radius, in float x1, in float x2)
    {
    // x1,x2 are "uniform randoms" in range <0,+1>
    float P = radius * sqrt(1.0f - x1); // this will scale x1 into P with range <0,radius> but change the distribution to uniform number of points inside disc
    float theta = x2 * 2.0 * PI; // this will scale x2 to theta in range <0,6.28>
    return vec2(P * cos(theta), P * sin(theta)); // and this just use the above as polar coordinates with parametric circle equation ...
    // returning "random" point inside disc with uniform density ...
    }

但我只是猜测并没有测试所以请记住这一点

Answer 2

根据@Spektre 的建议，我在 Canvas.

上绘制了此函数的结果

代码如下所示：

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        
        
        class vec2{
            constructor(x, y){
                this.x = x;
                this.y = y;
            }
        }
        
        function DiskPoint(radius, x1, x2){
            var p = radius * Math.sqrt(1.0 - x1);
            var theta = x2 * 2.0 * 3.14;
            return new vec2(p * Math.cos(theta), p * Math.sin(theta));
        }
        
        
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(100, 100, 1, 1);
        
        for(var i = 0; i < 100; i++){
            for(var j = 0; j < 100; j++){
                var point = DiskPoint(0.5, i/100, j/100);
                ctx.fillRect(point.x * 100 + 100, point.y * 100 + 100, 1, 1);
                console.log(point.x, point.y);
            }
        }

这是创建的模式：

看起来它在给定半径的圆中为每个 (x1,x2) 找到一个点。

希望对您有所帮助！

在由半径定义的圆盘内寻找点

Finding point inside disk defined by a radius

shader

glsl

sampling

fragment-shader