gl-vao

index.js

var createTala = require('./')
var shell = require('gl-now')()
var createShader = require('gl-shader')
var createBuffer = require('gl-buffer')
var fs = require('fs')

var createSimpleShader = require('simple-2d-shader')

var tile2d = require('./lib/tile2d')

var createVAO = require('gl-vao')
var createTileMap = require('gl-tile-map')
var terrain = require('isabella-texture-pack')
var ndarray = require('ndarray')

var shader, buffer, triangles = [], vao, vert_len

var w = window.innerWidth, h = window.innerHeight
var tileSize = 16.0
var grid = [Math.ceil(w / tileSize), Math.ceil(h / tileSize)]

function drawrect(x, y, w, h, tid) {
  tid = tid || 1
  return [
    x, y, tid,
    x + w, y, tid,
    x, y + h, tid,
    x, y + h, tid,
    x + w, y, tid,
    x + w, y + h, tid,
  ]
}

shell.on('gl-init', function() {
  var gl = shell.gl
  shader = createShader(gl, fs.readFileSync('./shaders/tala.vsh'), fs.readFileSync('./shaders/tala.fsh'))
  shader.attributes.attrib0.location = 0

  //Load texture map
  var tiles = ndarray(terrain.data,
    [16,16,terrain.shape[0]>>4,terrain.shape[1]>>4,4],
    [terrain.stride[0]*16, terrain.stride[1]*16, terrain.stride[0], terrain.stride[1], terrain.stride[2]], 0)
  texture = createTileMap(gl, tiles, true)
  texture.mipSamples = 1
  texture.magFilter = gl.NEAREST
  texture.minFilter = gl.NEAREST

  var map = ndarray(new Uint8Array(w * h * 4), [w, h, 4], [4 * w, 4, 1], 0)
  for (var i = 0; i < 999; i++) {
    var x = Math.floor(Math.random() * w)|0
    var y = Math.floor(Math.random() * h)|0
    map.set(x, y, 0, 255)
    map.set(x, y, 1, 0)
    map.set(x, y, 2, 0)
    map.set(x, y, 3, 255)
  }

  var pad = 1
  var data = []
  for (var x = 0; x < grid[0]; x++) {
    for (var y = 0; y < grid[1]; y++) {
      data = data.concat(drawrect(x * (tileSize + pad), y * (tileSize + pad), tileSize, tileSize, 1))
    }
  }

  vert_len = Math.floor(data.length / 6) * 2
  buffer = createBuffer(gl, data)
  vao = createVAO(gl, null, [{'buffer': buffer, 'size': 3}])
})

shell.on('gl-render', function(t) {
  var gl = shell.gl
  shader.bind()
  shader.uniforms.res = [w, h]
  shader.uniforms.tileMap = texture.bind()
  shader.uniforms.tileSize = tileSize

  vao.bind()
  gl.drawArrays(gl.TRIANGLES, 0, vert_len)
  vao.unbind()
})

shell.on('gl-error', function(e) {
  throw new Error('WebGL not supported :(')
})

tala.fsh

precision highp float;

uniform float tileSize;
uniform sampler2D tileMap;

//varying vec3 fragColor;
varying vec2  tileCoord;
varying vec2  texCoord;

void main() {
  vec2 uv      = texCoord;
  vec4 color   = vec4(0,0,0,0);
  float weight = 0.0;

  vec2 tileOffset = 2.0 * tileSize * tileCoord;
  float denom     = 2.0 * tileSize * 16.0;

  /*for(int dx=0; dx<2; ++dx) {
    //for(int dy=0; dy<2; ++dy) {
      vec2 offset = 2.0 * fract(0.5 * (uv + vec2(dx)));
      float w = pow(1.0 - max(abs(offset.x-1.0), abs(offset.y-1.0)), 16.0);
      
      vec2 tc = (tileOffset + tileSize * offset) / denom;
      color  += w * texture2D(tileMap, tc);
      weight += w;
    //}
  }
  color /= weight;*/


  //vec2 spriteOffset = floor(tileCoord * 256.0) * tileSize;
  //vec2 spriteCoord = mod(pxCoord, tileSize);
  //vec2 tc = mod(texCoord, tileSize) + floor(tileCoord * 256.0) * 16.0;
  //tc *= vec2(1, -1);

  vec2 tc = tileCoord * 16.0;
  //tc *= vec2(1, -1);
  color = texture2D(tileMap, tc);



  //vec2 tc = fract(texCoord) * vec2(2.0);
  //tc.x *= 1.8;
  //tc = tc * vec2(1, -1);
  //color = texture2D(tileMap, texCoord);

  //vec2 tpos =  mod(texCoord, vec2(256.0)) / vec2(256.0);
  //tpos = tpos * vec2(1, -1);

  //vec2 tc = (tileOffset + tileSize * offset) / denom;
  //color = texture2D(tileMap, tc);
  //color = texture2D(tileMap, tileCoord + fract(texCoord) * vec2(256.0));

  //color = texture2D(tileMap, texCoord);
  //color = texture2D(tileMap, tileOffset + mod(texCoord, denom) * vec2(128.0/256.0));

  
  // transparency
  if (color.w < 0.5) {
    discard;
  }

  gl_FragColor = color;

  //gl_FragColor = vec4(fragColor, 1.0);
}

tala.vsh

attribute vec3 attrib0;

uniform vec2 res;

//varying vec3 color;
varying vec2  tileCoord;
varying vec2  texCoord;

void main() {
  vec2 pos = ((attrib0.xy / res) * 2.0) - 1.0;
  pos = pos * vec2(1, -1);

  //Compute texture coordinate
  //texCoord = (pos / res) * vec2(512, 512);
  //texCoord = vec2(0.5,-0.5) * (pos + 1.0);

  //Compute tile coordinate
  float tx    = attrib0.z / 16.0;
  tileCoord.x = floor(tx);
  tileCoord.y = fract(tx) * 16.0;
  
  gl_Position = vec4(pos, 0, 1.0);
  //texCoord = attrib0.xy / res;
  texCoord = pos;
}