menu.bufferSizeListElement.addEventListener('change', function()
{
settings.fbo = { width: menu.GetBufferSize(), height: menu.GetBufferSize() }
fboList = [ createFBO(gl, [settings.fbo.width, settings.fbo.height]), createFBO(gl, [settings.fbo.width, settings.fbo.height]) ]
glitchShader.resize()
simpleShader.resize()
})
genBlurBuffer(gl, img) {
const { width, height } = this.props;
const shader = createShader(gl,
require('./shader/common.vert'),
require('./shader/blur.frag'));
const texture = createTexture(gl, img);
const vao = createVAO(gl, [{
size: 3,
buffer: createBuffer(gl, [
-1, -1, 0,
1, -1, 0,
-1, 1, 0,
1, 1, 0
])
}]);
let prevFBO = createFBO(gl, [img.width, img.height]);
let currFBO = createFBO(gl, [img.width, img.height]);
for (var i = 0; i < 8; i++) {
var radius = (8 - i);
currFBO.bind()
shader.bind()
shader.uniforms = {
resolution: [width, height],
texResolution: [img.width, img.height],
texture: i === 0 ? texture.bind() : prevFBO.color[0].bind(),
direction: i % 2 === 0 ? [radius, 0] : [0, radius]
}
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
vao.bind();
vao.draw(gl.TRIANGLE_STRIP, 4);
vao.unbind();
var t = currFBO;
currFBO = prevFBO;
prevFBO = t
}
return {
width: img.width,
height: img.height,
origin: texture,
blur: currFBO.color[0],
};
}
genBufferSet(gl) {
const { width, height, particleSize } = this.props;
const range = (width > height) ? width : height;
const scale = this.BASE * this.BASE / range;
const shader = createShader(gl,
require('./shader/buffer.vert'),
require('./shader/buffer.frag'));
shader.attributes.position.location = 0;
const w = Math.ceil(Math.sqrt(particleSize));
const h = Math.ceil(Math.sqrt(particleSize));
const fboA = createFBO(gl, [w, h]);
const fboB = createFBO(gl, [w, h]);
const buffer = createBuffer(gl,[
-1, -1, 0,
1, -1, 0,
-1, 1, 0,
1, 1, 0
]);
const vao = createVAO(gl, [{
size: 3,
buffer
}]);
fboA.bind();
gl.viewport(0, 0, w, h);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
shader.bind();
shader.uniforms = {
resolution: [w, h],
scale,
range
}
vao.bind();
vao.draw(gl.TRIANGLE_STRIP, 4);
vao.unbind();
return {
shader,
buffer,
vao,
fboA,
fboB
}
}
function start(gl, width, height) {
document.body.style.backgroundColor = '#fff'
var info = document.querySelector('.info')
css(info, {
display: 'block',
margin: 10,
padding: 0
})
drawBunny = createBunny(gl)
fbo = createFBO(gl, FRAME_SIZE, { depth: true, stencil: false })
buffer = new Uint8Array(FRAME_SIZE[0]*FRAME_SIZE[1]*4)
batch = SpriteBatch(gl, { capacity: motion.points.length })
shader = createShader(gl, {
texcoord: true,
color: true,
normal: false
})
brushTexture = createTexture(gl, brushImage)
;[brushTexture].forEach(function(t) {
t.minFilter = gl.LINEAR_MIPMAP_LINEAR
t.magFilter = gl.LINEAR
t.generateMipmap()
})
//initially white
clear(gl)
}
GameOfLifeGL.prototype.init = function()
{
this.started = true;
//Turn off depth test
this.gl.disable(this.gl.DEPTH_TEST)
this.updateShader = createShader(this.gl, {
vertex: "attribute vec2 position; varying vec2 uv; void main() { gl_Position = vec4(position,0.0,1.0); uv = 0.5 * (position+1.0); }",
fragment: [
"precision mediump float;",
"uniform sampler2D buffer;",
"uniform vec2 dims;",
"varying vec2 uv;",
"void main() {",
" float n = 0.0;",
" for(int dx=-1; dx<=1; ++dx)",
" for(int dy=-1; dy<=1; ++dy) {",
" n += texture2D(buffer, uv+vec2(dx,dy)/dims).r;",
" }",
" float s = texture2D(buffer, uv).r;",
" gl_FragColor.rgb = vec3(n > 3.0+s || n < 3.0 ? 0.0 : 1.0);",
" gl_FragColor.a = 1.0;",
"}"].join("\n")
});
//Allocate buffers
this.state = [ createFBO(this.gl, [this.bufferSize, this.bufferSize]), createFBO(this.gl, [this.bufferSize, this.bufferSize]) ]
//Initialize this.state buffer
var initial_conditions = ndarray(new Uint8Array(this.bufferSize*this.bufferSize*4), [this.bufferSize, this.bufferSize, 4])
fill(initial_conditions, function(x,y,c) {
if(c === 3) {
return 255
}
return Math.random() > 0.7 ? 255 : 0
})
this.state[0].color[0].setPixels(initial_conditions)
// this.drawShader.attributes.position.location = 0
this.updateShader.attributes.position.location = 0
};
genObstacleSet(gl) {
const { width, height } = this.props;
const shader = createShader(gl,
require('./shader/obstacle.vert'),
require('./shader/obstacle.frag'));
const fboA = createFBO(gl, [width, height]);
const points = [0.0, 0.0];
const buffer = createBuffer(gl, points);
const vao = createVAO(gl, [{
size: 2,
buffer
}]);
fboA.bind();
gl.viewport(0, 0, width, height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
shader.bind();
shader.uniforms = {
resolution: [width, height]
}
vao.bind();
gl.drawArrays(gl.POINTS, 0, points.length / 2);
vao.unbind();
return {
shader,
vao,
buffer,
points,
fboA,
}
}
var createAxes = require('gl-axes')
var createFBO = require('gl-fbo')
var glm = require('gl-matrix')
var createBuffer = require('gl-buffer')
var createVAO = require('gl-vao')
var createShader = require('glslify')
var fs = require('fs')
var now = require('right-now')
var mat4 = glm.mat4
var container = document.getElementById('container')
var canvas = container.appendChild(document.createElement('canvas'))
var readme = fs.readFileSync(__dirname + '/README.md', 'utf8')
var gl = getContext(canvas, render)
var comparison = compare(gl, actual, expected)
var verifyFBO = createFBO(gl, [512,512])
//Draw 3 arrows, format =
// weights
// offset
var buffer = [
1e-6, 1e-6, 1e-6, 1e-6,
1, 1e-6, 1, 1e-6,
1e-6, 1e-6, 1e-6, 1e-6,
1e-6, 1, 1, 1e-6,
1, 1e-6, 1, 1e-6,
1e-6, 1, 1, 1e-6,
1e-6, 1, 0.1, -0.1,
posdata[i++] = Math.random()
posdata[i++] = Math.random()
posdata[i++] = Math.random()
posdata[i++] = 1
}
var speeddata = new Float32Array(SIZE * SIZE * 4)
for (var i = 0; i < speeddata.length;) {
speeddata[i++] = Math.random() * 0.001 - 0.0005
speeddata[i++] = Math.random() * 0.001 - 0.0005
speeddata[i++] = Math.random() * 0.001 - 0.0005
speeddata[i++] = 1
}
var positions = {
prev: createFBO(gl, [SIZE, SIZE], { float: true })
, next: createFBO(gl, [SIZE, SIZE], { float: true })
}
var speeds = {
prev: createFBO(gl, [SIZE, SIZE], { float: true })
, next: createFBO(gl, [SIZE, SIZE], { float: true })
}
positions.prev.color[0].setPixels(ndarray(posdata, [SIZE, SIZE, 4]))
positions.next.color[0].setPixels(ndarray(posdata, [SIZE, SIZE, 4]))
speeds.prev.color[0].setPixels(ndarray(speeddata, [SIZE, SIZE, 4]))
speeds.next.color[0].setPixels(ndarray(speeddata, [SIZE, SIZE, 4]))
var updateSpeed = createShader({
frag: process.env.file_speed_glsl
const canvas = document.body.appendChild(document.createElement('canvas'))
const gl = require('gl-context')(canvas, render)
const display = require('gl-texture2d-display')
const triangle = require('a-big-triangle')
const Texture = require('gl-texture2d')
const Shader = require('gl-shader')
const glBuffer = require('gl-buffer')
const glslify = require('glslify')
const ndarray = require('ndarray')
const FBO = require('gl-fbo')
const VAO = require('gl-vao')
const metaballs = {
curr: FBO(gl, [128, 256], { float: true }),
next: FBO(gl, [128, 256], { float: true }),
draw: FBO(gl, [1, 1])
}
const metaBuffer = VAO(gl, [{
buffer: glBuffer(gl, particleBuffer(128, 256))
, size: 2
}])
const shaders = {
logic: Shader(gl
, glslify('./shaders/particle-step.vert')
, glslify('./shaders/particle-step.frag')
),
render: Shader(gl
, glslify('./shaders/particle-draw.vert')
, glslify('./shaders/particle-draw.frag')
// ************************ Init ************************
// init params:
// reference to gl context
// Image object
// size for comparison framebuffer (2^n, default 256)
function init( glRef, imageRef, size ) {
if (!glRef) { throw new Error("Need a reference to a gl context") }
gl = glRef
var s = parseInt(size)
fboSize = (s && s>=16) ? s : 256
// make texture for target image
if (imageRef) {
refTexture = createTexture(gl, imageRef)
} else {
// if no image was passed in, library is probably being used to paint output
// so skip texture. But future calls to runGeneration will fail.
refTexture = null
}
// gl settings
gl.disable(gl.DEPTH_TEST)
gl.enable(gl.BLEND)
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA )
//Create shaders
camShader = createCameraShader(gl)
flatShader = createFlatShader(gl)
if (refTexture) {
// these use highp precision and may throw errors on devices
// but aren't needed if we're only viewing a projection,
// so we skip their creation if there's no reference image
diffReduceShader = createDiffShader(gl)
avgReduceShader = createAvgShader(gl)
}
// TODO: this should be generalized...
referenceFB = createFBO(gl, [fboSize, fboSize], {color:1} )
referenceFB.drawn = false
scratchFB = createFBO(gl, [fboSize, fboSize], {color:1} )
reducedFBs = []
var reducedSize = fboSize/4
while (reducedSize >= 16) {
var buff = createFBO(gl, [reducedSize, reducedSize], {color:1} )
reducedFBs.push(buff)
reducedSize /= 4
}
if (reducedFBs.length===0) {
throw new Error('Comparison framebuffer is too small - increase "fboSize"')
}
// init polygon data, then vertex arrays and buffers
polys.init(1)
vertBuffer = createBuffer(gl, polys.vertArr)
colBuffer = createBuffer(gl, polys.colArr)
polyBuffersOutdated = false
dataVao = createVAO(gl, [
{ "buffer": vertBuffer, "type": gl.FLOAT, "size": 3 },
{ "buffer": colBuffer, "type": gl.FLOAT, "size": 4 }
])
var squareBuffer = createBuffer(
gl, [-1,-1, -1,1, 1,-1, 1,1, -1,1, 1,-1] )
flatVao = createVAO(gl, [
{ "buffer": squareBuffer, "type": gl.FLOAT, "size": 2 }
])
// draw reference texture into ref framebuffer
if (refTexture) {
drawFlat(refTexture, referenceFB, true)
}
currentScore = defaultScore
initialized = true
}
module.exports = function(canvas) {
canvas.style.position = 'fixed'
var gl = require('gl-context')(canvas, render)
var heightmap = createFBO(gl, [SIZE, SIZE], { float: true })
var gradient = createTex2d(gl, require('./gradient-map'))
var voxels = createMesh()
var projection = mat4.create()
var viewrot = mat4.create()
var view = mat4.create()
var model = mat4.create()
var camera = createCamera(
[0, 10, 30]
, [0, 0, 0]
, [0, 1, 0]
)
var shader = createShader({
frag: './shaders/voxel.frag'
, vert: './shaders/voxel.vert'
})(gl)
var heightShader = createShader({
frag: './shaders/heightmap.frag'
, vert: './shaders/heightmap.vert'
})(gl)
var geom = createGeom(gl)
.attr('aPosition', voxels.positions)
.attr('aCentroid', voxels.centroids)
.attr('aNormal', voxels.normals)
.attr('aEdge', voxels.edges)
camera.distance = 1.5
heightmap.color[0].wrap = gl.CLAMP_TO_EDGE
heightmap.color[0].minFilter = gl.NEAREST
heightmap.color[0].maxFilter = gl.NEAREST
mat4.translate(model, model, [-0.5, 0, -0.5])
window.addEventListener('resize'
, debounce(fit(canvas, window))
, false
)
function render() {
var width = canvas.width
var height = canvas.height
var now = getTime() * TIMESCALE
heightmap.bind()
gl.viewport(0, 0, SIZE, SIZE)
gl.disable(gl.DEPTH_TEST)
gl.disable(gl.CULL_FACE)
heightShader.bind()
heightShader.uniforms.uTime = now
heightShader.uniforms.uResolution = RES
triangle(gl)
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, width, height)
gl.enable(gl.DEPTH_TEST)
gl.enable(gl.CULL_FACE)
clear(gl)
mat4.perspective(projection
, Math.PI / 4
, width / height
, 0.001
, 100
)
quat.identity(camera.rotation)
quat.rotateY(camera.rotation, camera.rotation, now * 0.0002)
quat.rotateX(camera.rotation, camera.rotation, -0.5)
camera.view(view)
quat.identity(camera.rotation)
quat.rotateY(camera.rotation, camera.rotation, now * 0.0002)
geom.bind(shader)
shader.uniforms.uResolution = RES
shader.uniforms.uViewRotation = mat4.fromQuat(viewrot, camera.rotation)
shader.uniforms.uProjection = projection
shader.uniforms.uModel = model
shader.uniforms.uView = view
shader.uniforms.tHeightmap = heightmap.color[0].bind(0)
shader.uniforms.tGradient = gradient.bind(1)
geom.draw()
geom.unbind()
}
}
var scales = [1]
var ratio = (RETINA && window.devicePixelRatio) || 1
if (ratio !== 1) scales.push(ratio)
var scaler = require('canvas-autoscale')(canvas, {
parent: window
, target: [FPS_MIN, FPS_MAX]
, scales: scales
, gap: FPS_GAP
}, render)
//
// Framebuffers
//
var ray = FBO(gl, [256, 256], { color: 1, depth: true })
var fbo = FBO(gl, [256, 256], { color: 1, depth: true })
//
// Assets: LUTs
//
var luts = {
normal: lf(Texture(gl, require('./luts/normal')))
, sunset: lf(Texture(gl, require('./luts/sunset')))
, night: lf(Texture(gl, require('./luts/night')))
, day: lf(Texture(gl, require('./luts/day')))
, day2: lf(Texture(gl, require('./luts/day2')))
}
function lf(tex) {
tex.minFilter = gl.LINEAR
shell.on('gl-init', function ()
{
var gl = shell.gl
// Picture
picture = new data.Picture( gl, 'src/img/image.jpg' )
// Video
video = new data.Video( gl, document.getElementById('video'), menu.GetVideoURL() )
// Glitch
glitchShader = new shader.Glitch(gl, menu.GetFragmentSource())
menu.buttonInteraction.innerHTML = menu.GetShaderInfo()
// Draw Shader
simpleShader = new shader.Simple(gl)
//Allocate buffers
fboList = [ createFBO(gl, [settings.fbo.width, settings.fbo.height]), createFBO(gl, [settings.fbo.width, settings.fbo.height]) ]
//Initialize fboList buffer
fboList[0].color[0].setPixels( color.Black )
// Keyboard
shell.bind('restart', 'R')
shell.bind('nextTick', 'N')
// Menu Video
menu.videoListElement.addEventListener('change', function()
{
video = new data.Video( gl, document.getElementById('video'), menu.GetVideoURL() )
})
// Menu Shader
menu.shaderListElement.addEventListener('change', function()
{
glitchShader.rebuild(menu.GetFragmentSource())
menu.buttonInteraction.innerHTML = menu.GetShaderInfo()
})
menu.bufferSizeListElement.addEventListener('change', function()
{
settings.fbo = { width: menu.GetBufferSize(), height: menu.GetBufferSize() }
fboList = [ createFBO(gl, [settings.fbo.width, settings.fbo.height]), createFBO(gl, [settings.fbo.width, settings.fbo.height]) ]
glitchShader.resize()
simpleShader.resize()
})
// Video Control
menu.videoSlider.addEventListener('click', function (e)
{
})
menu.videoSlider.addEventListener('change', function (e)
{
video.domElement.currentTime = Math.floor(video.domElement.duration * menu.videoSlider.value / 1000)
})
// Clear
menu.buttonClear.addEventListener('click', function (e)
{
shouldClearBuffer = true
})
//
menu.buttonPlay.addEventListener('click', function (e)
{
video.domElement.play()
})
//
menu.buttonPause.addEventListener('click', function (e)
{
video.domElement.pause()
})
//
gl.disable(gl.DEPTH_TEST)
})
function boot(audio) {
document.body.style.background = '#000'
const canvas = document.body.appendChild(document.createElement('canvas'))
const gl = require('gl-context')(canvas, render)
const analyser = require('gl-audio-analyser')(gl, audio, window.context.audio)
const mouse = require('mouse-position')()
const triangle = require('a-big-triangle')
const Shader = require('gl-shader')
const glBuffer = require('gl-buffer')
const glslify = require('glslify')
const Emitter = require('events/')
const FBO = require('gl-fbo')
const VAO = require('gl-vao')
const events = new Emitter
const start = Date.now()
const size = 512
var prev = FBO(gl, [2, 2])
var curr = FBO(gl, [2, 2])
var wavf = FBO(gl, [2, 2])
var width = 100
var height = 100
var x = 0
var y = 0
const wave = VAO(gl, [{
buffer: glBuffer(gl, createWaveData(size))
, size: 1
}])
const shaders = {
wave: Shader(gl
, glslify('./wave.vert')
, glslify('./wave.frag')
),
post: Shader(gl
, glslify('./post.vert')
, glslify('./post.frag')
),
draw: Shader(gl
, glslify('./draw.vert')
, glslify('./draw.frag')
)
}
mouse.on('move', function() {
events.emit('position', x = mouse.x / width, y = mouse.y / height)
})
function render() {
width = gl.drawingBufferWidth
height = gl.drawingBufferHeight
// wavf -> waveform graphic
gl.disable(gl.DEPTH_TEST)
gl.disable(gl.CULL_FACE)
wavf.bind()
wavf.shape = [width, height]
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
gl.viewport(0, 0, width, height)
wave.bind()
shaders.wave.bind()
shaders.wave.uniforms.audio = analyser.bindWaveform(2)
shaders.wave.uniforms.mouse = [x, y]
gl.lineWidth(5)
gl.drawArrays(gl.LINE_STRIP, 0, size)
// curr -> wave + last frame
curr.bind()
curr.shape = [width, height]
gl.viewport(0, 0, width, height)
shaders.post.bind()
shaders.post.uniforms.resolution = [width, height]
shaders.post.uniforms.wavf = wavf.color[0].bind(0)
shaders.post.uniforms.prev = prev.color[0].bind(1)
shaders.post.uniforms.time = (Date.now() - start) / 1000
shaders.post.uniforms.mouse = [x, y]
triangle(gl)
// screen <- curr
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, width, height)
shaders.draw.bind()
shaders.draw.uniforms.resolution = [width, height]
shaders.draw.uniforms.curr = curr.color[0].bind(0)
shaders.draw.uniforms.mouse = [x, y]
triangle(gl)
// prev -> curr
// curr -> prev
var c = prev, p = curr
prev = p
curr = c
}
window.addEventListener('resize'
, require('canvas-fit')(canvas, null, 1.5)
, false
)
return events
}