diska

<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

<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

<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=p*m;gl_Position.w=1.+gl_Position.z*.5;
	gl_PointSize=6./gl_Position.w;
}`;
const fsrc=`precision highp float;

diska

<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

<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++){

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="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="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

<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

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