diska

<canvas hidden></canvas><br>
<textarea id="LG" cols="30" rows="15"></textarea>
<script>"use strict";
const vsrc=`#version 300 es\nin vec4 i;	out vec4 o;	void main(){o=i*2.;}`;
const fsrc=`#version 300 es\nvoid main(){}`;
let cx=document.querySelector("canvas").getContext("webgl2");
let pg=cx.createProgram();const vout=["o"];{
	let vs=cx.createShader(cx.VERTEX_SHADER);cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER);cx.attachShader(pg,fs);
	cx.transformFeedbackVaryings(pg,vout,cx.SEPARATE_ATTRIBS);

diska

<canvas width="256" height="256"></canvas>
<script>"use strict";
let vsrc=`attribute vec4 p;void main(){gl_PointSize=3.;
	gl_Position=p;	gl_Position.w=2.;
}`;
let fsrc=`void main(){gl_FragColor=vec4(1);}`;
let cx=document.querySelector("canvas").getContext("webgl");
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

<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("webgl");
let vsrc=`attribute vec4 p,n,uv;uniform mat4 m;varying vec3 vn;
void main(){gl_Position=p*m;gl_Position.xy/=1.+gl_Position.z*.5;vn=(n*m).xyz;}`;
let fsrc=`precision highp float;varying vec3 vn;
void main(){gl_FragColor=vec4(vec3(1)*dot(vec3(-.5),vn),1);}`;
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

<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
let opt={preserveDrawingBuffer:true};
let cx=document.querySelector("canvas").getContext("webgl",opt);
const cos=Math.cos,π=Math.PI,rnd=Math.random;
let roty=([x,y,z],θ)=>[x*cos(θ+0)+z*cos(θ+π/2),y,x*cos(θ-π/2)+z*cos(θ+0)];
let pers=([x,y,z])=>{let w=1+z*0.5;return [x/w,y/w,z/w]};
let ab=new Float32Array(3000);
for(let i=0;i<3000;i+=3)ab.set([rnd()-.5,rnd(),rnd()],i)
function draw(now){

diska

<style>canvas,textarea{background-color: khaki;}</style>
<canvas width="512" height="512"></canvas><hr/>
<textarea id="LOG" cols="32" rows="15"></textarea>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("webgl");
const AB=cx.ARRAY_BUFFER,EB=cx.ELEMENT_ARRAY_BUFFER;
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,q;uniform mat4 m,o;varying vec4 vc;

diska

<style>canvas{background-color: khaki;}</style>
<canvas width="256" height="256"></canvas><hr>
<textarea id="LOG" cols="32" rows="12"></textarea>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("webgl");
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 sampler2D tx;uniform mat4 m;varying vec3 vc;
mat4 n=mat4(1,0,0,0, 0,1,0,-1, 0,0,1,0, 0,0,1,2);void main(){

diska

<style>canvas,textarea{background-color: khaki;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea id="LOG" cols="40" rows="20"></textarea>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("webgl");
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 m;varying vec4 c;
void main(){gl_Position=p*m;gl_Position.xyz/=2.+.5*gl_Position.z;

diska

<canvas width="512" height="512"></canvas><hr/>
rotX:<input id="ROTX" type="range" value="50"><hr/>
<textarea id="LOG" cols="40" rows="15"></textarea>
<script>"use strict";
let cx=document.querySelector("canvas").getContext("webgl");
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 m;uniform sampler2D tx;uniform vec2 u;
varying vec4 c;void main(){

diska

<canvas width="512" height="512"></canvas>
<script>"use strict";
let opt={preserveDrawingBuffer:true}
let cx=document.querySelector("canvas").getContext("webgl",opt);
function draw(now){
	let x,y,z, sec=now/1000;
	cx.disable(cx.SCISSOR_TEST);
	cx.clearColor(0,0,.6,1);	cx.clear(0x4000);
	cx.enable(cx.SCISSOR_TEST);
	for(let i=0;i<100000; i++){

diska

<canvas width="200" height="200"></canvas><hr/>
<script>"use strict";
let VIEWPORT;
let opt={preserveDrawingBuffer:true};
let cx=document.querySelector("canvas").getContext("webgl",opt);
viewport([0,0,cx.canvas.clientWidth,cx.canvas.clientHeight]);
let cube=[1,1,1, 1,-1,1], stride=3;
function draw(now){
	let time=now/1000;
	cx.clearColor(0,.2,0,1);cx.disable(cx.SCISSOR_TEST);cx.clear(0x4000);