{"json_modified": "2016-07-31T21:17:10.309436", "uuid": "516ac27a-7733-438d-9ef1-07db1ac6711e", "title": "Adding 2D content to a WebGL context", "url": "/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "tags": ["WebGL", "Tutorial"], "translations": [{"uuid": "d21a05ab-2eee-4d8b-b591-37984a1c4766", "title": "Hinzuf\u00fcgen von 2D Inhalten in einen WebGL-Kontext", "url": "/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext", "tags": ["WebGL"], "summary": "Sobald der <a href=\"/de/WebGL/Einf&#xFC;hrung_in_WebGL\" title=\"de/WebGL/Einf&#xFC;hrung in WebGL\">WebGL-Kontext</a> erfolgreich erstellt wurde, k\u00f6nnen wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein St\u00fcck Code zu schreiben, um ein Quadrat zu zeichnen.", "localization_tags": [], "locale": "de", "last_edit": "2015-06-19T08:29:33", "review_tags": []}, {"uuid": "6ba9c38a-e8e9-4f73-a76e-e87aec7fe656", "title": "Ajouter du contenu \u00e0 WebGL", "url": "/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_%C3%A0_WebGL", "tags": ["Shader", "WebGL"], "summary": "Une fois que vous avez correctement <a title=\"Commencer avec le WebGL\">cr\u00e9\u00e9\u00a0un contexte WebGL</a>, vous pouvez commencer \u00e0 dessiner dedans. La chose la plus simple est de dessiner un objet 2D et sans texture, l'article vous propose donc d'apprendre \u00e0 dessiner un simple carr\u00e9.", "localization_tags": [], "locale": "fr", "last_edit": "2016-02-11T10:08:42", "review_tags": []}, {"uuid": "88886730-9ebe-4eed-9e47-ca193892d760", "title": "WebGL \u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3078\u306e\u5e73\u9762\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u8ffd\u52a0", "url": "/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "tags": ["WebGL", "Tutorial"], "summary": "<a href=\"/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL\">WebGL \u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306e\u4f5c\u6210</a>\u306b\u6210\u529f\u3057\u305f\u3089\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3082\u3063\u3068\u3082\u7c21\u5358\u306b\u3067\u304d\u308b\u3053\u3068\u306f\u3001\u30c6\u30af\u30b9\u30c1\u30e3\u304c\u8cbc\u308a\u4ed8\u3051\u3089\u308c\u3066\u3044\u306a\u3044\u5358\u7d14\u306a 2D \u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u63cf\u753b\u3059\u308b\u3053\u3068\u3067\u3059\u306e\u3067\u3001\u307e\u305a\u306f\u6b63\u65b9\u5f62\u3092\u63cf\u753b\u3059\u308b\u30b3\u30fc\u30c9\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-01-26T05:29:52", "review_tags": []}, {"uuid": "584d9591-21d6-434b-a1ef-7aac04655134", "title": "WebGL \ucee8\ud14d\uc2a4\ud2b8\uc5d0 2D \ucee8\ud150\uce20 \ucd94\uac00\ud558\uae30", "url": "/ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "tags": ["WebGL", "Tutorial"], "summary": "\uc77c\ub2e8 \uc131\uacf5\uc801\uc73c\ub85c\u00a0<a href=\"/en/WebGL/Getting_started_with_WebGL\" style=\"font-size: 13.63636302948px; line-height: 19.0909080505371px;\" title=\"en/WebGL/Getting started with WebGL\">WebGL\ucee8\ud14d\uc2a4\ud2b8\ub97c \uc0dd\uc131</a>\ud558\uba74 \uadf8 \uc548\uc5d0 \ub80c\ub354\ub9c1\uc744 \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac00\uc7a5 \uac04\ub2e8\ud788 \ud574\ubcfc \uc218 \uc788\ub294 \uac83\uc740 \ud14d\uc2a4\uccd0\uac00 \uc5c6\ub294 2D \uac1d\uccb4\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ud55c\ubc88 \uc0ac\uac01\ud615\uc744 \uadf8\ub9ac\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud574\ubd05\uc2dc\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2015-09-07T08:24:23", "review_tags": []}, {"uuid": "70477f56-e937-488a-80bd-48601545e3b1", "title": "Adicionando conte\u00fado 2D a um contexto WebGL", "url": "/pt-BR/docs/Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "Uma vez que voc\u00ea tenha \u00a0<a href=\"/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL\">criado\u00a0um contexto WebGL</a>\u00a0com sucesso, voc\u00ea pode iniciar a renderizar nele. O mais simples que podemos fazer \u00e9 desenhar um objeto 2D n\u00e3o texturizado. Ent\u00e3o vamos come\u00e7ar por a\u00ed, construindo o c\u00f3digo necess\u00e1rio para se desenhar um quadrado.", "localization_tags": ["inprogress"], "locale": "pt-BR", "last_edit": "2016-03-03T15:47:14", "review_tags": []}, {"uuid": "f1a6816c-f133-4e9e-8b2e-719f3fcccf58", "title": "\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 WebGL", "url": "/ru/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "tags": ["WebGL"], "summary": "\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e <a href=\"/ru/docs/Web/WebGL/Getting_started_with_WebGL\" title=\"en/WebGL/Getting started with WebGL\">\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 WebGL</a>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u043d\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c - \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 2D \u043a\u043e\u043d\u0442\u0435\u043d\u0442 - \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0435\u0437 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b. \u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430.", "localization_tags": [], "locale": "ru", "last_edit": "2015-08-27T08:47:03", "review_tags": []}, {"uuid": "d6a9e9a8-d63e-49cb-9237-b60a993b482b", "title": "\u4f7f\u7528 WebGL \u521b\u5efa 2D \u5185\u5bb9", "url": "/zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "tags": ["WebGL", "Tutorial"], "summary": "\u4e00\u65e6\u521b\u5efaWEBGL\u4e0a\u4e0b\u6587\u6210\u529f\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728\u8fd9\u4e2a\u4e0a\u4e0b\u6587\u91cc\u6e32\u67d3\u753b\u56fe\u4e86\u3002\u800c\u5bf9\u6211\u4eec\u800c\u8a00\u6700\u7b80\u5355\u7684\u4e8b\uff0c\u83ab\u8fc7\u4e8e\u7ed8\u5236\u4e00\u4e2a\u6ca1\u6709\u7eb9\u7406\u76842D\u56fe\u5f62\u4e86\u3002\u90a3\u5c31\u8ba9\u6211\u4eec\u4ece\u753b\u51fa\u4e00\u4e2a\u6b63\u65b9\u5f62\u5f00\u59cb\u5427\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-07-21T02:52:48", "review_tags": []}], "modified": "2016-07-31T21:17:10", "label": "Adding 2D content to a WebGL context", "localization_tags": [], "locale": "en-US", "id": 997, "last_edit": "2016-07-31T21:17:05", "summary": "Once you've successfully <a href=\"/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL\">created a WebGL context</a>, you can start rendering into it. The simplest thing we can do is draw a simple 2D, untextured object, so let's start there, by building code to draw a square.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Drawing_the_scene", "title": "Drawing the scene"}, {"id": "Initializing_the_shaders", "title": "Initializing the shaders"}, {"id": "Loading_shaders_from_the_DOM", "title": "Loading shaders from the DOM"}, {"id": "The_shaders", "title": "The shaders"}, {"id": "Fragment_shader", "title": "Fragment shader"}, {"id": "Vertex_shader", "title": "Vertex shader"}, {"id": "Creating_the_object", "title": "Creating the object"}, {"id": "Rendering_the_scene", "title": "Rendering the scene"}, {"id": "Matrix_utility_operations", "title": "Matrix utility operations"}, {"id": "See_also", "title": "See also"}], "slug": "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "review_tags": ["technical"]}