GPGPUでパーティクル

<script src="js/lib/minMatrixb.js"></script>
<script src="js/script.js" type="module"></script>

//===============================================================
// GLSL
//===============================================================
//頂点座標の初期位置を格納するシェーダ
const vertexShader =`
	attribute vec3 position;

	void main(void){
		gl_Position = vec4(position,1.0);
	}
`;
const fragmentShader =`
	precision mediump float;

	//フレームバッファの解像度
	uniform vec2 resolution;

	void main(void){

		//頂点座標の初期位置を設定
		vec2 p = (gl_FragCoord.xy / resolution) * 2.0 - 1.0;

		gl_FragColor = vec4(p,0.0,1.0);
	}
`;

//頂点座標をレンダリングするシェーダ
const pointVs =`
	attribute float index;
	uniform vec2 resolution;
	uniform sampler2D texture;
	uniform float pointScale;

	void main(void){

		//参照すべきテクスチャ座標を算出
		vec2 p = vec2(mod(index,resolution.x) / resolution.x, floor(index/resolution.x)/resolution.y);

		//テクスチャの設定
		vec4 t = texture2D(texture,p);

		//ポイントサイズの設定
		gl_PointSize = 0.1 + pointScale;

		//テクスチャのxyが頂点座標
		gl_Position = vec4(t.xy,0.0,1.0);
	}
`;
const pointFs =`
	precision mediump float;

	uniform vec4 ambient;

	void main(void){
		gl_FragColor = ambient;
	}
`;

//テクスチャを参照し頂点座標を更新するシェーダ
const velocityVs =`
	attribute vec3 position;

	void main(void){
		gl_Position = vec4(position,1.0);
	}
`;
const velocityFs =`
	precision mediump float;

	uniform vec2 resolution;
	uniform sampler2D texture;
	uniform vec2 mouse;
	uniform bool mouseFlag;
	uniform float velocity;
	const float SPEED = 0.05;

	void main(void){
		//テクスチャ座標を計算
		vec2 p = gl_FragCoord.xy / resolution;

		//前のフレームの頂点座標の読み込み
		vec4 t = texture2D(texture,p);

		//カーソル位置へのベクトル
		vec2 v = normalize(mouse - t.xy) * 0.1;

		//向きを補正
		vec2 w = normalize(v + t.zw);

		//テクスチャから読み込んだ値は、xyが頂点座標、zwが進行方向ベクトル
		vec4 destColor = vec4(t.xy + w * SPEED * velocity,w);

		if(!mouseFlag){

			//前のフレームの進行方向を維持
			destColor.zw = t.zw;
		}
		gl_FragColor = destColor;
	}
`;

//===============================================================
// Init & Redering
//===============================================================
window.addEventListener('load',function(){
	init();
  	rendering();
});

let canvas,gl;
let prg,attLocation,attStride,uniLocation;
let pPrg,pAttLocation,pAttStride,pUniLocation;
let vPrg,vAttLocation,vAttStride,vUniLocation;
let position,vVBOList,planeVBOList;
let vertices,resolution,ambient;
let backBuffer,frontBuffer,flip;
let velocity = 0.0;
let mouseFlag = false;
let mousePositionX = 0.0;
let mousePositionY = 0.0;
let count = 0;

//テクスチャの幅と高さ
const TEXTURE_WIDTH = 1024;
const TEXTURE_HEIGHT = 1024;

