petamoriken/main.js

## main.js
function createShader(gl, id) {
    const element = document.getElementById(id);
    const [type, text] = [element.type, element.text];

    let shader;
    switch(type) {
        case "x-shader/x-vertex":
            shader = gl.createShader(gl.VERTEX_SHADER);
            break;

        case "x-shader/x-fragment":
            shader = gl.createShader(gl.FRAGMENT_SHADER);
            break;

        default:
            throw new Error(`invalid type: ${type}`);
    }

    gl.shaderSource(shader, text);
    gl.compileShader(shader);

    if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(shader));
    }

    return shader;
}

function createProgram(gl, ...args) {
    const program = gl.createProgram();

    for(let shader of args) {
        gl.attachShader(program, shader);
    }

    gl.linkProgram(program);

    if(gl.getProgramParameter(program, gl.LINK_STATUS)) {
        gl.useProgram(program);
    } else {
        throw new Error(gl.getProgramInfoLog(program));
    }

    return program;
}

function createVbo(gl, data) {
    const vbo = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    return vbo;
}

window.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("canvas");
    canvas.width = 500; canvas.height = 300;

    const gl = canvas.getContext("webgl") || canvas.getContext("experimantal-webgl");
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const [vShader, fShader] = [createShader(gl, "vs"), createShader(gl, "fs")];
    const program = createProgram(gl, vShader, fShader);

    const atLocation = gl.getAttribLocation(program, "position");
    const atStride = 3;

    const vertexPosition = [
         0, 1, 0,
         1, 0, 0,
        -1, 0, 0
    ];

    const vbo = createVbo(gl, vertexPosition);

    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

    gl.enableVertexAttribArray(atLocation);
    gl.vertexAttribPointer(atLocation, atStride, gl.FLOAT, false, 0, 0);

    // clac
    const mMatrix = mat4.create();
    const vMatrix = mat4.create();
    const pMatrix = mat4.create();
    const mvpMatrix = mat4.create();

    mat4.lookAt(vMatrix, [0, 1, 3], [0, 0, 0], [0, 1, 0]);
    mat4.perspective(pMatrix, 90, canvas.width / canvas.height, 0.1, 100);

    mat4.multiply(mvpMatrix, pMatrix, vMatrix);
    mat4.multiply(mvpMatrix, mvpMatrix, mMatrix);

    const uniformLocation = gl.getUniformLocation(program, "mvpMatrix");
    gl.uniformMatrix4fv(uniformLocation, false, mvpMatrix);

    // draw
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush();
});

## webgl-simple.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webgl test</title>
    <script id="vs" type="x-shader/x-vertex">
        attribute vec3 position;
        uniform   mat4 mvpMatrix;

        void main(void){
            gl_Position = mvpMatrix * vec4(position, 1.0);
        }
    </script>
    <script id="fs" type="x-shader/x-fragment">
        void main(void) {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    </script>
    <script src="js/gl-matrix.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
	function createShader(gl, id) {
	const element = document.getElementById(id);
	const [type, text] = [element.type, element.text];

	let shader;
	switch(type) {
	case "x-shader/x-vertex":
	shader = gl.createShader(gl.VERTEX_SHADER);
	break;

	case "x-shader/x-fragment":
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	break;

	default:
	throw new Error(`invalid type: ${type}`);
	}

	gl.shaderSource(shader, text);
	gl.compileShader(shader);

	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	throw new Error(gl.getShaderInfoLog(shader));
	}

	return shader;
	}

	function createProgram(gl, ...args) {
	const program = gl.createProgram();

	for(let shader of args) {
	gl.attachShader(program, shader);
	}

	gl.linkProgram(program);

	if(gl.getProgramParameter(program, gl.LINK_STATUS)) {
	gl.useProgram(program);
	} else {
	throw new Error(gl.getProgramInfoLog(program));
	}

	return program;
	}

	function createVbo(gl, data) {
	const vbo = gl.createBuffer();

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
	gl.bindBuffer(gl.ARRAY_BUFFER, null);

	return vbo;
	}

	window.addEventListener("DOMContentLoaded", () => {
	const canvas = document.getElementById("canvas");
	canvas.width = 500; canvas.height = 300;

	const gl = canvas.getContext("webgl") \|\| canvas.getContext("experimantal-webgl");
	gl.clearColor(0, 0, 0, 1);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);

	const [vShader, fShader] = [createShader(gl, "vs"), createShader(gl, "fs")];
	const program = createProgram(gl, vShader, fShader);

	const atLocation = gl.getAttribLocation(program, "position");
	const atStride = 3;

	const vertexPosition = [
	0, 1, 0,
	1, 0, 0,
	-1, 0, 0
	];

	const vbo = createVbo(gl, vertexPosition);

	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

	gl.enableVertexAttribArray(atLocation);
	gl.vertexAttribPointer(atLocation, atStride, gl.FLOAT, false, 0, 0);

	// clac
	const mMatrix = mat4.create();
	const vMatrix = mat4.create();
	const pMatrix = mat4.create();
	const mvpMatrix = mat4.create();

	mat4.lookAt(vMatrix, [0, 1, 3], [0, 0, 0], [0, 1, 0]);
	mat4.perspective(pMatrix, 90, canvas.width / canvas.height, 0.1, 100);

	mat4.multiply(mvpMatrix, pMatrix, vMatrix);
	mat4.multiply(mvpMatrix, mvpMatrix, mMatrix);

	const uniformLocation = gl.getUniformLocation(program, "mvpMatrix");
	gl.uniformMatrix4fv(uniformLocation, false, mvpMatrix);

	// draw
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	gl.flush();
	});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>webgl test</title>
	<script id="vs" type="x-shader/x-vertex">
	attribute vec3 position;
	uniform mat4 mvpMatrix;

	void main(void){
	gl_Position = mvpMatrix * vec4(position, 1.0);
	}
	</script>
	<script id="fs" type="x-shader/x-fragment">
	void main(void) {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
	</script>
	<script src="js/gl-matrix.js"></script>
	<script src="main.js"></script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>