I have an Icosahedron "position" and "index" array and want to view its edges after applying Barycentric Coordinate effect to it. I have inserted the position and the indexes but something is still missing.
Problem 1: It is supposed to show all the triangles of the mesh stroked, but it misses some edges and combines with adjacent triangle.
Problem 2: If you un-comment the line //aBary = position; in the vertex shader, it just shows flat colors on the geometry whereas it was supposed to show rgb interpolation like the attached image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, minimal-ui, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<title>OGL • Template</title>
<style>
:root {
overflow: hidden;
height: 100%;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="module">
import {
Renderer,
Camera,
Transform,
Geometry,
Program,
Mesh,
Orbit,
Vec4
} from "https://unpkg.com/ogl";
const vertex = `
attribute vec3 position;
attribute vec3 points;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec3 aBary;
void main() {
aBary = points;
//aBary = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}
`;
const fragment = `
varying vec3 aBary;
void main() {
float width = 2.;
vec3 d = fwidth(aBary);
vec3 s = smoothstep(d * (width + .5), d * (width - .5), aBary);
gl_FragColor = vec4(vec3(s), 1.0);
}
`;
const vertex100 =
/* glsl */ `
` + vertex;
const fragment100 =
/* glsl */ `#extension GL_OES_standard_derivatives : enable
precision highp float;
` + fragment;
const vertex300 =
/* glsl */ `#version 300 es
#define attribute in
#define varying out
` + vertex;
const fragment300 =
/* glsl */ `#version 300 es
precision highp float;
#define varying in
#define texture2D texture
#define gl_FragColor FragColor
out vec4 FragColor;
` + fragment;
const renderer = new Renderer({ dpr: 2 });
const gl = renderer.gl;
document.body.appendChild(gl.canvas);
gl.clearColor(0.1, 0.1, 0.1, 1);
const camera = new Camera(gl, { fov: 75 });
camera.position.set(0, 0, 3);
camera.lookAt([0, 0, 0]);
const controls = new Orbit(camera);
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
}
window.addEventListener("resize", resize, false);
resize();
const scene = new Transform();
const program = new Program(gl, {
vertex: renderer.isWebgl2 ? vertex300 : vertex100,
fragment: renderer.isWebgl2 ? fragment300 : fragment100,
cullFace: null
});
// Iconsahedron from THREE.js
const t = (1 + Math.sqrt(5)) / 2;
let ico = {
position: [
- 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t, 0,
0, - 1, t, 0, 1, t, 0, - 1, - t, 0, 1, - t,
t, 0, - 1, t, 0, 1, - t, 0, - 1, - t, 0, 1
],
index: [
0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11,
1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8,
3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9,
4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1
]
};
let data = new Float32Array(36);
for (let i = 0; i < 36; i+=12) {
data.set([ 0,0,1, 0,1,0, 1,0,0 ], i )
}
let geometry = new Geometry(gl,
{
position: {size: 3, data: new Float32Array(ico.position)},
index: { data: new Uint16Array(ico.index)},
points: {size: 3, data: data}
}
);
let mesh = new Mesh(gl, { geometry, program });
mesh.position.set(0, 0, 0);
mesh.setParent(scene);
requestAnimationFrame(update);
function update(t) {
renderer.render({ scene, camera });
controls.update();
requestAnimationFrame(update);
}
</script>
</body>
</html>