给定一个凸多边形作为一组边(在这种情况下，在从[[—1，1]，[—1，1]的平面上，如下所示:
edges = [
[[-0.8, 0],[-0.3,0.6]],
[[-0.3,0.6],[0,0.8]],
[[0,0.8],[0.7,0.6]],
[[0.7,0.6],[0.6,-0.9]],
[[0.6,-0.9],[-0.8,0]]
]
我怎样才能根据每一个斑点离最近的边缘有多远来给内部区域涂上 colored颜色 ？我想达到一个效果，如以下搅拌器文档:https://docs.blender.org/manual/en/latest/render/shader_nodes/textures/voronoi.html(在"距离边缘"下)
我真的不知道如何实现这种不规则的梯度.我最有希望的 idea 是将内部区域切成几块，然后用线性梯度填充，但到目前为止我还没有运气.
我也试着从blender查找相应的源代码，但这也没有真正帮助我:https://projects.blender.org/blender/blender/src/branch/main/source/blender/gpu/shaders/material/gpu_shader_material_tex_voronoi.glsl
我的两个多边形渲染，在2d环境和webgl环境下看起来像这样.
edges = [
[[-0.8, 0],[-0.3,0.6]],
[[-0.3,0.6],[0,0.8]],
[[0,0.8],[0.7,0.6]],
[[0.7,0.6],[0.6,-0.9]],
[[0.6,-0.9],[-0.8,0]]
]
const canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#fff';
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
edges.forEach(edge => {
let x = (canvas.width * 0.5) + ( edge[0][0] * 0.5 * canvas.width);
let y = (canvas.height * 0.5) - ( edge[0][1] * 0.5 * canvas.height);
console.log("Move to " + x + ", " + y)
ctx.moveTo(x, y);
x = (canvas.width * 0.5) + ( edge[1][0] * 0.5 * canvas.width);
y = (canvas.height * 0.5) - ( edge[1][1] * 0.5 * canvas.height);
console.log("Line to " + x + ", " + y)
ctx.lineTo(x,y);
});
ctx.closePath();
ctx.stroke();<canvas width="640" height="360"></canvas>edges = [
[[-0.8, 0],[-0.3,0.6]],
[[-0.3,0.6],[0,0.8]],
[[0,0.8],[0.7,0.6]],
[[0.7,0.6],[0.6,-0.9]],
[[0.6,-0.9],[-0.8,0]]
]
vertices = [];
edges.forEach(edge => {
vertices.push(edge[0][0], edge[0][1], 0.);
vertices.push(edge[1][0], edge[1][1], 0.);
});
//
// start here
//
const canvas = document.querySelector("canvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
alert(
"Unable to initialize WebGL. Your browser or machine may not support it.",
);
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
// Create an empty buffer object
var vertex_buffer = gl.createBuffer();
// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/*=================== Shaders ====================*/
// Vertex shader source code
var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'}';
// Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
// Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
// Compile the vertex shader
gl.compileShader(vertShader);
// Fragment shader source code
var fragCode =
'void main(void) {' +
'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
'}';
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragmentt shader
gl.compileShader(fragShader);
// Create a shader program object to store
// the combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both the programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
/*======= Associating shaders to buffer objects ======*/
// Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
// Point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
// Enable the attribute
gl.enableVertexAttribArray(coord);
/*============ Drawing the triangle =============*/
// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 1);
// Enable the depth test
gl.enable(gl.DEPTH_TEST);
// Clear the color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
// Draw the triangle
gl.drawArrays(gl.LINES, 0, 10);<canvas width="640" height="360"></canvas>
