diska

<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

<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

<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(512*512*4);
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

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

diska

<style>*{background-color:#999;}</style>
<style>canvas{background-color:#333;}</style><hr/>
<canvas id="CNVS" width="256" height="256"></canvas><hr/>
<h3>WebGL入門 00 WebGLRenderingContext</h3>
<script>
var cx=CNVS.getContext("webgl");
cx.enable(cx.SCISSOR_TEST);
var dim=256, iter=dim*dim, ps=1;
function getPos(s){
	var ax=(s%dim)/dim;

diska

<style>body{background-color:#9cc;}</style>
<style>textarea{background-color:#ffc;}</style>
<canvas id="CNVS" width="128" height="128"></canvas>
<textarea id="LOG" cols="32" rows="8"></textarea>
<h3>WebGL入門 06 WebGLFramebuffer</h3>
X<input id="X" type="range" max="7"><br/>
Y<input id="Y" type="range" max="7"><br/>
<script>
var cx=CNVS.getContext("webgl");cx.clearColor(0,.3,0,1);cx.clear(0x4000);
const map=16;

diska

<h1>HTMLImageElement</h1>
<hr/><canvas id="CNVS" width="256" height="256"></canvas>
<img id="SRCI" width="256" height="256">
<textarea id="AINP" cols="40" rows="10"></textarea><hr/>
<textarea id="ALOG" cols="40" rows="10"></textarea><hr/>
<style>textarea{background-color: bisque;}</style>
<script>
const vsrc=`attribute vec4 p;void main(){gl_PointSize=256.;gl_Position=p;}`;
const fsrc=`precision mediump float;uniform sampler2D tex0;
void main(){gl_FragColor=texture2D(tex0, gl_PointCoord);gl_FragColor.rg=1.-gl_FragColor.rg;}`;

diska

<hr/><canvas id="CNVS" width="1000px", height="1000px"></canvas>
<textarea id="AREA" rows="16" cols="50" style="background-color:bisque;">v 0 1 0
v 1 0 0
v -1 0 0
</textarea><hr/>
scale<input id="SLID" type="range"><br/>
mode<input id="MODE" value="2" max="6" type="range">
<script>
const vs0src=`attribute vec4 p;uniform float f;
void main(){gl_PointSize=2.;gl_Position=p;gl_Position.xyz*=f/100.;}`;

diska

<style>textarea{background-color:bisque}</style>
<hr/><canvas width="300" height="300"></canvas>
<textarea id="AREA" rows="16" cols="40"></textarea>
<hr/>
scale<input id="SLID" type="range" value="90" max="100"><input id="SCALE"><br/>
dmode<input id="MODE" type="range" value="0" max="6"><input id="DMODE"><br/>
psize<input id="SIZE" type="range" value="8" max="50"><input id="PSIZE"><br/>
rotYa<input id="ROTY" type="range" min="-1" max="1" step="0.1"><input id="ROTYA"><br/>
<script>
AREA.value=`v 0 1 0\nv 1 0 0\nv -1 0 0`;

diska

<h1>input:gamepad</h1>
<hr/><canvas id="CNVS" width="256px" height="256px"></canvas><hr/>
<input id="slid" type="range"><br/>
<input id="padon" type="checkbox">pad on
<script>
const c=document.getElementById("CNVS").getContext(contextId="webgl");
const UI={};
UI.slid=document.getElementById("slid");
UI.pdon=document.getElementById("padon");
UI.pad={};