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]]);
  }