Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created July 3, 2018 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/1a4e8ee47941454337dc5952dbf90180 to your computer and use it in GitHub Desktop.
Save tmcw/1a4e8ee47941454337dc5952dbf90180 to your computer and use it in GitHub Desktop.
var prettier = require("./");
const input = `function initGL(canvas) {
try {
var gl =
canvas.getContext("webgl", {antialias: false, depth: false});
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
var ext = gl.getExtension("OES_texture_float");
} catch(e) {
} finally {
if (!gl) {
console.log("Could not initialise WebGL");
}
return gl;
}
}
function template(str, replacements) {
for(var prop in replacements) {
var val = replacements[prop];
if(typeof val == "number" && String(val).indexOf(".") == -1) {
val = val + ".0";
}
str = str.replace(new RegExp("<%= " + prop + " %>", "g"), val);
}
return str;
}
function getShader(id, templateOptions) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = shaderScript.innerHTML;
str = template(str, templateOptions);
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
return null;
}
return shader;
}
function compileShader(vs, fs, templateOptions) {
var prog = gl.createProgram();
gl.attachShader(prog, getShader(vs, templateOptions));
gl.attachShader(prog, getShader(fs, templateOptions));
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
throw new Error("Could not initialise shaders");
}
return prog;
}
var pointsVertexPositionBuffer;
var quadVertexPositionBuffer;
function initBuffers() {
//
pointsVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointsVertexPositionBuffer);
var vertices = [];
var N = points_size;
for(var x = 0; x < N; x++) {
for(var y = 0; y < N; y++) {
vertices.push(x / N, y / N);
}
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
pointsVertexPositionBuffer.itemSize = 2;
pointsVertexPositionBuffer.numItems = N * N;
gl.vertexAttribPointer(prog_points.vertexPositionAttribute, pointsVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
//
quadVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexPositionBuffer);
var squareData = new Float32Array([
-1, -1,
1, -1,
-1, 1,
1, 1
]);
quadVertexPositionBuffer.itemSize = 2;
quadVertexPositionBuffer.numItems = 4;
gl.bufferData(gl.ARRAY_BUFFER, squareData, gl.STATIC_DRAW);
gl.vertexAttribPointer(prog_comp.vertexPositionAttribute, quadVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
}
var prog_points, prog_comp, prog_comp_col, prog_show, prog_show_raw;
function initShaders() {
//
prog_points = compileShader("shader-points-vs", "shader-points-fs");
prog_points.vertexPositionAttribute = gl.getAttribLocation(prog_points, "aVertexPosition");
gl.enableVertexAttribArray(prog_points.vertexPositionAttribute);
prog_points.color = gl.getUniformLocation(prog_points, "color");
prog_points.uTexSamp_Points = gl.getUniformLocation(prog_points, "uTexSamp_Points");
prog_points.uTexSamp_Colors = gl.getUniformLocation(prog_points, "uTexSamp_Colors");
//
prog_comp = compileShader("shader-direct-vs", "shader-comp-fs", {RESOLUTION: points_size});
prog_comp.vertexPositionAttribute = gl.getAttribLocation(prog_comp, "aVertexPosition");
gl.enableVertexAttribArray(prog_comp.vertexPositionAttribute);
prog_comp.uTexSamp = gl.getUniformLocation(prog_comp, "uTexSamp");
prog_comp.seed = gl.getUniformLocation(prog_comp, "seed");
//
prog_comp_col = compileShader("shader-direct-vs", "shader-comp-col-fs", {RESOLUTION: points_size});
prog_comp_col.vertexPositionAttribute = gl.getAttribLocation(prog_comp_col, "aVertexPosition");
gl.enableVertexAttribArray(prog_comp_col.vertexPositionAttribute);
prog_comp_col.uTexSamp = gl.getUniformLocation(prog_comp_col, "uTexSamp");
prog_comp_col.seed = gl.getUniformLocation(prog_comp_col, "seed");
//
prog_show = compileShader("shader-direct-vs", "shader-show-fs", {RESOLUTION: canvas.width});
prog_show.uTexSamp = gl.getUniformLocation(prog_show, "uTexSamp");
prog_show.frames = gl.getUniformLocation(prog_show, "frames");
prog_show.brightness = gl.getUniformLocation(prog_show, "brightness");
//
prog_show_raw = compileShader("shader-direct-vs", "shader-show-raw-fs", {RESOLUTION: canvas.width});
prog_show_raw.uTexSamp = gl.getUniformLocation(prog_show_raw, "uTexSamp");
}
var texture0, texture1, _texture0, _texture1, texture2;
function initTextures() {
//
texture0 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture0);
var pixels = [], tSize = points_size;
for(var i = 0; i < tSize; i++) {
for(var j = 0; j < tSize; j++) {
pixels.push(
-1 + 2 * Math.random(),
-1 + 2 * Math.random(),
0,
0
);
}
}
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0, gl.RGBA, gl.FLOAT, new Float32Array(pixels));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// TODO: You heard of functions yeah? I heard they're pretty good. Start using them below.
texture1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
//
_texture0 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, _texture0);
pixels = [];
for(var i = 0; i < tSize; i++) {
for(var j = 0; j < tSize; j++) {
pixels.push(
-1 + 2 * Math.random(),
-1 + 2 * Math.random(),
-1 + 2 * Math.random(),
0
);
}
}
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0, gl.RGBA, gl.FLOAT, new Float32Array(pixels));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
//
_texture1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, _texture1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
//
texture2 = gl.createTexture();
gl.activeTexture(gl.TEXTURE2);
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, grid_size, grid_size, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
}
var FBO0, FBO1, _FBO0, _FBO1, FBO2;
function initFBOs() {
FBO0 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture0, 0);
//
FBO1 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO1);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
//
_FBO0 = gl.createFramebuffer(); // TODO: Replace texture0/FBO0 with better names
gl.bindFramebuffer(gl.FRAMEBUFFER, _FBO0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, _texture0, 0);
//
_FBO1 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, _FBO1);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, _texture1, 0);
//
FBO2 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO2);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture2, 0);
}
var flag = true;
function iterateIFS() {
gl.viewport(0, 0, points_size, points_size);
gl.disable(gl.BLEND);
gl.activeTexture(gl.TEXTURE0);
var seed = Math.random();
// P = fi(P)
gl.useProgram(prog_comp);
gl.uniform1f(prog_comp.seed, seed);
gl.uniform1i(prog_comp.uTexSamp, 0);
if(flag) {
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO1);
gl.bindTexture(gl.TEXTURE_2D, texture0);
} else {
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
}
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexPositionBuffer);
gl.vertexAttribPointer(prog_comp.vertexPositionAttribute, quadVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, quadVertexPositionBuffer.numItems);
// C += Ci
gl.useProgram(prog_comp_col);
gl.uniform1f(prog_comp_col.seed, seed);
gl.uniform1i(prog_comp_col.uTexSamp, 0);
if(flag) {
gl.bindFramebuffer(gl.FRAMEBUFFER, _FBO1);
gl.bindTexture(gl.TEXTURE_2D, _texture0);
} else {
gl.bindFramebuffer(gl.FRAMEBUFFER, _FBO0);
gl.bindTexture(gl.TEXTURE_2D, _texture1);
}
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexPositionBuffer);
gl.vertexAttribPointer(prog_comp_col.vertexPositionAttribute, quadVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, quadVertexPositionBuffer.numItems);
flag = !flag;
}
function plotHistogram() {
// Plot points into "histogram"
gl.viewport(0, 0, grid_size, grid_size);
gl.useProgram(prog_points);
gl.uniform1i(prog_points.uTexSamp_Points, 0);
gl.uniform1i(prog_points.uTexSamp_Colors, 1);
if(flag) {
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, _texture1);
} else {
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture0);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, _texture0);
}
gl.bindBuffer(gl.ARRAY_BUFFER, pointsVertexPositionBuffer);
gl.vertexAttribPointer(prog_points.vertexPositionAttribute, pointsVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE);
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO2);
gl.drawArrays(gl.POINTS, 0, pointsVertexPositionBuffer.numItems);
gl.disable(gl.BLEND);
}
function displayFlame() {
gl.disable(gl.BLEND);
gl.viewport(0, 0, canvas_size, canvas_size);
gl.useProgram(prog_show);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.uniform1i(prog_show.uTexSamp, 0);
gl.uniform1f(prog_show.frames, frames);
gl.uniform1f(prog_show.brightness, brightness.value);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexPositionBuffer);
gl.vertexAttribPointer(prog_comp.vertexPositionAttribute, quadVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, quadVertexPositionBuffer.numItems);
}
var gl;
var canvas_size = 1024;
var grid_size = 1024;
var points_size = 512;
function main() {
canvas.width = canvas_size;
canvas.height = canvas_size;
gl = initGL(canvas);
initShaders();
initBuffers();
initTextures();
initFBOs();
}
main();`;
const offset = input.length - 10;
console.log("start");
console.time("formatWithCursor");
prettier.formatWithCursor(input, {
filepath: "./testcase.js",
cursorOffset: offset
});
console.timeEnd("formatWithCursor");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment