diska

<canvas id="CNVS" width="300" height="300"></canvas>
<script>
const vsrc1=`attribute vec4 aPosi;uniform mat4 uMvpm;
void main(void){gl_Position=aPosi*uMvpm;}`;
const fsrc1=`void main(void){gl_FragColor=vec4(1);}`;
var gl=CNVS.getContext("webgl");
var pg0=getp(gl, vsrc1, fsrc1);
const data=new Float32Array([0,1, 1,0, -1,0]);
var bf0=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bf0);{

diska

<canvas id="canvas" width="500" height="500"></canvas>
<script>
const vssrc=`attribute vec4 position;varying vec4 vcolor;
void main(void){
	vec3 eye=vec3(0,0,-1.5);	// 目はここに置く！
	float l=distance(eye.xyz, position.xyz);	// 「遠く」…それは…
	gl_PointSize=(1.0/l)*32.;	// 遠いほど
	gl_Position.xy=position.xy*(1.0/l);	// 小さい！
	gl_Position.z=position.z;
	gl_Position.w=1.0;

diska

<div id="GamePadUI">
buttons<input id="b" type="text"><br/>
axis0<input id="a0" type="range"><br/>
axis1<input id="a1" type="range"><br/>
axis2<input id="a2" type="range"><br/>
axis3<input id="a3" type="range"><br/>
</div>
<script>
UI={};UI.a=[];
UI.b=document.getElementById("b");

diska

<canvas id="CNVS" width="512px" height="512px"></canvas>
<script>
const vsrc="attribute vec4 p;void main(){gl_Position=vec4(p.xy*.9,0.,1.);}";
const fsrc="void main(){gl_FragColor=vec4(1);}";
const gl=document.getElementById("CNVS").getContext("webgl");
enableStaticAttr2f(gl,0, new Float32Array([-1,-1,-1,1,1,-1,1,1]));
var prg,vs,fs;
vs=gl.createShader(gl.VERTEX_SHADER);	setSource(vs,vsrc);	log(compile(vs));
fs=gl.createShader(gl.FRAGMENT_SHADER);	setSource(fs,fsrc);	log(compile(fs));
prg=gl.createProgram();	attach(prg,vs);	attach(prg,fs);	log(link(prg));

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={};

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

<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

<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

<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

<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;