canvas.getContext("webgl")을 통해 webgl 기능을 활용할 수 있습니다. 아래는 MDN에 있는 핵심 사례 코드로 일단 webgl이 되는 것만 보여드리려고 만든 예제입니다 webgl API를 사용하여 그래픽을 하는 것은 개인적으로 공부하세요
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>첫 타이틀</title> <script> var gl; // A global variable for the WebGL context
function start() { var canvas = document.getElementById("glcanvas"); gl = initWebGL(canvas); // Initialize the GL context
// Only continue if WebGL is available and working if (gl) { gl.clearColor(0.0, 255, 0.0, 1.0); // Set clear color to black, fully opaque gl.enable(gl.DEPTH_TEST); // Enable depth testing gl.depthFunc(gl.LEQUAL); // Near things obscure far things gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer. } }
function initWebGL(canvas) { gl = null;
try { // Try to grab the standard context. If it fails, fallback to experimental. gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {}
// If we don't have a GL context, give up now if (!gl) { alert("Unable to initialize WebGL. Your browser may not support it."); gl = null; }
return gl; } </script> </head> <body onload="start()"> <canvas id="glcanvas" width="640" height="480"> Your browser doesn't appear to support the HTML5 <code><canvas></code> element. </canvas> </body> </html>
아래는 MDN에 있는 핵심 사례 코드로 일단 webgl이 되는 것만 보여드리려고 만든 예제입니다
webgl API를 사용하여 그래픽을 하는 것은 개인적으로 공부하세요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첫 타이틀</title>
<script>
var gl; // A global variable for the WebGL context
function start() {
var canvas = document.getElementById("glcanvas");
gl = initWebGL(canvas); // Initialize the GL context
// Only continue if WebGL is available and working
if (gl) {
gl.clearColor(0.0, 255, 0.0, 1.0); // Set clear color to black, fully opaque
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
}
}
function initWebGL(canvas) {
gl = null;
try {
// Try to grab the standard context. If it fails, fallback to experimental.
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// If we don't have a GL context, give up now
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
gl = null;
}
return gl;
}
</script>
</head>
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>
</html>