glslify module to convert cartesian to barycentric coordinates
This example creates a shader over the whole screen and calculates barycentric
coordinates for a triangle described by p0,p1,p2.
The color channel is set to the barycentric coordinates for points inside the triangle.
var glsl = require('glslify')
var regl = require('regl')()
var draw = regl({
frag: glsl`
precision highp float;
#pragma glslify: c2b = require(../)
varying vec2 vpos;
void main () {
vec2 p0 = vec2(-0.5,+0.1);
vec2 p1 = vec2(+0.6,+0.5);
vec2 p2 = vec2(-0.2,-0.3);
vec3 bc = c2b(vpos, p0, p1, p2);
if (max(bc.x,max(bc.y,bc.z)) > 1.0) discard;
if (min(bc.x,min(bc.y,bc.z)) < 0.0) discard;
gl_FragColor = vec4(bc*0.5+0.5,1);
}
`,
vert: `
precision highp float;
attribute vec2 position;
varying vec2 vpos;
void main () {
vpos = position;
gl_Position = vec4(position,0,1);
}
`,
attributes: {
position: [-4,-4,-4,+4,+4,+0]
},
elements: [0,1,2]
})
frame()
window.addEventListener('resize', frame)
function frame () {
regl.poll()
regl.clear({ color: [0,0,0,1], depth: true })
draw()
}#pragma glslify: c2b = require(glsl-cartesian-to-barycentric)
Calculate the barycentric coordinates for a cartesian coordinate p in a
triangle defined by the cartesian coordinates a, b, and c.
To go from barycentric back to cartesian coordinates:
vec2 p = a * bc.x + b * bc.y + c * bc.z;npm install glsl-cartesian-to-barycentric
bsd