angle-normals-ts 求三角形法线 画小刺兔

 

原文链接: angle-normals-ts 求三角形法线 画小刺兔

上一篇: 试试光追

画出每个顶点的法线

 

https://observablehq.com/@rreusser/debugging-normals-without-duplicating-geometry-data

 

这个库之前只有js版, 我就先用ts直接复制粘贴了

 

 

基本思想就是对所有三角形的每个顶点求法线, 然后根据三角形的面积来做均值

 

小茶壶也是可以做的, 可以看到比较平坦的面, 点都比较少

 

可以用三角形画一个箭头, 这里就直接用线了, 思路都是一样的, 只不过多算一点座标

import { bunny,teapot } from "gl-model";
import createCamera from "regl-camera-ts";
import angleNormals from "angle-normals-ts";

const normal = angleNormals(model.cells, model.positions);

// 这里为了方便, 画的是在法线的两个距离
  const line: [number, number, number][] = [];
  const size = model.positions.length;
  const elements: [number, number][] = [];
  const s = 0.5;
  for (let i = 0; i < size; i++) {
    const p = model.positions[i];
    const n = normal[i].map((i) => i * s);
    elements.push([line.length, line.length + 1]);
    line.push([p[0] - n[0], p[1] - n[1], p[2] - n[2]]);
    line.push([p[0] + n[0], p[1] + n[1], p[2] + n[2]]);
  }