suzanne.objを読んで最低限表示するだけのWebGLコード。

objloader.html

<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;
gl_PointSize=3./gl_Position.w;c=p;}`
let fsrc=`precision mediump float;varying vec4 c;void main(){gl_FragColor=c+1.;}`
cx.shaderSource(vs,vsrc);cx.compileShader(vs);
cx.shaderSource(fs,fsrc);cx.compileShader(fs);cx.linkProgram(pg);
LOG.value+=`pg:${cx.getProgramInfoLog(pg)}\n`
LOG.value+=`vs:${cx.getShaderInfoLog(vs)}\nfs:${cx.getShaderInfoLog(fs)}\n`
let pgM=cx.getUniformLocation(pg,"m");
let bf=cx.createBuffer(),bfln=0;
async function ld(file){let res=await fetch(file);return await res.text()}
ld("suzanne.obj").then((res)=>{run(res)});
function run(dat){
	let tmp=dat.split("\n");
	for(let i=0;i<tmp.length;i++)if(tmp[i].split(" ").slice(0,1)=="v")bfln++;
	let data=new Float32Array(bfln*3);
	for(let i=0,c=0;i<tmp.length;i++){
		if(tmp[i].split(" ").slice(0,1)=="v"){
			data.set(tmp[i].split(" ").slice(1,4), c++*3);
		}
	}
	cx.bindBuffer(cx.ARRAY_BUFFER,bf);
	cx.bufferData(cx.ARRAY_BUFFER,data.subarray(0,bfln*3),cx.STATIC_DRAW);
	cx.enableVertexAttribArray(0);cx.vertexAttribPointer(0,3,cx.FLOAT,false,0,0);
	cx.bindBuffer(cx.ARRAY_BUFFER,null);
	cx.useProgram(pg);
	requestAnimationFrame(draw);
}
let m=[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
function draw(now){
	let time=now/1000,c=Math.cos(time),s=Math.sin(time);
	m[0]=c;m[2]=s;m[5]=1;m[8]=s;m[10]=-c;
	cx.uniformMatrix4fv(pgM,false,m);
	cx.clearColor(0,0,1,1);cx.clear(0x4000);cx.drawArrays(0,0,bfln);
	requestAnimationFrame(draw);
}
</script>