https://twitter.com/erkaman2/status/825451132990455808

cone_tracing_vis.js

/*
The MIT License (MIT)

Copyright (c) 2016 Eric Arnebäck

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  

  */

const regl = require('regl')()
const camera = require('regl-camera')(regl, {
  center: [0, 0.0, 0],
  phi: 0.5
})
var vec3 = require('gl-vec3');

// Rodrigues' rotation formula
// v is vector to be rotated
// k is axis of rotation
// theta is rotation in radians
function rodrigues(v, k, theta) {
  var cosTheta = Math.cos(theta)
  var sinTheta = Math.sin(theta)

  var a = [0,0,0]
  vec3.scale(a, v, cosTheta)

  var kCrossV = [0,0,0]
  vec3.cross(kCrossV, k, v)
  var b = [0,0,0]
  vec3.scale(b, kCrossV, sinTheta)

  var kDotV = vec3.dot(k, v)
  var c = [0,0,0]
  vec3.scale(c, k,  kDotV * (1.0 - cosTheta))

  // now return a+b+c
  var sum = [0,0,0]
  vec3.add(sum, sum, a)
  vec3.add(sum, sum, b)
  vec3.add(sum, sum, c)

  return sum
}

/*
  Make cone mesh.
  Cone top is at (0,0,0).

  The direction of the cone is params.dir. This is the vector from the cone top to the base center vertex.

  params.height is cone height.
  params.diskRadius is base radius.
*/
function makeCone(params) {

  var v = params.dir
  vec3.normalize(v, v) // normalize for good measure.
  var height = params.height // cone height
  var diskRadius = params.diskRadius // cone base radius
  var N = 60;

  // center of cone base.
  var diskCenter = [v[0] * height, v[1] * height, v[2] * height]

  // vector perpendicular to v.
  var vn = [0.0, 0.0, 0.0]

  // compute vector that is normal to v.
  // we can obtain this normal by taking the cross product by any vector
  // that is not v. And this vector 'crossVec' looks good and random ^_^
  var crossVec = [-0.331042, 0.579324, -0.744845];
  vec3.cross(vn, v, crossVec)
  vec3.normalize(vn, vn)

  // use this vector to generate base vertices.
  var iv = [0,0,0]
  vec3.scaleAndAdd(iv, iv, vn, diskRadius)

  cone = {}
  cone.positions = []
  cone.positions.push(diskCenter) // cone base center vertex.
  cone.positions.push([0,0,0]) // cone top vertex

  // generate base vertices:
  for(var i = 0; i < N; i++) {
    vert = rodrigues(iv, v, (2.0 * Math.PI )*(i / N))
    vec3.add(vert, vert, diskCenter)

    // to make sure that the vertices of the cone base and the vertices of the sides
    // don't share the same vertices, we duplicate the base vertices.
    // because then the normals will be correctly computed later.
    cone.positions.push(vert)
    cone.positions.push(vert)
  }

  var CI = 0; // Cone base center Index.
  var OI = 1 // Cone top index

  cone.cells = []
  // now generate faces.
  for(var i = 0; i < N; i++) {

    var i1 = (i+1)*2
    var i2 = (i+2)*2

    if(i2 > (2*N+1) ) {
      i2 = 2
    }

    // add base face.
    cone.cells.push([CI, i1, i2])

    var j1 = (i+1)*2 + 1
    var j2 = (i+2)*2 +1

    if(j2 > (2*N+1) ) {
      j2 = 3
    }

    // add side face.
    cone.cells.push([ j2, j1, OI   ])
  }

  // finally, compute normals.
  cone.normals = require('angle-normals')(cone.cells, cone.positions)

  return cone
}

var r = 1.15
var h = 2.0
var h2 = h+0.35

cones = [
  makeCone({diskRadius: r, height: h, dir: [0.0,1.0,0.0]}),
  makeCone({diskRadius: r, height: h, dir: [0.0,0.5,0.866025]}),
  makeCone({diskRadius: r, height: h, dir: [0.823639, 0.5, 0.267617]}),
  makeCone({diskRadius: r, height: h, dir: [0.509037, 0.5, -0.700629]}),
  makeCone({diskRadius: r, height: h, dir: [-0.509037, 0.5, -0.700629]}),
  makeCone({diskRadius: r, height: h, dir: [-0.823639, 0.5, 0.267617]}),
]

// transparent sphere.
sphere = require('primitive-sphere')(h2, {segments: 16 })

// global context
const global = regl({
  cull: {
    enable: true,
    face: 'back'
  }
})

const drawMesh = regl({
  frag: `
  precision mediump float;
  varying vec3 vnormal;
  varying vec3 vposition;

  uniform vec3 eye;

  void main () {

    vec3 n = vnormal;
    vec3 l = normalize(normalize(eye)); // the eye is basically the light source.
    vec3 albedo = vec3(0.2, 0.4, 0.6);

    gl_FragColor = vec4(
      albedo * vec3(0.4) +
      clamp(dot(n, l), 0.0, 1.0) * albedo
      , 1.0);
  }`,
  vert: `
  precision mediump float;
  uniform mat4 projection, view;

  attribute vec3 position, normal;
  varying vec3 vnormal;
  varying vec3 vposition;

  void main () {
    vnormal = normal;
    vposition = position;

    gl_Position = projection * view * vec4(position, 1.0);
  }`,
  attributes: {
    position: regl.prop('position'),
    normal: regl.prop('normal')
  },
  elements: regl.prop('cells')
})

const drawSphere = regl({
  frag: `
  precision mediump float;
  varying vec3 vposition;

  void main () {
    // we draw a hemisphere by cutting of the negative half in the fragment shader.
    // Pretty neat ^_^
    if(vposition.y<0.0) {
      discard;
    }

    gl_FragColor = vec4(0.0, 0.7, 0.3 , 0.3);
  }`,
  vert: `
  precision mediump float;
  uniform mat4 projection, view;

  attribute vec3 position;
  varying vec3 vposition;

  void main () {
    vposition = position;
    gl_Position = projection * view * vec4(position, 1.0);
  }`,
  attributes: { position: sphere.positions },
  elements: sphere.cells,
  blend: {
    enable: true,
    func: {
      srcRGB: 'src alpha',
      srcAlpha: 1,
      dstRGB: 'one minus src alpha',
      dstAlpha: 1
    },
    equation: {
      rgb: 'add',
      alpha: 'add'
    },
    color: [0, 0, 0, 0]
  }
})

regl.frame(() => {
  regl.clear({
    color: [0.0, 0.0, 0.0, 1]
  })
  camera(() => {
    global( () => {
      // draw cones.
      for(var i = 0; i < cones.length; i++) {
        var mesh = cones[i]
        drawMesh({position: mesh.positions, normal: mesh.normals, cells: mesh.cells })
      }
      // draw transparent sphere.
      drawSphere()
    })
  })
})