Created
June 25, 2016 13:05
-
-
Save baobao/8cceb401e3afb63165146d9f6b0ade37 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- | |
生WebGL | |
--> | |
<html> | |
<head> | |
<title>Hello World Raw WebGL.</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style> | |
* { | |
margin: 0px; | |
padding: 0px; | |
} | |
html, body { | |
text-align: center; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
canvas { | |
margin: 0px auto; | |
} | |
</style> | |
<script src="script.js"></script> | |
<script id="vs" type="x-shader/x-vertex"> | |
attribute vec3 position; | |
void main () | |
{ | |
// 1. JavaScript側から送られた頂点データをそのままgl_Positionに渡す | |
gl_Position = vec4(position, 1.0); | |
} | |
</script> | |
<script id="fs" type="x-shader/x-fragment"> | |
precision mediump float; | |
void main () | |
{ | |
// 2.処理する座標を白色で塗りつぶす | |
gl_FragColor = vec4 (vec3 (1.0), 1.0); | |
} | |
</script> | |
</head> | |
<body><canvas id="canvas"></canvas></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 生WebGLで三角形を描画する | |
* | |
* # 処理の流れ | |
* 1. CanvasDOM取得 & WebGLコンテキストを取得とセットアップ | |
* 2. 頂点シェーダコンパイル、フラグメントシェーダコンパイル | |
* 3. WebGLProgramの生成、シェーダのアタッチとリンク、有効化 | |
* 4. 三角ポリゴンの頂点バッファ生成 | |
* 5. 背景描画 | |
* 6. ビューポートの設定 | |
* 7. 頂点属性を有効化してデータを注入 | |
* 8. 描画する | |
* | |
*/ | |
window.onload = function () | |
{ | |
// ======== Start 1.CanvasDOM取得 & WebGLコンテキストを取得とセットアップ ======== | |
var key = 'canvas'; | |
var canvas = document.getElementById (key); | |
var gl = canvas.getContext('webgl', null); | |
var size = Math.min(window.innerWidth, window.innerHeight); | |
canvas.width = size; | |
canvas.height = size; | |
// ======== End 1.CanvasDOM取得 & WebGLコンテキストを取得とセットアップ ======== | |
// ======== Start 2.頂点シェーダコンパイル、フラグメントシェーダコンパイル ======== | |
var vsElement = document.getElementById ('vs'); | |
var vs = null; | |
if (vsElement.type == 'x-shader/x-vertex') { | |
vs = gl.createShader(gl.VERTEX_SHADER); | |
} | |
// シェーダオブジェクトに頂点シェーダーを代入 | |
gl.shaderSource(vs, vsElement.text); | |
// 頂点シェーダをコンパイル | |
gl.compileShader(vs); | |
var fsElement = document.getElementById('fs'); | |
var fs = null; | |
if (fsElement.type == 'x-shader/x-fragment') { | |
fs = gl.createShader(gl.FRAGMENT_SHADER); | |
} | |
// シェーダオブジェクトにフラグメントシェーダを代入 | |
gl.shaderSource(fs, fsElement.text); | |
// フラグメントシェーダをコンパイル | |
gl.compileShader (fs); | |
// ======== End 2.頂点シェーダコンパイル、フラグメントシェーダコンパイル ======== | |
// ======== Start 3.WebGLProgramの生成、シェーダのアタッチとリンク、有効化 ======== | |
// WebGLProgram | |
var program = gl.createProgram(); | |
// WebGLProgramに頂点シェーダーを紐付ける | |
gl.attachShader(program, vs); | |
// WebGLProgramにフラグメントシェーダーを紐付ける | |
gl.attachShader(program, fs); | |
// WebGLProgramに紐付けられた、頂点シェーダとフラグメントシェーダをWebGLProgramにリンクさせる | |
gl.linkProgram (program); | |
// WebGLProgramのパラメータを取得する | |
if (gl.getProgramParameter(program, gl.LINK_STATUS)) { | |
// WebGLProgramを有効化する | |
gl.useProgram(program); | |
}else { | |
console.log (gl.getProgramInfoLog(program)); | |
return; | |
} | |
// ======== End 3.WebGLProgramの生成、シェーダのアタッチとリンク、有効化 ======== | |
// ======== Start 4.三角ポリゴンの頂点バッファ生成 ======== | |
// 三角ポリゴンの頂点バッファを生成 | |
// 空のバッファ生成 | |
var positionBuffer = gl.createBuffer(); | |
// 生成したバッファをバインドする | |
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); | |
var position = [ | |
0, 0.5, 0, | |
-0.5, -0.5, 0, | |
0.5 ,-0.5, 0 | |
]; | |
// バインドされたバッファに三角ポリゴンのデータをセットする | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array (position), gl.STATIC_DRAW); | |
// バインド解除 | |
gl.bindBuffer(gl.ARRAY_BUFFER, null); | |
// ======== End 4.三角ポリゴンの頂点バッファ生成 ======== | |
// 描画開始 | |
render (); | |
function render () | |
{ | |
// ======== Start 5.背景描画 ======== | |
// 背景描画 | |
gl.clearColor (0.8, 0.8, 0.8, 1.0); | |
// バッファをクリアする | |
gl.clear (gl.COLOR_BUFFER_BIT); | |
// ======== End 5.背景描画 ======== | |
// ======== Start 6.ビューポートの設定 ======== | |
gl.viewport(0, 0, size, size); | |
// ======== End 6.ビューポートの設定 ======== | |
// ======== Start 7.頂点属性を有効化してデータを注入 ======== | |
// 三角ポリゴン頂点バッファをバインド | |
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); | |
// 頂点シェーダのアドレスを保持 | |
var positionAddress = gl.getAttribLocation(program, "position"); | |
// 頂点属性を有効化する | |
gl.enableVertexAttribArray(positionAddress); | |
// 頂点属性に頂点データを設定する | |
gl.vertexAttribPointer(positionAddress, 3, gl.FLOAT, false, 0, 0); | |
// ======== End 7.頂点属性を有効化してデータを注入 ======== | |
// ======== Start 8.描画する ======== | |
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); | |
// ======== End 8.描画する ======== | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment