diska

<style>canvas,textarea{background-color:bisque;}</style>
<canvas width="256" height="256"></canvas>
<textarea id="LOG" cols="30" rows="10"></textarea>
<script>"use strict";
let vsrc0=`attribute vec4 p;void main(){gl_PointSize=250.;gl_Position=p;}`;
let fsrc0=`uniform sampler2D tx;void main(){gl_FragColor=texture2D(tx,gl_PointCoord*3.);}`;
let vsrc1=`attribute vec4 p;void main(){gl_PointSize=128.;gl_Position=p;}`;
let fsrc1=`void main(){gl_FragColor=(length(gl_PointCoord-.5)<.3)?vec4(1,0,0,1):vec4(1);}`;
let cx=document.querySelector("canvas").getContext("webgl");
let fb=getFb(256,256);

diska

<style>canvas,textarea,video{background-color: bisque;}</style>
<canvas width="512" height="512"></canvas><hr/>
<textarea id="LOG" cols="30" rows="10"></textarea>
<video id="VD0" src="" loop autoplay muted hidden></video>
<video id="VD1" src="" loop autoplay muted hidden></video>
<script>"use strict";
let vsrc=`attribute vec4 p;void main(){gl_PointSize=512.;gl_Position=p;}`;
let fsrc=`precision highp float;uniform sampler2D tx;
void main(){gl_FragColor=vec4(texture2D(tx,gl_PointCoord).rgb,1);}`;
let cx=document.querySelector("canvas").getContext("webgl");

diska

<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
let data=new Uint8Array(64*64*4);
for(let i=0; i<data.length; i++)data[i]=0xff*Math.random();
const vsrc=`attribute vec4 p;void main(){gl_PointSize=256.;gl_Position=p;}`;
const fsrc=`precision highp float;uniform samplerCube tx6;uniform float th;
void main(){
	vec3 eye=vec3(2.*gl_PointCoord.xy-1.,1);	eye.xy+=vec2(cos(th),sin(th));
	gl_FragColor=textureCube(tx6,normalize(eye));
}`;

diska

<style>canvas{background-color:blue};</style>
<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
let cv0=document.createElement("canvas");	cv0.width=32;cv0.height=32;
let cc=cv0.getContext("2d");	cc.font="24px serif";
let cx=document.querySelector("canvas").getContext("webgl");
const vsrc=`attribute vec4 p;varying vec3 eye;
void main(){gl_Position=p;gl_Position.xy=2.*p.xy-1.;eye=vec3(2.*p.xy-1.,.8);}`;
const fsrc=`precision highp float;
uniform samplerCube tx6;uniform mat3 m3;varying vec3 eye;

diska

<style>canvas,textarea{background-color: bisque;}</style>
<canvas width="512" height="512"></canvas><hr/>
<textarea id="LOG" cols="32" rows="15"></textarea>
<script>"use strict"
const vsrc=`attribute vec4 p;uniform sampler2D tx0;uniform mat4 m4;
varying vec4 v4;
void main(){gl_PointSize=7.0;
	v4=texture2D(tx0,vec2(p.x/2.+.5,-p.y/2.+.5));
	vec4 p2=p;	p2.z-=v4.r/5.;
	gl_Position=p2*m4;

diska

<style>canvas,textarea{background-color:bisque}</style>
<canvas width="256" height="256"></canvas><br/>
w:<input id="W" type="range" value="100"><hr/>
<textarea id="LOG" cols="30" rows="10" value=""></textarea>
<script>"use strict";
const vsrc=`attribute vec4 p;uniform float w;
void main(){gl_Position=vec4(p.xyz,w);gl_PointSize=8./w;}`;
const fsrc=`void main(){gl_FragColor=vec4(1);}`;
const data=[];for(let i=0;i<100*3;i++){data[i]=Math.random()*2-1;}
let cx=document.querySelector("canvas").getContext("webgl");

diska

<canvas width="256" height="256"></canvas>
<script>"use strict";
const vsrc=`attribute vec4 p;uniform mat4 m,n;
void main(){gl_Position=p*m*n;gl_PointSize=8.*gl_Position.w;;}`;
const fsrc=`void main(){gl_FragColor=vec4(vec3(1.-gl_FragCoord.z),1);}`;
const data=[];	for(let i=0;i<9999;i++){data[i]=100*(Math.random()-.5);}
let pg, cx=document.querySelector("canvas").getContext("webgl");
cx.enable(cx.DEPTH_TEST);
try{pg=getPg(vsrc,fsrc);cx.useProgram(pg)}catch(e){document.write(e);throw e};
let cxm=cx.getUniformLocation(pg,"m"),cxn=cx.getUniformLocation(pg,"n");

diska

<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
const vsrc=`#version 300 es
in vec4 p;	void main(){gl_Position=p;gl_PointSize=32.;}`;
const fsrc=`#version 300 es
precision mediump float;
out vec4 fragColor;	void main(){fragColor=vec4(1);}`;
let cx=document.querySelector("canvas").getContext("webgl2",{});
let pg=cx.createProgram();
try{

diska

<canvas width="512" height="512"></canvas><script>"use strict";
const vsrc=`attribute vec4 p;uniform mat4 m;varying vec4 vp;
void main(){
	gl_Position=p*m;	gl_Position.w=6./(3.-gl_Position.z);
	gl_PointSize=30./gl_Position.w;	vp=p;}`;
const fsrc=`precision mediump float;uniform sampler2D tx;varying vec4 vp;
void main(){
	vec4 ct=texture2D(tx,vec2(vp.rg));
	gl_FragColor=(length(vp)<1.5)?vec4(1,1,0,1):vec4(ct.rgb,1);}`;
const m=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];

diska

<canvas width="512" height="512"></canvas><hr/>
<textarea id="LOG" cols="30" rows="10" value=""></textarea>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("2d");
cx.canvas.addEventListener("touchstart",hander,false);
cx.canvas.addEventListener("touchmove",hander,false);
function hander(e){
	e.preventDefault();
	let touches=e.changedTouches;
	for (let i=0; i<touches.length; i++){