implicits-with-regl.js

const SHAPE = [128, 128, 128]

const regl = require('regl')()
const surfaceNets = require('surface-nets')
const setupCamera = require('regl-camera')(regl, {
  distance: 1000,
  center: [
    SHAPE[0] / 2,
    SHAPE[1] / 2,
    SHAPE[2] / 2
  ]
})
const computeNormals = require('angle-normals')
const ndarray = require('ndarray')

const N = SHAPE[0] * SHAPE[1] * SHAPE[2]

const data = ndarray(
  new Float32Array(N),
  SHAPE)

const p = 8

function f (x, y, z) {
  return Math.pow(
    Math.pow(x, p) +
    Math.pow(y, p) +
    Math.pow(z, p), 1. / p) - 0.125
}

for (let i = 0; i < SHAPE[0]; ++i) {
  for (let j = 0; j < SHAPE[1]; ++j) {
    for (let k = 0; k < SHAPE[2]; ++k) {
      const x = i / SHAPE[0] - 0.5
      const y = j / SHAPE[1] - 0.5
      const z = k / SHAPE[2] - 0.5
      data.set(i, j, k, f(x, y, z))
    }
  }
}

const surfaceMesh = surfaceNets(data)

const drawSurface = regl({
  frag: `
  precision highp float;
  varying vec3 color;
  void main () {
    gl_FragColor = vec4(color, 1);
  }
  `,

  vert: `
  precision highp float;
  attribute vec3 position, normal;
  uniform mat4 projection, view;
  varying vec3 color;
  void main () {
    color = 0.5 * (normal + 1.);
    gl_Position = projection * view * vec4(position, 1);
  }
  `,

  attributes: {
    position: surfaceMesh.positions,
    normal: computeNormals(surfaceMesh.cells, surfaceMesh.positions)
  },

  elements: surfaceMesh.cells
})

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  })

  setupCamera(() => {
    drawSurface()
  })
})