diska

<style>canvas{background-color:darkcyan;}</style>
<style>textarea{background-color:bisque;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea rows="12" cols="40" value=""></textarea>
<script>
let cx=document.querySelector("canvas").getContext("webgl");
let LOG=document.querySelector("textarea");
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

<style>body{background-color: #cf9};</style>
<style>canvas{background-color: #999};</style>
<style>textarea{background-color: #ffc};</style>
<canvas id="CNVS" width="256" height="256"></canvas>
<textarea id="LOG" cols="40" rows="20" value=""></textarea><hr/>
<textarea id="VSRC" cols="40" rows="20" value=""></textarea>
<textarea id="FSRC" cols="40" rows="20" value=""></textarea>
<textarea id="ARRY" cols="40" rows="20" value=""></textarea><hr/>
<script>"use strict"
let cx=document.querySelector("canvas").getContext("webgl");

diska

<style>textarea{background-color: bisque;}</style>
<canvas width="512" height="512"></canvas><hr/>
<textarea id="VS" cols="64" rows="15" spellcheck="false"></textarea>
<textarea id="FS" cols="64" rows="15" spellcheck="false"></textarea>
<textarea id="LOG" cols="64" rows="15" spellcheck="false"></textarea>
<video id="TX0" loop="true" muted="true" autoplay hidden>
<script>"suse strict;"
let cx=document.querySelector("canvas").getContext("webgl");
//
let vdOk=false, pause=false;

diska

<style>
canvas{background-color:darkblue}
body{background-color:cadetblue}
textarea{background-color: bisque}
</style>
<canvas id="CNVS"></canvas><br/>
<textarea id="LOG" cols="34" rows="18"></textarea>
<script>
CNVS.width=16;	CNVS.height=16;
CNVS.style.width=256;	CNVS.style.height=256;

diska

<h1>WebGLTexture</h1>
<hr/><canvas id="CNVS" width="256px" height="256px"></canvas><hr/>
<script>
var cx=CNVS.getContext("webgl");
var data=new Uint8Array(256*256*4);for(var i=0; i<256*256*4; i++)data[i]=Math.random()*0xff;
with(cx){
	var tx=createTexture();
	var fb=createFramebuffer();
	bindTexture(TEXTURE_2D, tx);
	texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, NEAREST);

diska

<meta charset="utf-8"><br/>
<input id="SPP" type="range" min="0" max="8" value="2"><input id="SPPT"><br/>
<input id="DPP" type="range" min="1" max="7" value="2"><input id="DPPT"><br/>
<canvas id="CNVS"></canvas><hr/>
<script>
const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
const fsrc0c=`precision highp float;
struct Ray{	vec3 o, d;};
struct Sph{	vec3 o; float r; vec3 ref; vec3 le; int m;float ior;};
const float PI=3.14;

diska

<h1>vertices</h1>
<input id="SLID" type="range" min="1" max="25" value="10"><input id="TEXT">
<canvas id="CNVS" width="1024" height="1024"></canvas><hr/>
<script>
const vs=`attribute vec4 a;uniform float vt;
void main(){
	gl_PointSize=1.0;
	float th=vt*a.z/2.0;
	gl_Position=a;
	gl_Position.xy*=mat2(cos(th),-sin(th),sin(th),cos(th));

diska

<meta charset="utf-8"><br/>
<canvas id="CNVS" width="300" height="200"></canvas><hr/>
<input id="SELE" type="range" max="3">
<script src="drawer.js"></script>
<script>
//  drawするとdataの中身をcanvasに表示するだけ。
function getCxPg(flags={}){
	const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
	const fsrc=
`precision highp float;

diska

<meta charset="utf-8"><br/>
<canvas id="CNVS"></canvas><hr/>
<input id="CAM" type="range" step="0.02" min="0" max="6.3">
<script>
const vsrc=`attribute vec4 p;void main(){gl_Position=p;}`;
const fsrc=`precision mediump float;
struct Ray{	vec3 o, d;};
struct Sph{	vec3 o; float r; vec3 ref; vec3 le;};
const float width=120., height=80.;
float intersect(Sph sph, Ray ray, float tmin, float tmax){

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;