<h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; color: rgb(238, 238, 238); font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px; text-align: center; background-color: rgb(43, 43, 43);">WEBGL CODE(2)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px; color: rgb(238, 238, 238); background-color: rgb(43, 43, 43);"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
function initGL(canvas) { try { gl = canvas.getContext(
"experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; }
catch (e) { }
if (!gl) { alert(
"Could not initialise WebGL, sorry :-("); }} </code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
</code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
<section class="present" style="margin: 0px; padding: 20px 0px; border: 0px; font-size: 36px; font: inherit; vertical-align: baseline; position: absolute; width: 900px; z-index: 11; line-height: 1.2em; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); left: -50%; top: -297px; opacity: 1; min-height: auto !important;"><h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px;">WEBGL CODE(3)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; text-align: left; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px;"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Could not initialise shaders"); } gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");} </code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
</code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;"> </code><h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; color: rgb(238, 238, 238); font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px; text-align: center; white-space: normal;">WEBGL CODE(4)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px; color: rgb(238, 238, 238);"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; var indices = [0, 2, 1]; triangleIndexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); triangleVertexColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); triangleVertexColorBuffer.itemSize = 4; triangleVertexColorBuffer.numItems = 3;} </code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;"><h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; color: rgb(238, 238, 238); font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px; text-align: center; white-space: normal; background-color: rgb(43, 43, 43);">WEBGL CODE(5)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px; color: rgb(238, 238, 238); background-color: rgb(43, 43, 43);"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;"> function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0, 0.0, -7.0]); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer); gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT,0); } </code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
</code><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">
</code></pre></code></pre></pre></section><section class="future" style="margin: 0px; padding: 20px 0px; border: 0px; font-size: 36px; font: inherit; vertical-align: baseline; position: absolute; width: 900px; z-index: 10; line-height: 1.2em; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); left: -50%; top: -296.5px; opacity: 0; -webkit-transform: translate3d(100%, 0px, 0px) rotateY(90deg) translate3d(100%, 0px, 0px); min-height: auto !important;"><h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px;">WEBGL CODE(4)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; text-align: left; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px;"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;">function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; var indices = [0, 2, 1]; triangleIndexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); triangleVertexColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); triangleVertexColorBuffer.itemSize = 4; triangleVertexColorBuffer.numItems = 3;} </code></pre></section><section class="future" style="margin: 0px; padding: 20px 0px; border: 0px; font-size: 36px; font: inherit; vertical-align: baseline; position: absolute; width: 900px; z-index: 10; line-height: 1.2em; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); left: -50%; top: -297px; opacity: 0; -webkit-transform: translate3d(100%, 0px, 0px) rotateY(90deg) translate3d(100%, 0px, 0px); min-height: auto !important;"><h2 style="margin: 0px 0px 20px; padding: 0px; border: 0px; font-size: 2.11em; font: inherit; vertical-align: baseline; -webkit-hyphens: auto; word-break: break-word; font-family: 'League Gothic', Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px;">WEBGL CODE(5)</h2><pre style="margin: 15px auto; padding: 0px; border: 0px; font-size: 0.55em; font: inherit; vertical-align: baseline; position: relative; width: 810px; text-align: left; font-family: monospace; line-height: 1.2em; word-wrap: break-word; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px;"><code class="" style="display: block; padding: 5px; background-color: rgb(63, 63, 63); color: rgb(220, 220, 220); margin: 0px; border: 0px; font-size: 18px; font: inherit; vertical-align: baseline; overflow: auto; max-height: 400px;"> function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0, 0.0, -7.0]); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer); gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT,0); } </code></pre></section><section class="future" style="margin: 0px; padding: 20px 0px; border: 0px; font-size: 36px; font: inherit; vertical-align: baseline; position: absolute; width: 900px; z-index: 10; line-height: 1.2em; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); left: -50%; top: -333.5px; opacity: 0; -webkit-transform: translate3d(100%, 0px, 0px) rotateY(90deg) translate3d(100%, 0px, 0px); min-height: auto !important;"><iframe data-src="reveal.js-master/ex/sample.html" src="http://kaidu1982.github.com/2013-jco-webgl/reveal.js-master/ex/sample.html" style="margin: 0px auto; padding: 0px; border-width: 0px; font-size: 36px; font: inherit; vertical-align: baseline; max-width: 100%; max-height: 100%; display: block; background-color: rgb(238, 238, 238); height: 600px; width: 800px;"></iframe></section>
<aside class="controls" style="margin: 0px; padding: 0px; border: 0px; font-size: 36px; font: inherit; vertical-align: baseline; position: fixed; width: 110px; height: 110px; z-index: 30; right: 10px; bottom: 10px; color: rgb(238, 238, 238); font-family: Lato, Times, 'Times New Roman', serif; line-height: 36px; white-space: normal; background-color: rgb(43, 43, 43);">
</aside></code></pre>
댓글 영역
획득법
① NFT 발행
작성한 게시물을 NFT로 발행하면 일주일 동안 사용할 수 있습니다. (최초 1회)
② NFT 구매
다른 이용자의 NFT를 구매하면 한 달 동안 사용할 수 있습니다. (구매 시마다 갱신)
사용법
디시콘에서지갑연결시 바로 사용 가능합니다.