diska’s gists

diska / multitouchwgl.html

Last active February 2, 2021 06:45

とりあえずマルチタッチな小さいコードWebGL版。

	<canvas width="512" height="512"></canvas><hr/>
	<textarea id="LOG" cols="30" rows="10" value=""></textarea>
	<script>"use strict";
	let opt={preserveDrawingBuffer:true}
	let cx=document.querySelector("canvas").getContext("webgl",opt);
	cx.clearColor(0,0,0,1);cx.clear(0x4000);
	cx.canvas.addEventListener("touchstart",hander,false);
	cx.canvas.addEventListener("touchmove",hander,false);
	function hander(e){
	e.preventDefault();

diska / viewport.html

Last active February 2, 2021 15:42

webglの「viewportとscissorとclearあたりの挙動の関係」を学習するために書いてみたコード。

	<style>textarea{background-color: burlywood;}</style>
	<canvas width="384" height="256"></canvas><hr/>
	<textarea id="LOG" cols="48" rows="14"></textarea>
	<script>"use strict";
	const vsrc=`attribute vec4 p;uniform mat4 m;
	void main(){
	gl_Position=pm;gl_Position.w=1.+gl_Position.z.5;
	gl_PointSize=6./gl_Position.w;
	}`;
	const fsrc=`precision highp float;

diska / texturewpers.html

Last active February 10, 2021 08:04

「textureにパースを付ける仕組み」を試行錯誤しているWebGLコード。

	<canvas width="256" height="256"></canvas><hr/>
	<textarea id="LG" cols="30" rows="10"></textarea>
	<script>"use strict";
	const vsrc=`attribute vec4 p;uniform float tm;varying vec2 co;
	mat4 m=mat4(cos(tm),0,sin(tm),0,0,1,0,0,-sin(tm),0,cos(tm),0,0,0,0,1);
	void main(){
	gl_Position=vec4(2.p.xy-1.,0,1)m;
	gl_Position.w=1./(1.+(gl_Position.z*0.2)); co=p.xy;
	}`;
	const fsrc=`precision highp float;uniform sampler2D tx;varying vec2 co;

diska / mouse.html

Last active February 11, 2021 08:24

マウス座標の扱いってこんな簡単だったっけ？という、WebGLでお絵かきなコード。

	<canvas width="256" height="256"></canvas><hr/>
	<input type="text">
	<script>"use strict";
	let vsrc=`uniform vec2 m;varying vec2 vm;
	void main(){vm=m;gl_PointSize=4.;gl_Position=vec4(m,0,1);}`;
	let fsrc=`precision highp float;varying vec2 vm;
	void main(){gl_FragColor=vec4(vm/2.+1.,0,1);}`;
	let opt={preserveDrawingBuffer:true};
	let cx=document.querySelector("canvas").getContext("webgl",opt);
	let LG=document.querySelector("input");

diska / cubewithnoprog.html

Last active February 16, 2021 04:27

WebGL使うけどシェーダ使わずに３Ｄしてみるコード。

	<canvas width="200" height="200"></canvas><hr/>
	<script>"use strict";
	let VIEWPORT;
	let opt={preserveDrawingBuffer:true};
	let cx=document.querySelector("canvas").getContext("webgl",opt);
	viewport([0,0,cx.canvas.clientWidth,cx.canvas.clientHeight]);
	let cube=[1,1,1, 1,-1,1], stride=3;
	function draw(now){
	let time=now/1000;
	cx.clearColor(0,.2,0,1);cx.disable(cx.SCISSOR_TEST);cx.clear(0x4000);

diska / scissor3d.html

Created March 10, 2021 02:16

WebGL自由研究「scissorで3D」。raw WebGL 3d sample without WebGLProgram.

	<canvas width="512" height="512"></canvas>
	<script>"use strict";
	let opt={preserveDrawingBuffer:true}
	let cx=document.querySelector("canvas").getContext("webgl",opt);
	function draw(now){
	let x,y,z, sec=now/1000;
	cx.disable(cx.SCISSOR_TEST);
	cx.clearColor(0,0,.6,1); cx.clear(0x4000);
	cx.enable(cx.SCISSOR_TEST);
	for(let i=0;i<100000; i++){

diska / terrain.html

Last active March 23, 2021 00:08

terrainの基本的な仕組みを実装したかったWebGLコード。

	<canvas width="512" height="512"></canvas><hr/>
	rotX:<input id="ROTX" type="range" value="50"><hr/>
	<textarea id="LOG" cols="40" rows="15"></textarea>
	<script>"use strict";
	let cx=document.querySelector("canvas").getContext("webgl");
	let pg=cx.createProgram();
	let vs=cx.createShader(cx.VERTEX_SHADER); cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER); cx.attachShader(pg,fs);
	let vsrc=`attribute vec4 p;uniform mat4 m;uniform sampler2D tx;uniform vec2 u;
	varying vec4 c;void main(){

diska / objloader.html

Created April 11, 2021 05:30

suzanne.objを読んで最低限表示するだけのWebGLコード。

	<style>canvas,textarea{background-color: khaki;}</style>
	<canvas width="256" height="256"></canvas><hr/>
	<textarea id="LOG" cols="40" rows="20"></textarea>
	<script>"use strict";
	let cx=document.querySelector("canvas").getContext("webgl");
	let pg=cx.createProgram();
	let vs=cx.createShader(cx.VERTEX_SHADER);cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER);cx.attachShader(pg,fs);
	let vsrc=`attribute vec4 p;uniform mat4 m;varying vec4 c;
	void main(){gl_Position=pm;gl_Position.xyz/=2.+.5gl_Position.z;

diska / normal.html

Created April 30, 2021 00:24

WebGL1.0でterrainでnormalっぽいけどまだ頭が付いて行ってない48行。

	<style>canvas{background-color: khaki;}</style>
	<canvas width="256" height="256"></canvas><hr>
	<textarea id="LOG" cols="32" rows="12"></textarea>
	<script>"use strict";
	let cx=document.querySelector("canvas").getContext("webgl");
	let pg=cx.createProgram();
	let vs=cx.createShader(cx.VERTEX_SHADER); cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER); cx.attachShader(pg,fs);
	let vsrc=`attribute vec4 p;uniform sampler2D tx;uniform mat4 m;varying vec3 vc;
	mat4 n=mat4(1,0,0,0, 0,1,0,-1, 0,0,1,0, 0,0,1,2);void main(){

diska / objvn.html

Created June 24, 2021 05:50

Suzanne.obj表示専用WebGLサンプルコード。

	<style>canvas,textarea{background-color: khaki;}</style>
	<canvas width="512" height="512"></canvas><hr/>
	<textarea id="LOG" cols="32" rows="15"></textarea>
	<script>"use strict";
	let cx=document.querySelector("canvas").getContext("webgl");
	const AB=cx.ARRAY_BUFFER,EB=cx.ELEMENT_ARRAY_BUFFER;
	let pg=cx.createProgram();
	let vs=cx.createShader(cx.VERTEX_SHADER); cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER); cx.attachShader(pg,fs);
	let vsrc=`attribute vec4 p,q;uniform mat4 m,o;varying vec4 vc;