{"json_modified": "2016-04-30T05:18:56.898168", "uuid": "0043333b-f7f6-4762-942f-9d8b1b04f498", "title": "Animating textures in WebGL", "url": "/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL", "tags": ["Video", "WebGL", "Tutorial", "Media"], "translations": [{"uuid": "f2dae9ab-5745-45bf-aa54-ae59a49c57ff", "title": "Animierte Texturen in WebGL", "url": "/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.", "localization_tags": [], "locale": "de", "last_edit": "2015-08-27T06:42:32", "review_tags": []}, {"uuid": "8f5424ca-be9b-4980-9b78-b842c1772918", "title": "Animating textures in WebGL", "url": "/es/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL", "tags": [], "summary": "En esta demostraci\u00f3n\u00a0nos basamos\u00a0en el ejemplo anterior, solo que ahora reemplazaremos\u00a0nuestra textura est\u00e1tica con los fotogramas de un video Ogg.", "localization_tags": [], "locale": "es", "last_edit": "2016-04-30T05:18:53", "review_tags": ["editorial"]}, {"uuid": "63c7718a-5818-4f06-b323-2a6ae4d17bfd", "title": "WebGL \u3067\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u30a2\u30cb\u30e1\u30fc\u30c6\u30a3\u30f3\u30b0", "url": "/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL", "tags": ["Video", "WebGL", "Tutorial", "Media"], "summary": "\u4eca\u56de\u306e\u30c7\u30e2\u30f3\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u524d\u56de\u306e\u4f8b\u3067\u7528\u3044\u305f\u9759\u7684\u306a\u30c6\u30af\u30b9\u30c1\u30e3\u3092 Ogg \u30d3\u30c7\u30aa\u30d5\u30a1\u30a4\u30eb\u306e\u30d5\u30ec\u30fc\u30e0\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002\u5b9f\u306f\u3053\u308c\u3092\u884c\u3046\u306e\u306f\u3068\u3066\u3082\u7c21\u5358\u3067\u3059\u304c\u3001\u898b\u3066\u3044\u3066\u697d\u3057\u3044\u3067\u3059\u3002\u3055\u3063\u305d\u304f\u59cb\u3081\u307e\u3057\u3087\u3046\u3002\u306a\u304a\u540c\u69d8\u306e\u30b3\u30fc\u30c9\u3092\u3001\u3069\u3093\u306a\u7a2e\u985e\u306e\u30c7\u30fc\u30bf (<a href=\"/ja/docs/Web/HTML/Element/canvas\" title=\"HTML &#x306E; &lt;canvas&gt; &#x8981;&#x7D20;&#x306F;&#x3001;&#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30C6;&#x30A3;&#x30F3;&#x30B0; (&#x57FA;&#x672C;&#x7684;&#x306B;&#x306F; JavaScript) &#x306B;&#x3088;&#x308A;&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C3;&#x30AF;&#x3092;&#x63CF;&#x753B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x4F8B;&#x3048;&#x3070;&#x3001;&#x30B0;&#x30E9;&#x30D5;&#x306E;&#x63CF;&#x753B;&#x3001;&#x5199;&#x771F;&#x306E;&#x5408;&#x6210;&#x3001;&#x3055;&#x3089;&#x306B;&#x306F;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4F5C;&#x6210;&#x307E;&#x3067;&#x304C;&#x53EF;&#x80FD;&#x3067;&#x3059;&#x3002;&lt;canvas&gt; &#x306E;&#x30D6;&#x30ED;&#x30C3;&#x30AF;&#x5185;&#x3067;&#x3001;&#x4EE3;&#x66FF;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3092;&#x63D0;&#x4F9B;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x53EF;&#x80FD; (&#x307E;&#x305F;&#x3001;&#x63D0;&#x4F9B;&#x3059;&#x3079;&#x304D;) &#x3067;&#x3059;&#x3002;&#x305D;&#x306E;&#x5185;&#x5BB9;&#x7269;&#x306F;&#x3001;canvas &#x3092;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3057;&#x306A;&#x3044;&#x53E4;&#x3044;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304A;&#x3088;&#x3073; JavaScript &#x304C;&#x7121;&#x52B9;&#x3067;&#x3042;&#x308B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x63CF;&#x753B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>&lt;canvas&gt;</code></a> \u306a\u3069) \u3092\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u30bd\u30fc\u30b9\u3068\u3057\u3066\u7528\u3044\u308b\u5834\u5408\u3067\u3082\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-01-30T20:37:41", "review_tags": []}, {"uuid": "c9d616e5-741a-4662-b640-3d6d8eb5837d", "title": "WebGL\uc5d0\uc11c\uc758 \ud14d\uc2a4\uccd0 \uc560\ub2c8\uba54\uc774\uc158", "url": "/ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL", "tags": ["\uc6f9\uc9c0\uc5d8", "\uc560\ub2c8\uba54\uc774\uc158", "Texture", "Video", "WebGL", "HTML5", "\ud14d\uc2a4\uccd0", "Animation"], "summary": "\uc55e \ub2e8\uc6d0\uc5d0\uc11c\ub294 \uc815\uc801\uc778 \ud14d\uc2a4\uccd0\ub97c \uc0ac\uc6a9\ud55c \uc608\uc81c\ub97c \ub9cc\ub4e4\uc5b4 \ubd24\uc5c8\ub294\ub370, \uc774\ubc88\uc5d0\ub294 Ogg \ube44\ub514\uc624 \ud30c\uc77c\uc744 \uc774\uc6a9\ud574\uc11c \ud14d\uc2a4\uccd0\uc5d0 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uc801\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0ac\uc2e4 \ub9cc\ub4e4\uae30 \uc0c1\ub2f9\ud788 \uc27d\uc9c0\ub9cc, \uadf8\ub798\ub3c4 \ubcf4\ub294 \uc7ac\ubbf8\ub294 \uc3e0\uc3e0\ud558\ub2c8\uae4c \ud55c \ubc88 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ud14d\uc2a4\uccd0\ub97c \uad6c\uc131\ud560 \uc18c\uc2a4\ub85c \uc5b4\ub5a4 \uc885\ub958\uc758 \ub370\uc774\ud130(\uc608\ub97c \ub4e4\uba74 <span style=\"line-height: 16.7999992370605px;\"><a href=\"/ko/docs/Web/HTML/Element/canvas\" title=\"This article hasn't been written yet. Please consider contributing!\"><code>&lt;canvas&gt;</code></a>\uc640 \uac19\uc740</span>)\ub97c \uc4f0\ub354\ub77c\ub3c4 \ucf54\ub4dc\ub294 \ube44\uc2b7\ud560 \uac83\uc785\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2015-08-27T12:01:28", "review_tags": []}], "modified": "2015-10-15T11:55:48", "label": "Animating textures in WebGL", "localization_tags": [], "locale": "en-US", "id": 3627, "last_edit": "2015-10-15T11:55:46", "summary": "In this demonstration, we build upon the previous example by replacing our static textures with the frames of a playing Ogg video file. This is actually pretty easy to do, but is fun to look at, so let's get started. Similar code can be used to use any sort of data (such as a <a href=\"/en-US/docs/Web/HTML/Element/canvas\" title=\"The HTML &lt;canvas&gt; Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the &lt;canvas&gt; block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.\"><code>&lt;canvas&gt;</code></a> as the source for your textures.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Getting_access_to_the_video", "title": "Getting access to the video"}, {"id": "Using_the_video_frames_as_a_texture", "title": "Using the video frames as a texture"}, {"id": "See_also", "title": "See also"}], "slug": "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL", "review_tags": []}