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
<html> | |
<head> | |
<title>WebGL</title> | |
<script src="script.js" type="text/javascript"></script> | |
<script src="webgl-debug.js" type="text/javascript"></script> | |
<script id="shader-vs" type="x-shader/x-vertex"> | |
attribute vec3 aVertexPosition; | |
void main(){ | |
gl_Position = vec4(aVertexPosition, 1.0); | |
} | |
</script> | |
<script id="shader-fs" type="x-shader/x-fragment"> | |
precision mediump float; | |
void main(){ | |
gl_FragColor = vec4(1.0,1.0,1.0,1.0); | |
} | |
</script> | |
</head> | |
<body onload="startup();"> | |
<canvas id="myGLCanvas" width="500" height="500"></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
var gl; | |
var canvas; | |
var shaderProgram; | |
var vertexBuffer; | |
function createGLContext(canvas){ | |
var context = null; | |
context = canvas.getContext("webgl"); | |
if(context){ | |
context.viewportWidth = canvas.width; | |
context.viewportHeight = canvas.height; | |
} else { | |
alert("Failed to create WebGL context"); | |
} | |
return context; | |
} | |
function loadShaderFromDOM(id){ | |
var shaderScript = document.getElementById(id); | |
if(!shaderScript){ | |
return null; | |
} | |
var shaderSource = ""; | |
var currentChild = shaderScript.firstChild; | |
while(currentChild){ | |
if(currentChild.nodeType == 3){ | |
shaderSource += currentChild.textContent; | |
} | |
currentChild = currentChild.nextSibling; | |
} | |
var shader; | |
if(shaderScript.type == "x-shader/x-fragment"){ | |
shader = gl.createShader(gl.FRAGMENT_SHADER); | |
}else if(shaderScript.type == "x-shader/x-vertex"){ | |
shader = gl.createShader(gl.VERTEX_SHADER); | |
}else{ | |
return null; | |
} | |
gl.shaderSource(shader,shaderSource); | |
gl.compileShader(shader); | |
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){ | |
alert("Error compiling shader " + gl.getShaderInfoLog(shader)); | |
return null; | |
} | |
return shader; | |
} | |
function setupShaders(){ | |
var vertexShader = loadShaderFromDOM("shader-vs"); | |
var fragmentShader = loadShaderFromDOM("shader-fs"); | |
shaderProgram = gl.createProgram(); | |
gl.attachShader(shaderProgram,vertexShader); | |
gl.attachShader(shaderProgram,fragmentShader); | |
gl.linkProgram(shaderProgram); | |
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){ | |
alert("Failed to setup shaders"); | |
} | |
gl.useProgram(shaderProgram); | |
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram,"aVertexPosition"); | |
} | |
function setupBuffers(){ | |
vertexBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); | |
var triangleVertices = [ | |
0.0, 0.5, 0.0, | |
-0.5,-0.5, 0.0, | |
0.5,-0.5, 0.0 | |
]; | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),gl.STATIC_DRAW); | |
vertexBuffer.itemSize = 3; | |
vertexBuffer.numberOfItems = 3; | |
} | |
function draw() { | |
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight); | |
gl.clear(gl.COLOR_BUFFER_BIT); | |
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertexBuffer.itemSize, gl.FLOAT, false, 0, 0); | |
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); | |
gl.drawArrays(gl.TRIANGLES,0,vertexBuffer.numberOfItems); | |
} | |
function startup(){ | |
canvas = document.getElementById("myGLCanvas"); | |
gl = createGLContext(canvas); | |
if(window.WebGLDebugUtils){ | |
gl = WebGLDebugUtils.makeDebugContext(gl); | |
} | |
setupShaders(); | |
setupBuffers(); | |
gl.clearColor(0.0,0.0,0.0,1.0); | |
draw(); | |
} | |
0 件のコメント:
コメントを投稿