Suzanne.obj表示専用WebGLサンプルコード。

objvn.html

<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;
void main(){gl_Position=p*m*o;gl_PointSize=6.;vc=normalize(q)*m;}`;
let fsrc=`precision highp float;varying vec4 vc;
void main(){gl_FragColor=vec4(1)*dot(vec4(1),vc);gl_FragColor.a=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 abuf=cx.createBuffer();
let dat0=new Float32Array(100000*6);
cx.bindBuffer(AB,abuf);cx.bufferData(AB,dat0.byteLength,cx.STATIC_DRAW);
let pgM=cx.getUniformLocation(pg,"m"),pgO=cx.getUniformLocation(pg,"o");
let cnt=0;
let draw=(now)=>{
	let t=now/1000, c=Math.cos(t),s=Math.sin(t);
	cx.uniformMatrix4fv(pgM,false,[c,0,-s,0, 0,1,0,0, s,0,c,0, 0,0,0,1])
	cx.uniformMatrix4fv(pgO,false,[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0.5,2.2])
	cx.clearColor(0,0,0,1);	cx.clear(0x4000);	cx.drawArrays(cx.TRIANGLES,0,cnt)
	requestAnimationFrame(draw);
}
let ldObj=r=>{
	let v=r.match(/^v\ .+$/gm), vn=r.match(/^vn\ .+$/gm), f=r.match(/^f\ .+$/gm);
	let setV2=(fLine)=>{
		let a=fLine.split(/[/\ ]/), b;
		b= v[a[1]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+0);
		b= v[a[4]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+3);
		b= v[a[7]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+6);
		b=vn[a[3]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+9);
		b=vn[a[6]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+12);
		b=vn[a[9]-1].split(/ /);dat0.set([b[1],b[2],b[3]],cnt+15);cnt+=18;
	}
	f.forEach(setV2);
	cx.bufferSubData(AB,0,dat0.subarray(0,cnt));
	cx.enableVertexAttribArray(0);cx.vertexAttribPointer(0,3,cx.FLOAT,false,0,0);
	cx.enableVertexAttribArray(1);cx.vertexAttribPointer(1,3,cx.FLOAT,false,0,4*9);
	cx.useProgram(pg);	cx.enable(cx.DEPTH_TEST);
	requestAnimationFrame(draw);
}
let ftObj=f=>fetch(f).then(r=>r.text()).then(ldObj);	ftObj("suzanne.obj");
</script>