How to use normals - 10 common examples

// Update options:
  // 1) direct update buffer
  // bunnyPositionBuffer.bufferData(positionData)
  //
  // 2) direct update via ctx
  // ctx.update(bunnyPositionBuffer, { data: positionData })
  //
  // 3) update command
  // const updateCommand = ctx.update({ target: bunnyPositionBuffer, data: positionData })
  // ctx.submit(updatePositions)

  // FIXME: pre-allocate buffer
  // FIXME: add update command
  // What are the update patterns in other APIs?
  const normalData = normals.vertexNormals(bunny.cells, bunnyNoiseVertices)
  // bunnyNormalBuffer.bufferData(normalData)
  ctx.update(bunnyNormalBuffer, { data: normalData })
}

precision mediump float;
      #pragma glslify: matcap = require('./matcap.glsl')
      varying vec3 n, peye;
      uniform sampler2D texture;
      void main () {
        // This could be done in the vertex shader to optimize slightly:
        vec2 uv = matcap(peye, n);

        gl_FragColor = vec4(texture2D(texture, uv).rgb, 1);
      }
    `),
    cull: {enable: true, face: 'back'},
    uniforms: {texture: texture},
    attributes: {
      position: require('geom-center-and-normalize')(mesh.positions),
      normal: require('normals').vertexNormals(mesh.cells, mesh.positions)
    },
    elements: mesh.cells,
    count: mesh.cells.length * 3
  })
}

rock.noiseScale*p[1],
                rock.noiseScale*p[2] );


        positions[i][0] += noise;
        positions[i][1] += noise;
        positions[i][2] += noise;


        positions[i][0] *= rock.scale[0];
        positions[i][1] *= rock.scale[1];
        positions[i][2] *= rock.scale[2];
    }

    // of course, we must recompute the normals.
    var normals = createNormals.vertexNormals(cells, positions);


    rock.positions = positions;
    rock.normals = normals;
    rock.cells = cells;
    
    return rock;

}

function createBunnyMesh (scene) {
  // Create the bunny mesh, which is a collection of a geometry and material.

  // Set up a lit material with the lambert reflectance model
  var material =
  Engine.LitMaterial({
    color: [0.5, 0.5, 0.5] // Ambient color
  })
    .use(Engine.LambertAugment, {
      diffuse: [1, 1, 1]
    })

  // Our bunny model didn't come with normals, so add them here
  Bunny.normals = Normals.vertexNormals(Bunny.cells, Bunny.positions)

  // Feed the bunny 	"simplicial complex" into a gl-engine geometry
  var geometry = Engine.Geometry(Bunny)
  var mesh = Engine.Mesh(geometry, material)

  mesh.position[1] = -5

  scene.add(mesh)

  return mesh
}

function createBunnyMesh (scene) {
  // Create the bunny mesh, which is a collection of a geometry and material.

  // Set up a lit material with the lambert reflectance model
  var material =
  Engine.LitMaterial({
    // color: [0.5, 0.5, 0.5] // Ambient color
  })
    .use(Engine.LambertAugment, {
      diffuse: [1, 1, 1]
    })

  // Our bunny model didn't come with normals, so add them here
  Bunny.normals = Normals.vertexNormals(Bunny.cells, Bunny.positions)

  // Feed the bunny 	"simplicial complex" into a gl-engine geometry
  var geometry = Engine.Geometry(Bunny)
  var mesh = Engine.Mesh(geometry, material)

  mesh.position[1] = -5

  scene.add(mesh)

  return mesh
}

function createBunnyMesh (scene) {
  // Create the bunny mesh, which is a collection of a geometry and material.

  // Set up a lit material with the lambert reflectance model
  var material =
  Engine.LitMaterial({
    color: [0.5, 0.5, 0.5] // Ambient color
  })
    .use(Engine.LambertAugment, {
      diffuse: [1, 1, 1]
    })

  // Our bunny model didn't come with normals, so add them here
  Bunny.normals = Normals.vertexNormals(Bunny.cells, Bunny.positions)

  // Feed the bunny "simplicial complex" into a gl-engine geometry
  var geometry = Engine.Geometry(Bunny)

  geometry.data.cells = WireframeCells(Bunny.cells)
  material.mode = 'LINES'
  var mesh = Engine.Mesh(geometry, material)

  mesh.position[1] = -5

  scene.add(mesh)

  return mesh
}

function createBunnyMeshes (scene, count) {
  // Create the bunny mesh, which is a collection of a geometry and material.

  // Set up a lit material with the lambert reflectance model
  var material =
  Engine.LitMaterial()
    .use(Engine.LambertAugment, {
      diffuse: [1, 1, 1]
    })

  // Our bunny model didn't come with normals, so add them here
  Bunny.normals = Normals.vertexNormals(Bunny.cells, Bunny.positions)

  // Feed the bunny 	"simplicial complex" into a gl-engine geometry
  var geometry = Engine.Geometry(Bunny)

  var meshes = []
  for (var i = 0; i < count; i++) {
    var mesh = Engine.Mesh(geometry, material)
    mesh.position[0] = Math.random() * 3
    mesh.position[1] = -5
    mesh.position[2] = -10 * i + 10
    mesh.euler[1] = Math.random() * Math.PI * 2
    scene.add(mesh)
    meshes.push(mesh)
  }

  return meshes

var model = mat4.create();
    mat4.translate(model, model, [0, 0, 200]);
    var bunnyPositions = geoTransform(bunny.positions, model);



    bunnyGeom.attr('aPosition', bunnyPositions)
    bunnyGeom.attr('aNormal', normals.vertexNormals(bunny.cells, bunnyPositions))
    bunnyGeom.faces(bunny.cells)

    // sun sphere
    sunSphere = createSphere(1, {segments: 30});
    sunSphere = Geometry(gl)
        .attr('aPosition', sunSphere.positions)
        .attr('aNormal', normals.vertexNormals(sunSphere.cells, sunSphere.positions))
        .faces(sunSphere.cells)


    // we combine lots of different boxes into an entire mesh.
    // this is more efficient, since we can render all the boxes in a single drawcall.
    var mesh = {positions: [], cells: []};
    for (var i = -15; i < 19; i += 2) {
        mesh = addBox(mesh, [1, 200, 3], [20, 0, i * 2])
    }
    for (var i = -15; i < 20; i += 5) {
        mesh = addBox(mesh, [1, 3, 200], [20, i * 2, 0])
    }
    for (var i = -10; i < 5; i += 2) {
        mesh = addBox(mesh, [1, 200, 3], [20, 0, 70 + i * 1.5])
    }
    for (var i = -15; i < 17; i += 1) {

function init() {
  gl = shell.gl

  camera = createCamera(shell)
  camera.distance = 120

  center(dragon.positions)

  var normals = norm.vertexNormals(
      dragon.cells
    , dragon.positions
  )

  var index = createBuffer(gl
    , pack(dragon.cells, 'uint16')
    , gl.ELEMENT_ARRAY_BUFFER
  )

  mesh = createVAO(gl, [{
      size: 3
    , buffer: createBuffer(gl, pack(dragon.positions))
  }, {
      size: 3
    , buffer: createBuffer(gl, pack(normals))
  }], index)

var canvas = document.body.appendChild(document.createElement('canvas'))
var camera = orbit(canvas)
var gl = context(canvas, render)

window.addEventListener('resize', fit(canvas), false)
camera.lookAt([3, 3, 4], [0, 0, 0], [1, 0, 0])

var points = [[-1, -1], [1, -1], [1, 1], [-1, 1]]

var complex = extrude(points, {top: 1, bottom: -1, closed: true})

var geometry = Geometry(gl)

var flattened = unindex(complex.positions, complex.cells)
complex = reindex(flattened)
complex.normals = normals.vertexNormals(complex.cells, complex.positions)
geometry.attr('position', complex.positions)
geometry.attr('normal', complex.normals)
geometry.faces(complex.cells)

var shader = Shader(gl,
  glslify('./shaders/example.vert'),
  glslify('./shaders/example.frag')
)

var projection = mat4.create()
var view = mat4.create()

function render () {
  var width = gl.drawingBufferWidth
  var height = gl.drawingBufferHeight