peace098beat/webgl.sample1.js

## webgl.sample1.js
<!DOCTYPE html>
<html>

<body>
    <style type="text/css">
        body {
            border: 1;
            background-color: gray;
        }

        #c {
            /* 表示サイズ */
            width: 500px;
            height: 500px;
            display: block;
        }
    </style>
    <canvas id="c"></canvas>
    <pre id="debug"></pre>
</body>

</html>


<!--2018-11-18 11:20 -->

<!--
* Vertex Shader
-->
<script type="notjs" id="2d-vertex-shader">

    attribute vec4 a_position; void main(){ gl_Position = a_position; }

</script>

<!--
- Fragment Shader
-->
<script type="notjs" id="2d-flagment-shader">
    precision mediump float;
    void main(){ gl_FragColor = vec4(1,0,0.5,1); }
</script>

<!--
- Main Source
-->
<script type="text/javascript">
    /**
     * デバッグプリント
     */
    console.log = function(text) {
        text = "[DEBUG] " + text + ";";
        let pre = document.getElementById("debug");

        // console.log(text);
        pre.innerHTML += text + "<br>";
    }


    "use strict";
    console.log("main start");
    let canvas = document.getElementById("c");
    let gl = canvas.getContext("webgl");


    canvas = document.getElementById("c");
    canvas.width = 1024; // 描画バッファーのサイズ
    canvas.height = 1024;// 描画バッファのサイズ

    /**
     * シェーダーをコンパイルする
     * ヘルパー関数
     */
    function createShader(gl, type, source) {
        let shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
            return shader;
        }
        else {
            console.log(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }
    }

    let vertexShaderSourceText = document.getElementById("2d-vertex-shader").text;
    let fragmentShaderSourceText = document.getElementById("2d-flagment-shader").text;


    let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSourceText);
    let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceText);

    /**
     * 2つのシェーダをプログラムにリンクする
     */
    function createProgram(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);

        // 例外処理
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (success) {
            console.log("success createProgram");
            return program;
        }
        else {
            console.log(gl.getProgramInfoLog(program));
            gl.deleteProgram(program);
        }
    }

    let program = createProgram(gl, vertexShader, fragmentShader);

    // ↑までが、GLSLのコードをGPUにアップロードするまで

    let positionAttributeLocation = gl.getAttribLocation(program, "a_position");

    let positionBuffer = gl.createBuffer();

    var positions = [
        0, 0,
        0, 0.5,
        0.7, 0,
    ];

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // データをバッファに入れる

    // 描画

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    // 頂点バッファーをbind
    gl.enableVertexAttribArray(positionAttributeLocation); // ON

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    var size = 2; // 2つづつ呼び出す
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0; // 0: = size*sizeof(type);
    var offset = 0; // バッファ先頭から取り出す
    gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

    // 図形の描画
    var primitiveType = gl.TRIANGLES;
    var offset = 0; // 開始のオフセット
    var count = 3; // 頂点の数
    gl.drawArrays(primitiveType, offset, count);


</script>
	<!DOCTYPE html>
	<html>

	<body>
	<style type="text/css">
	body {
	border: 1;
	background-color: gray;
	}

	#c {
	/* 表示サイズ */
	width: 500px;
	height: 500px;
	display: block;
	}
	</style>
	<canvas id="c"></canvas>
	<pre id="debug"></pre>
	</body>

	</html>


	<!--2018-11-18 11:20 -->

	<!--
	* Vertex Shader
	-->
	<script type="notjs" id="2d-vertex-shader">

	attribute vec4 a_position; void main(){ gl_Position = a_position; }

	</script>

	<!--
	- Fragment Shader
	-->
	<script type="notjs" id="2d-flagment-shader">
	precision mediump float;
	void main(){ gl_FragColor = vec4(1,0,0.5,1); }
	</script>

	<!--
	- Main Source
	-->
	<script type="text/javascript">
	/**
	* デバッグプリント
	*/
	console.log = function(text) {
	text = "[DEBUG] " + text + ";";
	let pre = document.getElementById("debug");

	// console.log(text);
	pre.innerHTML += text + "<br>";
	}


	"use strict";
	console.log("main start");
	let canvas = document.getElementById("c");
	let gl = canvas.getContext("webgl");


	canvas = document.getElementById("c");
	canvas.width = 1024; // 描画バッファーのサイズ
	canvas.height = 1024;// 描画バッファのサイズ

	/**
	* シェーダーをコンパイルする
	* ヘルパー関数
	*/
	function createShader(gl, type, source) {
	let shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
	if (success) {
	return shader;
	}
	else {
	console.log(gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	}
	}

	let vertexShaderSourceText = document.getElementById("2d-vertex-shader").text;
	let fragmentShaderSourceText = document.getElementById("2d-flagment-shader").text;


	let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSourceText);
	let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceText);

	/**
	* 2つのシェーダをプログラムにリンクする
	*/
	function createProgram(gl, vertexShader, fragmentShader) {
	let program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);

	// 例外処理
	let success = gl.getProgramParameter(program, gl.LINK_STATUS);
	if (success) {
	console.log("success createProgram");
	return program;
	}
	else {
	console.log(gl.getProgramInfoLog(program));
	gl.deleteProgram(program);
	}
	}

	let program = createProgram(gl, vertexShader, fragmentShader);

	// ↑までが、GLSLのコードをGPUにアップロードするまで

	let positionAttributeLocation = gl.getAttribLocation(program, "a_position");

	let positionBuffer = gl.createBuffer();

	var positions = [
	0, 0,
	0, 0.5,
	0.7, 0,
	];

	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // データをバッファに入れる

	// 描画

	gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

	gl.clearColor(0, 0, 0, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);

	gl.useProgram(program);

	// 頂点バッファーをbind
	gl.enableVertexAttribArray(positionAttributeLocation); // ON

	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	var size = 2; // 2つづつ呼び出す
	var type = gl.FLOAT;
	var normalize = false;
	var stride = 0; // 0: = size*sizeof(type);
	var offset = 0; // バッファ先頭から取り出す
	gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

	// 図形の描画
	var primitiveType = gl.TRIANGLES;
	var offset = 0; // 開始のオフセット
	var count = 3; // 頂点の数
	gl.drawArrays(primitiveType, offset, count);


	</script>