diff options
Diffstat (limited to 'files/ko/web/api/webgl_api/by_example')
8 files changed, 1079 insertions, 0 deletions
diff --git a/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html new file mode 100644 index 0000000000..c79b2f508d --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html @@ -0,0 +1,110 @@ +--- +title: 클릭을 통한 청소 +slug: Web/API/WebGL_API/By_example/Clearing_by_clicking +translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p> + +<div id="clearing-by-clicking"> +<div class="summary"> +<p>어떻게 유저와 그래픽 기능들과의 상호작용을 결합시킬까. 유저가 클릭을 할 때 랜덤의 색을 가진 랜더링 컨텍스트를 청소하는 것.</p> +</div> + +<p>{{EmbedLiveSample("clearing-by-clicking-source",660,425)}}</p> + +<div id="clearing-by-clicking-intro"> +<h3 id="랜덤_색을_가진_랜더링_컨텍스트를_청소">랜덤 색을 가진 랜더링 컨텍스트를 청소</h3> + +<p>이 간단한 예시는 어떻게 유저 인터페이스와 {{Glossary("WebGL")}}를 결합할지에 대한 설명을 제공합니다. 유저가 캔버스 혹은 버튼을 클릭할 때 마다, 캔버스는 랜덤으로 선택된 색으로 초기화됩니다.</p> + +<p>어떻게 내장된 {{Glossary("WebGL")}} 기능이 이벤트 핸들러의 내부를 부르는 지를 주목하세요. </p> +</div> + +<div id="clearing-by-clicking-source"> +<pre class="brush: html"><p>A very simple WebGL program that still shows some color and + user interaction.</p> +<p>You can repeatedly click the empty canvas or the button below + to change color.</p> +<canvas id="canvas-view">Your browser does not seem to support + HTML5 canvas.</canvas> +<button id="color-switcher">Press here to switch color</button> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + display : block; + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : inline-block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> + +<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) { + "use strict" + + // Cleaning after ourselves. The event handler removes + // itself, because it only needs to run once. + window.removeEventListener(evt.type, setupWebGL, false); + + // Adding the same click event handler to both canvas and + // button. + var canvas = document.querySelector("#canvas-view"); + var button = document.querySelector("#color-switcher"); + canvas.addEventListener("click", switchColor, false); + button.addEventListener("click", switchColor, false); + + // A variable to hold the WebGLRenderingContext. + var gl; + + // The click event handler. + function switchColor () { + // Referring to the externally defined gl variable. + // If undefined, try to obtain the WebGLRenderingContext. + // If failed, alert user of failure. + // Otherwise, initialize the drawing buffer (the viewport). + if (!gl) { + gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + if (!gl) { + alert("Failed to get WebGL context.\n" + + "Your browser or device may not support WebGL."); + return; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + } + // Get a random color value using a helper function. + var color = getRandomColor(); + // Set the clear color to the random color. + gl.clearColor(color[0], color[1], color[2], 1.0); + // Clear the context with the newly set color. This is + // the function call that actually does the drawing. + gl.clear(gl.COLOR_BUFFER_BIT); + } + + // Random color helper function. + function getRandomColor() { + return [Math.random(), Math.random(), Math.random()]; + } + +}, false); +</pre> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html new file mode 100644 index 0000000000..087a614d5d --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html @@ -0,0 +1,72 @@ +--- +title: WebGL 찾기 +slug: Web/API/WebGL_API/By_example/Detect_WebGL +translation_of: Web/API/WebGL_API/By_example/Detect_WebGL +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}}</p> + +<div id="detect-webgl"> +<div class="summary"> +<p>이 예시는 어떻게 {{Glossary("WebGL")}} 랜더링 컨텐츠를 찾고, 유저에게 결과를 보고할지를 보여줍니다.</p> +</div> + +<p>{{EmbedLiveSample("detect-webgl-source",660,150)}}</p> + +<div id="detect-webgl-intro"> +<h3 id="기능-검색_WebGl">기능-검색 WebGl</h3> + +<p>이 첫 예시에서, 우리는 브라우저가 {{Glossary("WebGL")}}를 지원하는지 아닌 지를 확인합니다. 우리는 {{domxref("HTMLCanvasElement","canvas")}} element로 부터 {{domxref("WebGLRenderingContext","WebGL rendering context","",1)}}을 얻기 위하여 노력합니다. {{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}는 당신이 설정하고 그래픽 기계의 상태를 쿼리하고, WebGl에 데이터를 전송하고, 그리기 명령어들을 실행할 수 있는 인터페이스입니다.</p> + +<p>한 문장 인터페이스에서 그래픽 기계의 상태를 저장하는 것은 {{Glossary("WebGL")}}에 고유하지 않습니다. 이것은 또한 다른 그래픽 {̣{Glossary("API")}}, {{domxref("CanvasRenderingContext2D","canvas 2D rendering context", "", 1)}}에 의해 행해집니다. 하지만 특성과 당신이 만드는 변수들은 각 {̣{Glossary("API")}}에서 다를 수 있습니다.</p> +</div> + +<div id="detect-webgl-source"> +<pre class="brush: html"><p>[ Here would go the result of WebGL feature detection ]</p> +<button>Press here to detect WebGLRenderingContext</button> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +button { + display : block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> + +<pre class="brush: js">// Run everything inside window load event handler, to make sure +// DOM is fully loaded and styled before trying to manipulate it. +window.addEventListener("load", function() { + var paragraph = document.querySelector("p"), + button = document.querySelector("button"); + // Adding click event handler to button. + button.addEventListener("click", detectWebGLContext, false); + function detectWebGLContext () { + // Create canvas element. The canvas is not added to the + // document itself, so it is never displayed in the + // browser window. + var canvas = document.createElement("canvas"); + // Get WebGLRenderingContext from canvas element. + var gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + // Report the result. + if (gl && gl instanceof WebGLRenderingContext) { + paragraph.innerHTML = + "Congratulations! Your browser supports WebGL."; + } else { + paragraph.innerHTML = "Failed to get WebGL context. " + + "Your browser or device may not support WebGL."; + } + } +}, false); +</pre> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html new file mode 100644 index 0000000000..45541f1a0b --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html @@ -0,0 +1,168 @@ +--- +title: Hello GLSL +slug: Web/API/WebGL_API/By_example/Hello_GLSL +translation_of: Web/API/WebGL_API/By_example/Hello_GLSL +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}}</p> + +<div id="hello-glsl"> +<div class="summary"> +<p id="hello-glsl-summary">매우 간단한 색이 있는 단단한 사각형을 그려주는 쉐이더 프로그램</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 이 예시는 대부분 모든 최신의 데스크탑 브라우저에서 동작합니다. 하지만 어떤 모바일 혹은 낡은 브라우저에서는 동작하지 않습니다. 만약 캔버스가 공백인 상태로 남아있다면, 당신은 정확히 똑같은 것을 그리는 다음 예시의 결과를 확인하실 수 있습니다. 하지만 다음으로 넘어가기 전에, 여기서 설명과 코드를 읽고 가는 것을 기억하세요</p> +</div> + +<p>{{EmbedLiveSample("hello-glsl-source",660,425)}}</p> + +<div id="hello-glsl-intro"> +<h3 id="Hello_World_프로그램_in_GLSL">Hello World 프로그램 in GLSL</h3> + +<p>매우 간단한 첫 쉐이더 프로그램</p> +</div> + +<div id="hello-glsl-source"> +<div class="hidden"> +<pre class="brush: html"><p>Hello World! Hello GLSL!</p> +</pre> + +<pre class="brush: html"><canvas>Your browser does not seem to support + HTML5 canvas.</canvas> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> +</div> + +<pre class="brush: html"><script type="x-shader/x-vertex" id="vertex-shader"> +#version 100 +void main() { + gl_Position = vec4(0.0, 0.0, 0.0, 1.0); + gl_PointSize = 64.0; +} +</script> +</pre> + +<pre class="brush: html"><script type="x-shader/x-fragment" id="fragment-shader"> +#version 100 +void main() { + gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0); +} +</script> +</pre> + +<div class="hidden"> +<pre class="brush: js">;(function(){ +</pre> +</div> + +<pre class="brush: js" id="livesample-js">"use strict" +window.addEventListener("load", setupWebGL, false); +var gl, + program; +function setupWebGL (evt) { + window.removeEventListener(evt.type, setupWebGL, false); + if (!(gl = getRenderingContext())) + return; + + var source = document.querySelector("#vertex-shader").innerHTML; + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader,source); + gl.compileShader(vertexShader); + source = document.querySelector("#fragment-shader").innerHTML + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader,source); + gl.compileShader(fragmentShader); + program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + gl.detachShader(program, vertexShader); + gl.detachShader(program, fragmentShader); + gl.deleteShader(vertexShader); + gl.deleteShader(fragmentShader); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + var linkErrLog = gl.getProgramInfoLog(program); + cleanup(); + document.querySelector("p").innerHTML = + "Shader program did not link successfully. " + + "Error log: " + linkErrLog; + return; + } + + initializeAttributes(); + + gl.useProgram(program); + gl.drawArrays(gl.POINTS, 0, 1); + + cleanup(); +} + +var buffer; +function initializeAttributes() { + gl.enableVertexAttribArray(0); + buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0); +} + +function cleanup() { +gl.useProgram(null); +if (buffer) + gl.deleteBuffer(buffer); +if (program) + gl.deleteProgram(program); +} +</pre> + +<div class="hidden"> +<pre class="brush: js">function getRenderingContext() { + var canvas = document.querySelector("canvas"); + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + var gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + if (!gl) { + var paragraph = document.querySelector("p"); + paragraph.innerHTML = "Failed to get WebGL context." + + "Your browser or device may not support WebGL."; + return null; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + return gl; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">})(); +</pre> +</div> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html new file mode 100644 index 0000000000..6d4ad29fe1 --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html @@ -0,0 +1,181 @@ +--- +title: Hello vertex attributes +slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes +translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}}</p> + +<div id="hello-vertex-attributes"> +<div class="summary"> +<p id="hello-vertex-attributes-summary">쉐이더 프로그래밍과 유저 인터페이스를 정점 속성을 이용하여 합치기.</p> +</div> + +<p>{{EmbedLiveSample("hello-vertex-attributes-source",660,425)}}</p> + +<div id="hello-vertex-attributes-intro"> +<h3 id="Hello_World_program_in_GLSL">Hello World program in GLSL</h3> + +<p>어떻게 GPU 메모리에 데이터를 저장함으로써 쉐이더 프로그램에 입력 값을 넣을 수 있을까? </p> +</div> + +<div id="hello-vertex-attributes-source"> +<div class="hidden"> +<pre class="brush: html"><p>First encounter with attributes and sending data to GPU. Click +on the canvas to change the horizontal position of the square.</p> +</pre> + +<pre class="brush: html"><canvas>Your browser does not seem to support + HTML5 canvas.</canvas> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> +</div> + +<pre class="brush: html"><script type="x-shader/x-vertex" id="vertex-shader"> +#version 100 +precision highp float; + +attribute float position; + +void main() { + gl_Position = vec4(position, 0.0, 0.0, 1.0); + gl_PointSize = 64.0; +} +</script> +</pre> + +<pre class="brush: html"><script type="x-shader/x-fragment" id="fragment-shader"> +#version 100 +precision mediump float; +void main() { + gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0); +} +</script> +</pre> + +<div class="hidden"> +<pre class="brush: js">;(function(){ +</pre> +</div> + +<pre class="brush: js" id="livesample-js">"use strict" +window.addEventListener("load", setupWebGL, false); +var gl, + program; +function setupWebGL (evt) { + window.removeEventListener(evt.type, setupWebGL, false); + if (!(gl = getRenderingContext())) + return; + + var source = document.querySelector("#vertex-shader").innerHTML; + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader,source); + gl.compileShader(vertexShader); + source = document.querySelector("#fragment-shader").innerHTML + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader,source); + gl.compileShader(fragmentShader); + program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + gl.detachShader(program, vertexShader); + gl.detachShader(program, fragmentShader); + gl.deleteShader(vertexShader); + gl.deleteShader(fragmentShader); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + var linkErrLog = gl.getProgramInfoLog(program); + cleanup(); + document.querySelector("p").innerHTML = + "Shader program did not link successfully. " + + "Error log: " + linkErrLog; + return; + } + + initializeAttributes(); + gl.useProgram(program); + gl.drawArrays(gl.POINTS, 0, 1); + + document.querySelector("canvas").addEventListener("click", + function (evt) { + var clickXrelativToCanvas = + evt.pageX - evt.target.offsetLeft; + var clickXinWebGLCoords = + 2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2) + / gl.drawingBufferWidth; + gl.bufferData(gl.ARRAY_BUFFER, + new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW); + gl.drawArrays(gl.POINTS, 0, 1); + }, false); +} + +var buffer; +function initializeAttributes() { + gl.enableVertexAttribArray(0); + buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW); + gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0); +} + +window.addEventListener("beforeunload", cleanup, true); +function cleanup() { + gl.useProgram(null); + if (buffer) + gl.deleteBuffer(buffer); + if (program) + gl.deleteProgram(program); +} +</pre> + +<div class="hidden"> +<pre class="brush: js">function getRenderingContext() { + var canvas = document.querySelector("canvas"); + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + var gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + if (!gl) { + var paragraph = document.querySelector("p"); + paragraph.innerHTML = "Failed to get WebGL context." + + "Your browser or device may not support WebGL."; + return null; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + return gl; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">})(); +</pre> +</div> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/index.html b/files/ko/web/api/webgl_api/by_example/index.html new file mode 100644 index 0000000000..c7fd3dcd4a --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/index.html @@ -0,0 +1,83 @@ +--- +title: WebGL by example +slug: Web/API/WebGL_API/By_example +tags: + - Beginner + - Example + - Graphics + - Learn + - NeedsTranslation + - TopicStub + - WebGL +translation_of: Web/API/WebGL_API/By_example +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<div id="webgl-by-example"> +<div class="summary"> +<p><em>WebGL by example</em> is a series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</p> +</div> + +<div id="webgl-by-example-big-list"> +<h2 id="Examples_by_topic">Examples by topic</h2> + +<p>The examples are sorted in order of increasing difficulty. But rather than just presenting them in a single long list, they are additionally divided into topics. Sometimes we revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at intermediate and advanced levels.</p> + +<p>Instead of trying to juggle shaders, geometry, and working with {{Glossary("GPU")}} memory, already in the first program, the examples here explore WebGL in an incremental way. We believe that it leads to a more effective learning experience and ultimately a deeper understanding of the underlying concepts.</p> + +<p>Explanations about the examples are found in both the main text and in comments within the code. You should read all comments, because more advanced examples could not repeat comments about parts of the code that were previously explained.</p> + +<div> +<h3 id="Getting_to_know_the_rendering_context">Getting to know the rendering context</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Detect_WebGL">Detect WebGL</a></dt> + <dd>This example demonstrates how to detect a {{Glossary("WebGL")}} rendering context and reports the result to the user.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_with_colors">Clearing with colors</a></dt> + <dd>How to clear the rendering context with a solid color.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_by_clicking">Clearing by clicking</a></dt> + <dd>How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Simple_color_animation">Simple color animation</a></dt> + <dd>A very basic color animation, done by clearing the {{Glossary("WebGL")}} drawing buffer with a different random color every second.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Color_masking">Color masking</a></dt> + <dd>Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Basic_scissoring">Basic scissoring</a></dt> + <dd>How to draw simple rectangles and squares with scissoring operations.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Canvas_size_and_WebGL">Canvas size and WebGL</a></dt> + <dd>The example explores the effect of setting (or not setting) the canvas size to its element size in {{Glossary("CSS")}} pixels, as it appears in the browser window.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Boilerplate_1">Boilerplate 1</a></dt> + <dd>The example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Scissor_animation">Scissor animation</a></dt> + <dd>Some animation fun with scissoring and clearing operations.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Raining_rectangles">Raining rectangles</a></dt> + <dd>A simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.</dd> +</dl> +</div> + +<div> +<h3 id="Shader_programming_basics">Shader programming basics</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_GLSL">Hello GLSL</a></dt> + <dd>A very basic shader program that draws a solid color square.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_vertex_attributes">Hello vertex attributes</a></dt> + <dd>Combining shader programming and user interaction through vertex attributes.</dd> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Textures_from_code">Textures from code</a></dt> + <dd>A simple demonstration of procedural texturing with fragment shaders.</dd> +</dl> +</div> + +<div> +<h3 id="Miscellaneous_advanced_examples">Miscellaneous advanced examples</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/WebGL/By_example/Video_textures">Video textures</a></dt> + <dd>This example demonstrates how to use video files as textures.</dd> +</dl> +</div> +</div> +</div> + +<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html new file mode 100644 index 0000000000..1b3748c9bc --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html @@ -0,0 +1,166 @@ +--- +title: 애니메이션 잘라내기 +slug: Web/API/WebGL_API/By_example/Scissor_animation +translation_of: Web/API/WebGL_API/By_example/Scissor_animation +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p> + +<div id="scissor-animation"> +<div class="summary"> +<p>활동을 청소하고 잘라내는 어떤 애니메이션 장난</p> +</div> + +<p>{{EmbedLiveSample("scissor-animation-source",660,425)}}</p> + +<div> +<h3 id="애니메이션_잘라내기">애니메이션 잘라내기</h3> + +<p>이번 예시에서는, 우리는 사각형을 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 와{{domxref("WebGLRenderingContext.clear()","clear()")}} 을 이용하여 그려볼 것입니다. 우리는 다시 애니메이션 루프를 타이머를 이용하여 구축할 것입니다. 이번에는 매 프레임(우리는 프레임 비율을 대강 매 17ms 마다 설정했습니다.) 대마다 업데이트 되는 사각형(잘라내는 영역)의 경우임을 주목하세요.</p> + +<p>반대로, 사각형의 색 ({{domxref("WebGLRenderingContext.clearColor()","clearColor")}}으로 설정되는)은 오직 새로운 사각형이 생성될 때만 업데이트 됩니다. 이것은 상태 머신으로써 {{Glossary("WebGL")}} 을 보여줄 좋은 데모입니다. 각 사각형에 대하여 우리는 그것의 색을 결정하고, 매 프레임마다 위치를 결정합니다. WebGl의 깨끗한 색 상태는 새로운 사각형이 생성되어 우리가 그것을 다시 바꿀 때까지 설정 값으로 남아있습니다.</p> +</div> + +<div id="scissor-animation-source"> +<div class="hidden"> +<pre class="brush: html"><p>WebGL animation by clearing the drawing buffer with solid +color and applying scissor test.</p> +<button id="animation-onoff"> + Press here to +<strong>[verb goes here]</strong> + the animation</button> +</pre> + +<pre class="brush: html"><canvas>Your browser does not seem to support + HTML5 canvas.</canvas> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + display : block; + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">;(function(){ +</pre> +</div> + +<pre class="brush: js" id="livesample-js">"use strict" +window.addEventListener("load", setupAnimation, false); +// Variables to hold the WebGL context, and the color and +// position of animated squares. +var gl, + color = getRandomColor(), + position; + +function setupAnimation (evt) { + window.removeEventListener(evt.type, setupAnimation, false); + if (!(gl = getRenderingContext())) + return; + + gl.enable(gl.SCISSOR_TEST); + gl.clearColor(color[0], color[1], color[2], 1.0); + // Unlike the browser window, vertical position in WebGL is + // measured from bottom to top. In here we set the initial + // position of the square to be at the top left corner of the + // drawing buffer. + position = [0, gl.drawingBufferHeight]; + + var button = document.querySelector("button"); + var timer; + function startAnimation(evt) { + button.removeEventListener(evt.type, startAnimation, false); + button.addEventListener("click", stopAnimation, false); + document.querySelector("strong").innerHTML = "stop"; + timer = setInterval(drawAnimation, 17); + drawAnimation(); + } + function stopAnimation(evt) { + button.removeEventListener(evt.type, stopAnimation, false); + button.addEventListener("click", startAnimation, false); + document.querySelector("strong").innerHTML = "start"; + clearInterval(timer); + } + stopAnimation({type: "click"}); +} + +// Variables to hold the size and velocity of the square. +var size = [60, 60], + velocity = 3.0; +function drawAnimation () { + gl.scissor(position[0], position[1], size[0] , size[1]); + gl.clear(gl.COLOR_BUFFER_BIT); + // Every frame the vertical position of the square is + // decreased, to create the illusion of movement. + position[1] -= velocity; + // When the sqaure hits the bottom of the drawing buffer, + // we override it with new square of different color and + // velocity. + if (position[1] < 0) { + // Horizontal position chosen randomly, and vertical + // position at the top of the drawing buffer. + position = [ + Math.random()*(gl.drawingBufferWidth - size[0]), + gl.drawingBufferHeight + ]; + // Random velocity between 1.0 and 7.0 + velocity = 1.0 + 6.0*Math.random(); + color = getRandomColor(); + gl.clearColor(color[0], color[1], color[2], 1.0); + } +} + +function getRandomColor() { + return [Math.random(), Math.random(), Math.random()]; +} +</pre> + +<div class="hidden"> +<pre class="brush: js">function getRenderingContext() { + var canvas = document.querySelector("canvas"); + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + var gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + if (!gl) { + var paragraph = document.querySelector("p"); + paragraph.innerHTML = "Failed to get WebGL context." + + "Your browser or device may not support WebGL."; + return null; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + return gl; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">})(); +</pre> +</div> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html new file mode 100644 index 0000000000..a2e70de77c --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html @@ -0,0 +1,125 @@ +--- +title: 간단한 색깔 애니메이션 +slug: Web/API/WebGL_API/By_example/Simple_color_animation +translation_of: Web/API/WebGL_API/By_example/Simple_color_animation +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}}</p> + +<div id="simple-color-animation"> +<div class="summary"> +<p>{{Glossary("WebGL")}} 를 청소함으로써 매 초 마다 랜덤 색이 버퍼에 그려지는 매우 기본적인 색깔 애니메이션.</p> +</div> + +<p>{{EmbedLiveSample("simple-color-animation-source",660,425)}}</p> + +<div id="simple-color-animation-intro"> +<h3 id="청소_컬러_애니메이션">청소 & 컬러 애니메이션</h3> + +<p>이 예시는 유저 인터페이스 뿐만 아니라, {{Glossary("WebGL")}}와 함께 간단한 컬러 애니메이션 설명을 제공합니다. 유저는 버튼을 클릭함으로써, 애니메이션을 시작하고, 종료하고, 다시시작할 수 있습니다.</p> + +<p>이번에 우리는 이벤트 핸들로 내부에서 {{Glossary("WebGL")}} 함수 콜을 넣을 것입니다. 클릭 이벤트 핸들러는 추가적으로 시작하고 멈추는 기본적인 유저 상호작용을 가능하게 합니다. 타이머와 타이머 핸들러 기능은 애니메이션 반복을 구축합니다. 애니메이션 반복은 일정한 주기로 실행되는 그리기 명령의 집합입니다.(일반적으로 모든 프레임; 이 경우 초당 1번)</p> +</div> + +<div id="simple-color-animation-source"> +<pre class="brush: html"><p>A simple WebGL program that shows color animation.</p> +<p>You can click the button below to toggle the + color animation on or off.</p> +<canvas id="canvas-view">Your browser does not seem to support + HTML5 canvas.</canvas> +<button id="animation-onoff"> + Press here to +<strong>[verb goes here]</strong> + the animation +</button> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + display : block; + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : inline-block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> + +<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) { + "use strict" + window.removeEventListener(evt.type, setupAnimation, false); + + // A variable to hold a timer that drives the animation. + var timer; + + // Click event handlers. + var button = document.querySelector("#animation-onoff"); + var verb = document.querySelector("strong"); + function startAnimation(evt) { + button.removeEventListener(evt.type, startAnimation, false); + button.addEventListener("click", stopAnimation, false); + verb.innerHTML="stop"; + // Setup animation loop by redrawing every second. + timer = setInterval(drawAnimation, 1000); + // Give immediate feedback to user after clicking, by + // drawing one animation frame. + drawAnimation(); + } + function stopAnimation(evt) { + button.removeEventListener(evt.type, stopAnimation, false); + button.addEventListener("click", startAnimation, false); + verb.innerHTML="start"; + // Stop animation by clearing the timer. + clearInterval(timer); + } + // Call stopAnimation() once to setup the initial event + // handlers for canvas and button. + stopAnimation({type: "click"}); + + var gl; + function drawAnimation () { + if (!gl) { + var canvas = document.getElementById("canvas-view"); + gl = canvas.getContext("webgl") + ||canvas.getContext("experimental-webgl"); + if (!gl) { + clearInterval(timer); + alert("Failed to get WebGL context.\n" + + "Your browser or device may not support WebGL."); + return; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + } + + // Get a random color value using a helper function. + var color = getRandomColor(); + // Set the WebGLRenderingContext clear color to the + // random color. + gl.clearColor(color[0], color[1], color[2], 1.0); + // Clear the context with the newly set color. + gl.clear(gl.COLOR_BUFFER_BIT); + } + + // Random color helper function. + function getRandomColor() { + return [Math.random(), Math.random(), Math.random()]; + } +}, false); +</pre> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}}</p> diff --git a/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html new file mode 100644 index 0000000000..75b7a68eb0 --- /dev/null +++ b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html @@ -0,0 +1,174 @@ +--- +title: 코드에서의 텍스쳐 +slug: Web/API/WebGL_API/By_example/Textures_from_code +translation_of: Web/API/WebGL_API/By_example/Textures_from_code +--- +<div>{{draft}} {{IncludeSubnav("/en-US/Learn")}}</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}}</p> + +<div id="textures-from-code"> +<div class="summary"> +<p id="textures-from-code-summary">단편화된 쉐이더들과 함께 순차적으로 보여주는 간단한 데모</p> +</div> + +<p>{{EmbedLiveSample("textures-from-code-source",660,425)}}</p> + +<div id="textures-from-code-intro"> +<h3 id="코드를_이용해_텍스쳐를_그리기">코드를 이용해 텍스쳐를 그리기</h3> + +<p>Texturing a point sprite with calculations done per-pixel in the fragment shader.</p> +</div> + +<div id="textures-from-code-source"> +<div class="hidden"> +<pre class="brush: html"><p>Texture from code. Simple demonstration + of procedural texturing</p> +</pre> + +<pre class="brush: html"><canvas>Your browser does not seem to support + HTML5 canvas.</canvas> +</pre> + +<pre class="brush: css">body { + text-align : center; +} +canvas { + width : 280px; + height : 210px; + margin : auto; + padding : 0; + border : none; + background-color : black; +} +button { + display : block; + font-size : inherit; + margin : auto; + padding : 0.6em; +} +</pre> +</div> + +<pre class="brush: html"><script type="x-shader/x-vertex" id="vertex-shader"> +#version 100 +precision highp float; + +attribute vec2 position; + +void main() { + gl_Position = vec4(position, 0.0, 1.0); + gl_PointSize = 128.0; +} +</script> +</pre> + +<pre class="brush: html"><script type="x-shader/x-fragment" id="fragment-shader"> +#version 100 +precision mediump float; +void main() { + vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0; + float distance = length(fragmentPosition); + float distanceSqrd = distance * distance; + gl_FragColor = vec4( + 0.2/distanceSqrd, + 0.1/distanceSqrd, + 0.0, 1.0 ); +} +</script> +</pre> + +<div class="hidden"> +<pre class="brush: js">;(function(){ +</pre> +</div> + +<pre class="brush: js" id="livesample-js">"use strict" +window.addEventListener("load", setupWebGL, false); +var gl, + program; +function setupWebGL (evt) { + window.removeEventListener(evt.type, setupWebGL, false); + if (!(gl = getRenderingContext())) + return; + + var source = document.querySelector("#vertex-shader").innerHTML; + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader,source); + gl.compileShader(vertexShader); + source = document.querySelector("#fragment-shader").innerHTML + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader,source); + gl.compileShader(fragmentShader); + program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + gl.detachShader(program, vertexShader); + gl.detachShader(program, fragmentShader); + gl.deleteShader(vertexShader); + gl.deleteShader(fragmentShader); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + var linkErrLog = gl.getProgramInfoLog(program); + cleanup(); + document.querySelector("p").innerHTML = + "Shader program did not link successfully. " + + "Error log: " + linkErrLog; + return; + } + initializeAttributes(); + gl.useProgram(program); + gl.drawArrays(gl.POINTS, 0, 1); + cleanup(); +} + +var buffer; +function initializeAttributes() { + gl.enableVertexAttribArray(0); + buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW); + gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); +} + +function cleanup() { +gl.useProgram(null); +if (buffer) + gl.deleteBuffer(buffer); +if (program) + gl.deleteProgram(program); +} +</pre> + +<div class="hidden"> +<pre class="brush: js">function getRenderingContext() { + var canvas = document.querySelector("canvas"); + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + var gl = canvas.getContext("webgl") + || canvas.getContext("experimental-webgl"); + if (!gl) { + var paragraph = document.querySelector("p"); + paragraph.innerHTML = "Failed to get WebGL context." + + "Your browser or device may not support WebGL."; + return null; + } + gl.viewport(0, 0, + gl.drawingBufferWidth, gl.drawingBufferHeight); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + return gl; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js">})(); +</pre> +</div> + +<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p> +</div> +</div> + +<p>{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}}</p> |