A 3d fire shader

fire3d.js

var fragmentShader = `
#define PI 3.1415926535897932384626433832795
uniform float u_time;
uniform vec2 u_res;

float range01(float num) {
    return .5 + .5 * sin(num);
}

float getRed(vec2 xy) {
    return .3 * range01(xy.x - u_time);
}
float getGreen(vec2 xy) {
    return .2 * range01(xy.x + u_time);
}
float getBlue(vec2 xy) {
    return .6 * range01(xy.y - -u_time);
}

float plasma(vec2 xy) {
    return sin(20. * (xy.x * sin(u_time / 2.)
                   + xy.y * cos(u_time / 3.))
               + u_time);
}

void main() {
  float red = sin(plasma(xy) * PI);
  float green = cos(plasma(xy) * PI);
  float blue = tan(plasma(xy) * PI);
	fragColor = vec4(red, green, blue, 1.0);
}
`;
var vertexShader = `
void main() {

}
`;

var Shader = function(el) {
	this.el = el;
	this.ctx = el.getContext('experimental-webgl');
	this.height = el.height;
	this.width = el.width;
	this.midY = this.height / 2;
	this.midX = this.width / 2;

	this.ctx.viewportHeight = this.height;
	this.ctx.viewportWidth = this.width;

	this.initShaders();
	this.initBuffer();

	this.time = 0;
	this.ctx.clearColor(0.1, 0.1, 0.1, 1.0);

	this.tick();
};

Shader.prototype = {
	flamePoints: Array(200),

	tick: function() { with(this) {
		draw();
		time += 0.01;
		if (time > 10 * Math.PI) time -= 10 * Math.PI;

		window.requestAnimationFrame(tick.bind(this));
	} },

	draw: function() { with(this) {

	} },



	// = = = = = =   Init stuff   = = = = = = //

	// push the vertex positions to the graphics card
	initBuffer: function() { with(this) {
		this.vertexPositionBuffer = ctx.createBuffer();
		ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexPositionBuffer);
		vertices = [
			 1.0,  1.0,
			-1.0,  1.0,
			 1.0, -1.0,
			-1.0, -1.0
		];
		ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(vertices), ctx.STATIC_DRAW);
	} },

	initShader: function(code, type) { with(this) {
		var shader = ctx.createShader(type);
		ctx.shaderSource(shader, code);
		ctx.compileShader(shader);

		return shader;
	} },

	initShaders: function() { with(this) {
		this.fragmentShader = initShader(fragmentShader, ctx.FRAGMENT_SHADER);
		this.vertexShader = initShader(vertexShader, ctx.VERTEX_SHADER);

		this.shaders = ctx.createProgram();
		ctx.attachShader(shaders, fragmentShader);
		ctx.attachShader(shaders, vertexShader);
		ctx.linkProgram(shaders);
		ctx.useProgram(shaders);

		shaders.vertexPositionAttribute = ctx.getAttribLocation(shaders, 'aPos');
		ctx.enableVertexAttribArray(shaders.vertexPositionAttribute);

		shaders.timeUniform = ctx.getUniformLocation(shaders, 'uTime');
	} },



	// = = = = = =   Draw stuff   = = = = = = //
	flame_draw: function() { with(this) {
		ctx.beginPath();
		ctx.moveTo(midX, midY);
		ctx.lineTo(midX + (-200 + i * 2) * Math.random(), Math.random() * midY - 20);
		ctx.strokeStyle = this.randColor();
		ctx.stroke();
	} },

	flame_init: function() { with(this) {
		for (var i = 0; i < 200; i++) {

		}
	} },

	randColor: function() {
		return 'rgba('
			+ Math.floor(Math.random() * 255) + ','
			+ Math.floor(Math.random() * 40) + ','
			+ Math.floor(Math.random() * 100) + ', 0.'
			+ Math.floor(Math.random() * 10) + ')'
	}
};

$(function() {
	new Shader(document.getElementsByTagName('canvas')[0]);
});