diska’s gists

diska / readPixels.html

Created March 27, 2019 07:21

readPixelsとtextareaのサンプル。

	<style>
	canvas{background-color:darkblue}
	body{background-color:cadetblue}
	textarea{background-color: bisque}
	</style>
	<canvas id="CNVS"></canvas><br/>
	<textarea id="LOG" cols="34" rows="18"></textarea>
	<script>
	CNVS.width=16; CNVS.height=16;
	CNVS.style.width=256; CNVS.style.height=256;

diska / texture.html

Last active October 18, 2019 22:14

mp4を一応表示できるGLSLエディタ。

	<style>textarea{background-color: bisque;}</style>
	<canvas width="512" height="512"></canvas><hr/>
	<textarea id="VS" cols="64" rows="15" spellcheck="false"></textarea>
	<textarea id="FS" cols="64" rows="15" spellcheck="false"></textarea>
	<textarea id="LOG" cols="64" rows="15" spellcheck="false"></textarea>
	<video id="TX0" loop="true" muted="true" autoplay hidden>
	<script>"suse strict;"
	let cx=document.querySelector("canvas").getContext("webgl");
	//
	let vdOk=false, pause=false;

diska / glslVarrayEditor.html

Created December 27, 2019 03:11

mini glslEditor+objLoader

	<style>body{background-color: #cf9};</style>
	<style>canvas{background-color: #999};</style>
	<style>textarea{background-color: #ffc};</style>
	<canvas id="CNVS" width="256" height="256"></canvas>
	<textarea id="LOG" cols="40" rows="20" value=""></textarea><hr/>
	<textarea id="VSRC" cols="40" rows="20" value=""></textarea>
	<textarea id="FSRC" cols="40" rows="20" value=""></textarea>
	<textarea id="ARRY" cols="40" rows="20" value=""></textarea><hr/>
	<script>"use strict"
	let cx=document.querySelector("canvas").getContext("webgl");

diska / 06vertexArray.html

Created January 29, 2020 17:21

「WebGLの三角のサンプル」の亜種。

	<style>canvas{background-color:darkcyan;}</style>
	<style>textarea{background-color:bisque;}</style>
	<canvas width="256" height="256"></canvas><hr/>
	<textarea rows="12" cols="40" value=""></textarea>
	<script>
	let cx=document.querySelector("canvas").getContext("webgl");
	let LOG=document.querySelector("textarea");
	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);

diska / yashed.html

Created May 20, 2020 01:05

minimal Shader Editor with a uniform.

	<style>textarea{background-color: bisque;}</style>
	<canvas width="256" height="256"></canvas><hr/>
	<textarea id="VS" cols="36" rows="8"></textarea>
	<textarea id="FS" cols="36" rows="8"></textarea>
	<textarea id="LG" cols="36" rows="8"></textarea>
	<script>
	VS.value=`attribute vec4 p;\nvoid main(){
	gl_PointSize=200.;\n gl_Position=p;\n}`;
	FS.value=`precision highp float;\nuniform vec4 u;\nvoid main(){
	gl_FragColor=vec4(1);\n gl_FragColor.rg=gl_PointCoord.xy;

diska / neko.html

Last active July 14, 2020 02:29

WebGLと深度処理の復習。参考： https://scratch.mit.edu/projects/407749635/

	<style>canvas{background-color: black;}</style>
	<canvas width="512" height="512"></canvas>
	<script>"use strict";
	const vsrc=`attribute vec4 p;
	uniform mat4 umat; uniform sampler2D tex0;
	varying vec4 vp;
	void main(){
	gl_PointSize=3.;
	vp=p, vp.z=texture2D(tex0,p.xy*0.5+0.5).z;
	gl_Position=umatvp0.7;gl_Position.w=1.;

diska / cylinder.html

Created August 2, 2020 03:30

変換行列を理解してない学習段階で書いた円筒のWebGLコード。

	<style>canvas{background-color: cornflowerblue;}</style>
	<canvas width="512" height="512"></canvas>
	<script>
	const opt={};
	let cx=document.querySelector("canvas").getContext("webgl",opt);
	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 m4;
	varying float c;

diska / hellowebgl.html

Created October 2, 2020 05:38

WebGLでHELLOと表示するためなら手段を選ばないコード。

	<canvas></canvas>
	<script>
	const hello=`
	#...#.#####.#####.#####..###..
	#...#.#.....#.....#.....#...#.
	#####.####..#.....#.....#...#.
	#...#.#.....#.....#.....#...#.
	#...#.#####.#.....#......###..`;
	let cx=document.querySelector("canvas").getContext("webgl");
	cx.clearColor(0,0.3,0,1); cx.clear(0x4000);

diska / cube.html

Last active October 22, 2020 16:43

WebGLで四角いのが何となく回るだけ。

	<style>canvas,textarea{background-color: bisque;}</style>
	<canvas width="256" height="256"></canvas><hr/>
	<textarea name="" id="LOG" cols="40" rows="12"></textarea>
	<script>"use strict";
	let vsrc=`attribute vec4 p;
	uniform mat3 m3;
	varying vec3 vPos,vDep;
	void main(){
	vPos=p.xyz;
	vec4 p2=vec4(p.xyz*m3,1);

diska / webglshortsample.html

Created October 25, 2020 00:17

短くて整理されて濃いけど詰め込み過ぎてよくわからないWebGL入門コード。

	<style>canvas,textarea{background-color: bisque;}</style>
	<canvas width="128" height="128"></canvas><hr/>
	<textarea id="LOG" cols="48" rows="16" hidden></textarea>
	<script>"use strict";
	let vsrc=`attribute vec4 p;void main(){gl_PointSize=64.;gl_Position=p;}`;
	let fsrc=`void main(){
	if(length(gl_PointCoord.xy-vec2(.5))>.5)discard;
	gl_FragColor=vec4(gl_PointCoord.xy,0,1);}`;
	let cx=document.querySelector("canvas").getContext("webgl");
	try{ cx.useProgram(getPg(vsrc,fsrc));requestAnimationFrame(draw);