textured primitive sphere

sphere.js

const createContext = require('pex-context')
const createSphere = require('primitive-sphere')
const mat4 = require('pex-math/mat4')
const createCamera = require('pex-cam/perspective')
const createOrbiter = require('pex-cam/orbiter')
const load = require('pex-io/load')
const vec3 = require('pex-math/vec3')

const W = window.innerWidth
const H = window.innerHeight
const ctx = createContext({ width: W, height: H })
const g = createSphere()

g.positions.forEach((p, i) => {
  // vec3.scale(p, 1 + Math.random() * 0.2)
})

const camera = createCamera({
  position: [0, 0, 3],
  target: [0, 0, 0],
  up: [0, 1, 0],
  fov: Math.PI / 3,
  near: 0.1,
  far: 100,
  aspect: W / H
})

const orbiter = createOrbiter({ camera: camera, element: ctx.gl.canvas })

const clearCmd = {
  pass: ctx.pass({
    clearColor: [0, 0, 0, 1],
    clearDepth: 1
  })
}

const drawCmd = {
  pass: ctx.pass({
    clearColor: [0.2, 0.2, 0.2, 1],
    clearDepth: 1
  }),
  pipeline: ctx.pipeline({
    depthTest: true,
    vert: `
      attribute vec3 aPosition;
      attribute vec3 aNormal;
      attribute vec2 aTexCoord;
      uniform mat4 uProjectionMatrix;
      uniform mat4 uViewMatrix;
      varying vec3 vNormal;
      varying vec2 vTexCoord;
      void main () {
        gl_Position = uProjectionMatrix * uViewMatrix * vec4(aPosition, 1.0);
        vNormal = aNormal;
        vTexCoord = aTexCoord;
      }
    `,
    frag: `
      #ifdef GL_ES
      precision mediump float;
      #endif
      varying vec3 vNormal;
      varying vec2 vTexCoord;
      uniform sampler2D uTexture;
      void main () {
        gl_FragColor.a = 1.0;
        gl_FragColor = texture2D(uTexture, vTexCoord);
        gl_FragColor.rgb += vec3(vTexCoord, 1.0) / 2.0;
      }
    `
  }),
  attributes: {
    aPosition: ctx.vertexBuffer(g.positions),
    aNormal: ctx.vertexBuffer(g.normals),
    aTexCoord: ctx.vertexBuffer(g.uvs)
  },
  indices: ctx.indexBuffer(g.cells),
  uniforms: {
    uProjectionMatrix: camera.projectionMatrix,
    uViewMatrix: camera.viewMatrix
  }
}

load({
  img: { image: 'world.200411.3x5400x2700.jpg' }
}, (err, res) => { 
  console.log(err, res)
  var tex = ctx.texture2D({
    data: res.img,
    flipY: true
  })
  ctx.frame(() => {
    ctx.submit(clearCmd)
    ctx.submit(drawCmd, {
      uniforms: {
        uTexture: tex
      }
    })
  })
})