diska’s gists

diska / WebGLwithNoGLSL.html

Last active August 6, 2018 12:11

Framebufferにデータ書いてWebGLProgram使わずに描画も一応できるよ。というコード。

	<canvas id="CNVS" width="256" height="256"></canvas>
	<script>
	var cx=CNVS.getContext("webgl");cx.enable(0x0c11);
	var data=new Uint8Array(2562564),fbuf=new Uint8Array(2562564);
	for(j=0;j<256;j++)for(i=0;i<256;i++){
	data[(j256+i)4+0]=i;
	data[(j256+i)4+1]=j;
	data[(j256+i)4+2]=(ii+jj<65536)?0xff:0;
	data[(j256+i)4+3]=0xff;
	}

diska / WebGLTextureWithNoGLSL.html

Last active August 8, 2018 06:55

WebGLで、GLSLなしでimg要素のデータをcanvasに表示したりするサンプル(要512x512とかの画像ファイルとか)。

	<canvas id="CNVS" width="512" height="512"></canvas>
	<img hidden src="KimiruHamiru.png" id="IMGS" width="256" height="256">
	<script>
	var cx=CNVS.getContext("webgl",{preserveDrawingBuffer:true});
	cx.enable(0x0c11);
	var fbuf=new Uint8Array(5125124);
	var tx=cx.createTexture();cx.bindTexture(cx.TEXTURE_2D, tx);
	var drawFrag=false, wait=0;
	function load(){
	cx.pixelStorei(cx.UNPACK_FLIP_Y_WEBGL,true);

diska / rt01.html

Last active August 20, 2018 07:56

三葉レイ動画の最初のやつのWebGL実装。途中。暫定。

	<meta charset="utf-8"><br/>
	<canvas id="CNVS" width="256" height="160"></canvas><hr/>
	<input id="SLID" type="range" max="50">
	<script>
	const width=256, height=160; // Image size
	const bignum=1e5;

	function vec3(x=0,y=0,z=0){this.x=x, this.y=y, this.z=z;}
	add=function(a,b){return new vec3(a.x+b.x, a.y+b.y, a.z+b.z);}
	sub=function(a,b){return new vec3(a.x-b.x, a.y-b.y, a.z-b.z);}

diska / rt01glsl1802.html

Created August 19, 2018 20:17

三葉レイ動画の最初のやつ18:02時点のGLSL実装。暫定。

	<meta charset="utf-8"><br/>
	<canvas id="CNVS"></canvas><hr/>
	<script>
	const vsrc=`attribute vec4 p;void main(){gl_PointSize=64.;gl_Position=p;}`;
	const fsrc=`precision mediump float;
	struct Ray{ vec3 o, d;};
	struct Sph{ vec3 o; float r;};
	const float width=120., height=80.;
	float intersect(Sph sph, Ray ray, float tmin, float tmax){
	vec3 op=sph.o-ray.o;

diska / rt01glsl2201.html

Created August 20, 2018 08:04

三葉レイ動画の22:01時点のコードのGLSL化。

	<meta charset="utf-8"><br/>
	<canvas id="CNVS"></canvas><hr/>
	<script>
	const vsrc=`attribute vec4 p;void main(){gl_PointSize=64.;gl_Position=p;}`;
	const fsrc=`precision mediump float;
	struct Ray{ vec3 o, d;};
	struct Sph{ vec3 o; float r;};
	const float width=120., height=80.;
	float intersect(Sph sph, Ray ray, float tmin, float tmax){
	vec3 op=sph.o-ray.o;

diska / rt01glsl2510a.html

Created August 21, 2018 15:13

三葉レイ動画の25:10時点のコードのGLSL化。

	<meta charset="utf-8"><br/>
	<canvas id="CNVS"></canvas><hr/>
	<input id="CAM" type="range" step="0.02" min="0" max="6.3">
	<script>
	const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
	const fsrc=`precision mediump float;
	struct Ray{ vec3 o, d;};
	struct Sph{ vec3 o; float r; vec3 ref; vec3 le;};
	const float width=120., height=80.;
	float intersect(Sph sph, Ray ray, float tmin, float tmax){

diska / rt01js3321a.html

Last active September 6, 2018 03:08

三葉レイ動画の33:21時点(最終)相当のコードのWebGL化(実質上並列処理なし)。

	<meta charset="utf-8"><br/>
	<canvas id="CNVS" width="300" height="200"></canvas><hr/>
	<input id="SELE" type="range" max="3">
	<script src="drawer.js"></script>
	<script>
	// drawするとdataの中身をcanvasに表示するだけ。
	function getCxPg(flags={}){
	const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
	const fsrc=
	`precision highp float;

diska / short04.4.html

Last active September 15, 2018 07:04

「vertexたくさん描くと重い」というテストコード。

	<h1>vertices</h1>
	<input id="SLID" type="range" min="1" max="25" value="10"><input id="TEXT">
	<canvas id="CNVS" width="1024" height="1024"></canvas><hr/>
	<script>
	const vs=`attribute vec4 a;uniform float vt;
	void main(){
	gl_PointSize=1.0;
	float th=vt*a.z/2.0;
	gl_Position=a;
	gl_Position.xy*=mat2(cos(th),-sin(th),sin(th),cos(th));

diska / rt01glsl3321b.html

Created October 21, 2018 04:14

三葉レイ動画rt01の33:21時点(最終)相当のコードのGLSL化(Firefoxで軽く、Vivaldiで重い)。

	<meta charset="utf-8"><br/>
	<input id="SPP" type="range" min="0" max="8" value="2"><input id="SPPT"><br/>
	<input id="DPP" type="range" min="1" max="7" value="2"><input id="DPPT"><br/>
	<canvas id="CNVS"></canvas><hr/>
	<script>
	const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
	const fsrc0c=`precision highp float;
	struct Ray{ vec3 o, d;};
	struct Sph{ vec3 o; float r; vec3 ref; vec3 le; int m;float ior;};
	const float PI=3.14;

diska / short05.4.html

Created March 10, 2019 17:24

WebGL1.0でtextureを生成して使うサンプル。意味はともかく一応動く。

	<h1>WebGLTexture</h1>
	<hr/><canvas id="CNVS" width="256px" height="256px"></canvas><hr/>
	<script>
	var cx=CNVS.getContext("webgl");
	var data=new Uint8Array(2562564);for(var i=0; i<2562564; i++)data[i]=Math.random()*0xff;
	with(cx){
	var tx=createTexture();
	var fb=createFramebuffer();
	bindTexture(TEXTURE_2D, tx);
	texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, NEAREST);

	<canvas id="CNVS" width="256" height="256"></canvas>
	<script>
	var cx=CNVS.getContext("webgl");cx.enable(0x0c11);
	var data=new Uint8Array(2562564),fbuf=new Uint8Array(2562564);
	for(j=0;j<256;j++)for(i=0;i<256;i++){
	data[(j256+i)4+0]=i;
	data[(j256+i)4+1]=j;
	data[(j256+i)4+2]=(ii+jj<65536)?0xff:0;
	data[(j256+i)4+3]=0xff;
	}