{"json_modified": "2016-02-04T00:26:53.055367", "slug": "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["Intro", "WebGL", "Tutorial"], "locale": "es", "title": "Primeros pasos con WebGL", "translations": [{"title": "Commencer avec WebGL", "url": "/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL", "tags": ["WebGL"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" rel=\"external\" title=\"https://www.khronos.org/webgl/\">WebGL</a> permet d'utiliser l'API bas\u00e9e sur <a class=\"external\" href=\"https://www.khronos.org/opengles/\" rel=\"external\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0 pour cr\u00e9er un environnement 3D dans l'\u00e9l\u00e9ment <a class=\"internal\" href=\"/fr/HTML/Canvas\" title=\"fr/HTML/Canvas\">canvas</a>", "localization_tags": [], "locale": "fr", "last_edit": "2015-08-27T09:21:33", "review_tags": []}, {"title": "Getting started with WebGL", "url": "/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> enables web content to use an API\u00a0based on <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0 to perform 3D rendering in an HTML\u00a0<a class=\"internal\" href=\"/en-US/docs/Web/API/Canvas_API\"><code>canvas</code></a> in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.", "localization_tags": [], "locale": "en-US", "last_edit": "2016-01-11T05:18:11", "review_tags": []}, {"title": "WebGL \u5165\u9580", "url": "/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "<a href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306a\u304f HTML <a href=\"/ja/docs/Web/API/Canvas_API\"><code>canvas</code></a> \u5185\u3067 3D \u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u305f\u3081\u306e\u3001<a href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL ES</a> 2.0 \u306b\u57fa\u3065\u304f API \u3092 Web \u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002WebGL \u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306f JavaScript \u3067\u8a18\u8ff0\u3059\u308b\u5236\u5fa1\u30b3\u30fc\u30c9\u3068\u3001\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306e Graphics Processing Unit (GPU) \u3067\u5b9f\u884c\u3059\u308b\u7279\u6b8a\u52b9\u679c\u30b3\u30fc\u30c9 (\u30b7\u30a7\u30fc\u30c0\u30fc\u30b3\u30fc\u30c9) \u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002WebGL \u8981\u7d20\u306f\u4ed6\u306e HTML \u8981\u7d20\u3068\u6df7\u305c\u3089\u308c\u3001\u4ed6\u306e\u30da\u30fc\u30b8\u90e8\u54c1\u3084\u30da\u30fc\u30b8\u306e\u80cc\u666f\u3068\u5408\u6210\u3055\u308c\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-01-25T06:56:54", "review_tags": []}, {"title": "Einf\u00fchrung in WebGL", "url": "/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "Mit <a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> steht eine API zur Verf\u00fcgung, die auf <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL ES 2.0</a> basiert, um 3D Rendering im HTML <a href=\"/de/HTML/Element/canvas\" title=\"de/HTML/canvas\"><code>canvas</code></a> Element zu erm\u00f6glichen. Die Unterst\u00fctzung von WebGL ist in einer zuk\u00fcnftigen Version von Firefox geplant. Zum Testen kann ein Nightly oder\u00a0Beta Build von Firefox heruntergeladen werden.", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2015-06-25T05:46:49", "review_tags": []}, {"title": "\u521d\u8bc6 WebGL", "url": "/zh-CN/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> \u4f7f HTML \u7684 <a class=\"internal\" href=\"/zh-CN/HTML/Canvas\" title=\"zh-CN/HTML/Canvas\"><code>canvas</code></a> \u4e2d\u7684 web \u5185\u5bb9\u5728\u652f\u6301\u7684\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528\u57fa\u4e8e <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0 \u7684 API \u6765\u8fdb\u884c3D\u6e32\u67d3\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-08-27T08:31:54", "review_tags": []}, {"title": "Getting started with WebGL", "url": "/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" style=\"line-height: 1.5;\" title=\"https://www.khronos.org/webgl/\">WebGL</a>\uc740 \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0\u00a0<a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a>2.0 \uae30\ubc18 API\ub97c \uc774\uc6a9\ud558\uc5ec \ube0c\ub77c\uc6b0\uc800\uc758 HTML\u00a0<a class=\"internal\" href=\"/en/HTML/Canvas\" title=\"en/HTML/Canvas\"><code>canvas</code></a>\u00a0\uc5d0 \ub79c\ub354\ub9c1\ud558\uc5ec 3D \uc6f9 \ucee8\ud150\uce20 \uc81c\uc791\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4. WebGL \ud504\ub85c\uadf8\ub7a8\uc740 \ucef4\ud4e8\ud130\uc758 \uadf8\ub798\ud53d \ucc98\ub9ac \uc7a5\uce58(GPU)\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub098 \ud2b9\uc218 \ud6a8\uacfc(\uc250\uc774\ub354 \ucf54\ub4dc)\ucf54\ub4dc\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. WebGL \uc694\uc18c\ub4e4\uc740 \ub2e4\ub978 html\uc694\uc18c\ub4e4\uacfc \ud63c\ud569\ub420 \uc218 \uc788\uace0 \ud398\uc774\uc9c0\ub098 \ud398\uc774\uc9c0 \ubc30\uacbd\uc758 \ub2e4\ub978 \ubd80\ubd84\uacfc \ud569\uc131 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2015-08-27T11:26:44", "review_tags": []}, {"title": "\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 WebGL", "url": "/ru/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c API, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0, \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0432 HTML\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <a class=\"internal\" href=\"/en/HTML/Canvas\" title=\"en/HTML/Canvas\"><code>canvas</code></a> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0442 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443. WebGL \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043a\u043e\u0434\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 JavaScript \u0438 \u043a\u043e\u0434\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 (\u0448\u0435\u0439\u0434\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435. WebGL \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043c\u0435\u0448\u0430\u043d\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0444\u043e\u043d\u043e\u043c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.", "localization_tags": [], "locale": "ru", "last_edit": "2016-01-11T02:35:25", "review_tags": []}, {"title": "Getting started with WebGL", "url": "/pl/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": ["WebGL"], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a> odblokowuje zawarto\u015b\u0107 u\u017cywaj\u0105c podstawowego API na <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0 do przygotowania renderingu 3D w HTML <a class=\"internal\" href=\"/en/HTML/Canvas\" title=\"en/HTML/Canvas\"><code>canvas</code></a> w przegl\u0105darce to wpomaga dzia\u0142anie bez u\u017cycia plugin\u00f3w. programy WebGL sk\u0142adaj\u0105 si\u0119 z kontrolnego kodu napisanego w JavaScript i kodu specjalnych efekt\u00f3w (shader code) kt\u00f3ry jest wykonywany na GPU komputera. Elementy WebGl mog\u0105 by\u0107 mieszane z innymi elementami i kompozycjami HTML z innymi cz\u0119\u015bciami strony.", "localization_tags": [], "locale": "pl", "last_edit": "2015-08-27T08:58:18", "review_tags": []}, {"title": "Come\u00e7ando com WebGL", "url": "/pt-BR/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "tags": [], "summary": "<a class=\"external\" href=\"https://www.khronos.org/webgl/\" title=\"https://www.khronos.org/webgl/\">WebGL</a>\u00a0permite que o cont\u00e9udo web use uma API baseada em <a class=\"external\" href=\"https://www.khronos.org/opengles/\" title=\"https://www.khronos.org/opengles/\">OpenGL\u00a0ES</a> 2.0 para realizar renderiza\u00e7\u00e3o 3D em um <a class=\"internal\" href=\"/en-US/docs/Web/API/Canvas_API\"><code>canvas</code></a> HTML em browsers que o suportam sem o uso de plugins. Programas WebGL consistem em um c\u00f3digo de controle escrito em JavaScript e c\u00f3digos de efeitos especiais (shader code) que \u00e9 executado na Unidade Gr\u00e1fica de Processamento (GPU) de um computador. Elementos WebGL podem ser utilizados junto com outros elementos HTML e com outras partes da p\u00e1gina ou do fundo.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2015-12-03T12:43:08", "review_tags": []}], "modified": "2016-02-04T00:26:52", "label": "Primeros pasos con WebGL", "localization_tags": [], "url": "/es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "last_edit": "2016-02-04T00:26:50", "summary": "WebGL permite contenido web para utilizar una API basada en OpenGL ES 2.0 para llevar a cabo la representaci\u00f3n 3D en un archivo HTML canvas en los navegadores que soporten sin el uso de plug-ins. WebGL programas consisten en c\u00f3digo de control escrito en JavaScript y el c\u00f3digo de efectos especiales (c\u00f3digo shader) que se ejecuta en la unidad de procesamiento gr\u00e1fico de una computadora (GPU). WebGL elementos se pueden mezclar con otros elementos HTML y composici\u00f3n con otras partes de la p\u00e1gina o p\u00e1gina de fondo. Este art\u00edculo le dar\u00e1 a conocer los conceptos b\u00e1sicos de usar WebGL. Se supone que ya tiene una comprensi\u00f3n de las matem\u00e1ticas implicadas en gr\u00e1ficos 3D, y este art\u00edculo no pretende tratar de ense\u00f1arte OpenGL s\u00ed mismo.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Preparar_el_render_en_3D", "title": "Preparar el render en 3D"}, {"id": "Preparando_el_contexto_de_WebGL", "title": "Preparando el contexto de WebGL"}, {"id": "Crear_el_contexto_de_WebGL", "title": "Crear el contexto de WebGL"}, {"id": "Cambiando_el_tama\u00f1o_del_contexto_WebGL", "title": "Cambiando el tama\u00f1o del contexto WebGL"}, {"id": "Tambi\u00e9n_podr\u00eda_interesarte", "title": "Tambi\u00e9n podr\u00eda interesarte"}], "id": 130965, "review_tags": ["technical", "editorial"]}