function init(){
	canvas = document.getElementById('webgl-canvas');
	canvas.width = Math.min(window.innerWidth,window.innerHeight);
	canvas.height = canvas.width;

	gl = canvas.getContext('webgl');

	//頂点テクスチャフェッチが利用可能か確認
	const vtf = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
	if(vtf > 0){
		//console.log('max vertex texture image unit:' + vtf);
	}else{
		console.log('VTF not supported');
		return;
	}

	//浮動小数点数テクスチャが利用可能か確認
	const ext = gl.getExtension('OES_texture_float') || gl.getExtension('OES_texture_half_float');
	if(ext == null){
		console.log('float texture not supported');
		return;
	}

	//頂点座標の初期位置を格納するシェーダ
	const vShader = createShader(gl.VERTEX_SHADER,vertexShader);
	const fShader = createShader(gl.FRAGMENT_SHADER,fragmentShader);
	prg = createProgram(vShader,fShader);

	attLocation = [];
	attLocation[0] = gl.getAttribLocation(prg,'position');
	attStride = [];
	attStride[0] = 3;

	uniLocation = [];
	uniLocation[0] = gl.getUniformLocation(prg,'resolution');

	//頂点座標をレンダリングするシェーダ
	const vShader2 = createShader(gl.VERTEX_SHADER,pointVs);
	const fShader2 = createShader(gl.FRAGMENT_SHADER,pointFs);
	pPrg = createProgram(vShader2,fShader2);

	pAttLocation = [];
	pAttLocation[0] = gl.getAttribLocation(pPrg,'index');
	pAttStride = [];
	pAttStride[0] = 1;

	pUniLocation = [];
	pUniLocation[0] = gl.getUniformLocation(pPrg,'resolution');
	pUniLocation[1] = gl.getUniformLocation(pPrg,'texture');
	pUniLocation[2] = gl.getUniformLocation(pPrg,'pointScale');
	pUniLocation[3] = gl.getUniformLocation(pPrg,'ambient');

	//テクスチャを参照し頂点座標を更新するシェーダ
	const vShader3 = createShader(gl.VERTEX_SHADER,velocityVs);
	const fShader3 = createShader(gl.FRAGMENT_SHADER,velocityFs);
	vPrg = createProgram(vShader3,fShader3);

	vAttLocation = [];
	vAttLocation[0] = gl.getAttribLocation(vPrg,'position');
	vAttStride = [];
	vAttStride[0] = 3;

	vUniLocation = [];
	vUniLocation[0] = gl.getUniformLocation(vPrg,'resolution');
	vUniLocation[1] = gl.getUniformLocation(vPrg,'texture');
	vUniLocation[2] = gl.getUniformLocation(vPrg,'mouse');
	vUniLocation[3] = gl.getUniformLocation(vPrg,'mouseFlag');
	vUniLocation[4] = gl.getUniformLocation(vPrg,'velocity');

	//テクスチャの幅と高さ
	resolution = [TEXTURE_WIDTH,TEXTURE_HEIGHT];

	//頂点配列
	vertices = Array(TEXTURE_WIDTH * TEXTURE_HEIGHT);

	//頂点のインデックスを連番で設定
	for(let i = 0, j = vertices.length; i < j; i++){
		vertices[i] = i;
	}

	//頂点情報をからVBOを生成
	const vIndex = createVbo(vertices);
	vVBOList = [vIndex];

	//四角形ポリゴン
	position = [
		-1.0,1.0,0.0,
		-1.0,-1.0,0.0,
		1.0,1.0,0.0,
		1.0,-1.0,0.0
	];

	const vPlane = createVbo(position);
	planeVBOList = [vPlane];

	//フレームバッファの生成
	backBuffer = createFramebuffer(TEXTURE_WIDTH,TEXTURE_WIDTH,gl.FLOAT);
	frontBuffer = createFramebuffer(TEXTURE_WIDTH,TEXTURE_WIDTH,gl.FLOAT);
	flip = null;

	gl.disable(gl.BLEND);
	gl.blendFunc(gl.ONE,gl.ONE);

	//フレームバッファをバインド
	gl.bindFramebuffer(gl.FRAMEBUFFER,backBuffer.f);
	gl.viewport(0,0,TEXTURE_WIDTH,TEXTURE_HEIGHT);

	gl.clearColor(0.0,0.0,0.0,0.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	//プログラムオブジェクトの選択
	gl.useProgram(prg);

	//テクスチャへ頂点情報をレンダリング
	setAttribute(planeVBOList,attLocation,attStride);
	gl.uniform2fv(uniLocation[0],resolution);
	gl.drawArrays(gl.TRIANGLE_STRIP,0,position.length/3);

	ambient = [];

	window.addEventListener('mousedown',mouseDown,true);
	window.addEventListener('mouseup',mouseUp,true);
	window.addEventListener('mousemove',mouseMove,true);
}

function rendering(){
	gl.disable(gl.BLEND);

	//フレームバッファをバインド
	gl.bindFramebuffer(gl.FRAMEBUFFER,frontBuffer.f);

	gl.viewport(0,0,TEXTURE_WIDTH,TEXTURE_HEIGHT);

	gl.clearColor(0.0,0.0,0.0,0.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	//プログラムオブジェクトの選択
	gl.useProgram(vPrg);

	//テクスチャとしてバックバッファをバインド
	gl.bindTexture(gl.TEXTURE_2D,backBuffer.t);

	//テクスチャへ頂点情報をレンダリング
	setAttribute(planeVBOList,vAttLocation,vAttStride);
	gl.uniform2fv(vUniLocation[0],resolution);
	gl.uniform1i(vUniLocation[1],0);
	gl.uniform2fv(vUniLocation[2],[mousePositionX,mousePositionY]);
	gl.uniform1i(vUniLocation[3],mouseFlag);
	gl.uniform1f(vUniLocation[4],velocity);
	gl.drawArrays(gl.TRIANGLE_STRIP,0,position.length/3);

	//パーティクル色を設定
	count ++;
	ambient = hsva(count % 360,1.0,0.8,1.0);

	gl.enable(gl.BLEND);

	gl.viewport(0,0,canvas.width,canvas.height);
	gl.bindFramebuffer(gl.FRAMEBUFFER,null);
	gl.clearColor(0.0,0.0,0.0,0.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	//プログラムオブジェクトの選択
	gl.useProgram(pPrg);

	//テクスチャとしてフロントバッファをバインド
	gl.bindTexture(gl.TEXTURE_2D,frontBuffer.t);

	//頂点を描画
	setAttribute(vVBOList,pAttLocation,pAttStride);
	gl.uniform2fv(pUniLocation[0],resolution);
	gl.uniform1i(pUniLocation[1],0);
	gl.uniform1f(pUniLocation[2],velocity);
	gl.uniform4fv(pUniLocation[3],ambient);
	gl.drawArrays(gl.POINTS,0,vertices.length);

	gl.flush();

	//加速度の調整
	if(mouseFlag){
		velocity = 1.0;
	}else{
		velocity *= 0.95;
	}

	//フレームバッファをフリップ
	flip = backBuffer;
	backBuffer = frontBuffer;
	frontBuffer = flip;

	requestAnimationFrame(rendering);
}

//===============================================================
// Controll
//===============================================================
function mouseDown(event){
	mouseFlag = true;
}
function mouseUp(event){
	mouseFlag = false;
}
function mouseMove(event){
	if(mouseFlag){
		const cw = canvas.width;
		const ch = canvas.height;
		mousePositionX = (event.clientX - canvas.offsetLeft - cw / 2.0) / cw * 2.0;
		mousePositionY = -(event.clientY - canvas.offsetTop - ch / 2.0) / ch * 2.0;
	}
}

//===============================================================
// Function
//===============================================================
//シェーダを生成
function createShader(shaderType,shaderText){
	const shader = gl.createShader(shaderType);
	gl.shaderSource(shader,shaderText);
	gl.compileShader(shader);
	return shader;
}

//プログラムオブジェクトを生成しシェーダをリンク
function createProgram(vs,fs){
	const program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	gl.useProgram(program);
	return program;
}

//VBOを生成
function createVbo(data){
	const vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
	gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(data),gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER,null);
	return vbo;
}

//VBOのバインド、登録
function setAttribute(vbo,attL,attS){
	for(let i in vbo){
		gl.bindBuffer(gl.ARRAY_BUFFER,vbo[i]);
		gl.enableVertexAttribArray(attL[i]);
		gl.vertexAttribPointer(attL[i],attS[i],gl.FLOAT,false,0,0);
	}
}

//フレームバッファをオブジェクトとして生成
function createFramebuffer(width,height,format){
	let textureFormat = null;
	if(!format){
		textureFormat = gl.UNSIGNED_BYTE;
	}else{
		textureFormat = format;
	}

	const frameBuffer = gl.createFramebuffer();
	gl.bindFramebuffer(gl.FRAMEBUFFER,frameBuffer);

	const depthRenderBuffer = gl.createRenderbuffer();
	gl.bindRenderbuffer(gl.RENDERBUFFER,depthRenderBuffer);

	gl.renderbufferStorage(gl.RENDERBUFFER,gl.DEPTH_COMPONENT16,width,height);

	gl.framebufferRenderbuffer(gl.FRAMEBUFFER,gl.DEPTH_ATTACHMENT,gl.RENDERBUFFER,depthRenderBuffer);

	const fTexture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D,fTexture);

	gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,width,height,0,gl.RGBA,textureFormat,null);

	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

	gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,fTexture, 0);

	gl.bindTexture(gl.TEXTURE_2D,null);
	gl.bindRenderbuffer(gl.RENDERBUFFER,null);
	gl.bindFramebuffer(gl.FRAMEBUFFER,null);

	return {f:frameBuffer,d:depthRenderBuffer,t:fTexture};
}