{"json_modified": "2016-09-24T21:57:50.111428", "uuid": "b8a03c93-d744-4ba3-81b5-da813d9424fd", "title": "Creating 3D objects using WebGL", "url": "/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "tags": ["WebGL", "Tutorial"], "translations": [{"uuid": "562d1aa6-7a70-43a3-9571-a97eeef155c4", "title": "3D-Objekte mit WebGL erstellen", "url": "/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "tags": ["WebGL", "Tutorial"], "summary": "Bringen wir unser Quadrat in die dritte Dimension, indem wir f\u00fcnf oder mehr Fl\u00e4chen hinzuf\u00fcgen und daraus einen W\u00fcrfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt \u00fcber die Vertices zur gl.drawArray() Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz f\u00fcr Positionen jeder Fl\u00e4che zu definieren, indem wir gl.drawElements() aufrufen.", "localization_tags": [], "locale": "de", "last_edit": "2015-08-27T06:27:40", "review_tags": []}, {"uuid": "65e97709-d778-47ad-ac6e-8a2488703429", "title": "Creaci\u00f3n de objetos 3D utilizando WebGL", "url": "/es/docs/Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL", "tags": ["Objetos 3D", "Cubo 3D", "WebGL", "Tutorial"], "summary": "Vamos a llevar nuestro cuadrado hacia la tercera dimensi\u00f3n agregando cinco caras m\u00e1s para crear\u00a0el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el m\u00e9todo\u00a0gl.drawArrays()\u00a0por el uso de un arreglo de v\u00e9rtices como\u00a0tabla, esto por medio del llamado hacia\u00a0 \u00a0gl.drawElements().", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2016-02-26T22:41:17", "review_tags": []}, {"uuid": "d971f1a9-e1ed-413f-98cd-5544d6f3b81c", "title": "Cr\u00e9er des objets 3D avec WebGL", "url": "/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL", "tags": ["WebGL", "Tutoriel"], "summary": "Transformons notre carr\u00e9 en trois dimensions en lui ajoutant cinq faces suppl\u00e9mentaires pour cr\u00e9er un cube. Pour faire cela efficacement, nous allons passer au dessin de sommets directement en appellant la m\u00e9thode gl.drawArray() et utiliser un tableau de sommets et y r\u00e9f\u00e9rencer les sommets individuels pour d\u00e9finir les positions de chaque face en appelant gl.drawElements().", "localization_tags": [], "locale": "fr", "last_edit": "2015-08-27T09:21:34", "review_tags": []}, {"uuid": "73907a8a-cc83-4982-9843-45770d4cd800", "title": "WebGL \u3092\u7528\u3044\u305f 3D \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210", "url": "/ja/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "tags": ["WebGL", "Tutorial"], "summary": "\u6b63\u65b9\u5f62\u306b 5 \u3064\u306e\u9762\u3092\u8ffd\u52a0\u3057\u3066\u7acb\u4f53\u5316\u3057\u3001\u30ad\u30e5\u30fc\u30d6\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u308c\u3092\u52b9\u7387\u7684\u306b\u884c\u3046\u305f\u3081\u306b\u3001gl.drawArrays() \u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3066\u9802\u70b9\u60c5\u5831\u3092\u76f4\u63a5\u4f7f\u7528\u3059\u308b\u63cf\u753b\u65b9\u6cd5\u304b\u3089\u3001\u9802\u70b9\u306e\u914d\u5217\u3092\u30c6\u30fc\u30d6\u30eb\u3068\u3057\u3066\u6271\u3044\u3001gl.drawElements() \u3092\u547c\u3073\u51fa\u3057\u3066\u3001\u305d\u306e\u30c6\u30fc\u30d6\u30eb\u306e\u5404\u9802\u70b9\u60c5\u5831\u3092\u53c2\u7167\u3057\u3066\u5404\u9762\u306e\u9802\u70b9\u3092\u5b9a\u7fa9\u3059\u308b\u65b9\u6cd5\u306b\u5207\u308a\u66ff\u3048\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-01-27T06:36:32", "review_tags": []}, {"uuid": "aef119e3-b52c-4c91-b502-c09cb41c1f06", "title": "WebGL\ub85c 3D \uac1d\uccb4 \ub9cc\ub4e4\uae30", "url": "/ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "tags": ["3D", "WebGL", "3\ucc28\uc6d0", "\uc785\uccb4"], "summary": "\uc774\uc81c \uc6b0\ub9ac\uac00 \ub9cc\ub4e0 \uc815\uc0ac\uac01\ud615\uc5d0 5\uac1c\uc758 \uba74\uc744 \ub354\ud574\uc11c 3\ucc28\uc6d0 \uc815\uc721\uba74\uccb4\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uc791\uc5c5\uc744 \uc870\uae08 \ub354 \ud6a8\uc728\uc801\uc73c\ub85c\u00a0\ud558\uae30 \uc704\ud574\uc11c\u00a0drawArray() \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud574\uc11c \uc815\uc810\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1\ud558\ub294 \ub300\uc2e0\uc5d0, \uc815\uc810 \ubc30\uc5f4\uc744 \uc778\ub371\uc2a4\uc640 \uac12\uc73c\ub85c \uc815\uc758\ub41c \ud14c\uc774\ube14\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uace0, \uac01 \uc815\uc810\uc744 \uc778\ub371\uc2a4\ub85c \ucc38\uc870\ud574\uc11c \uc815\uc721\uba74\uccb4 \uac01 \uba74\uc758 \uc815\uc810 \uc704\uce58\ub97c \uc815\uc758\ud558\uace0\u00a0gl.drawElements()\ub97c \ud638\ucd9c\ud574\uc11c \uadf8\ub824\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.", "localization_tags": [], "locale": "ko", "last_edit": "2015-08-27T11:41:17", "review_tags": []}, {"uuid": "4ef518bd-4507-4e3f-9326-1b77297f3ad2", "title": "Criando objetos em 3D usando o WebGL", "url": "/pt-BR/docs/Web/API/WebGL_API/Tutorial/Criando_objetos_em_3D_usando_o_WebGL", "tags": ["WebGL"], "summary": "Let's take our square into three dimensions by adding five more faces to create a cube. To do this efficiently, we're going to switch from drawing using the vertices directly by calling the gl.drawArray() method to using the vertex array as a table, and referencing individual vertices in that table to define the positions of each face's vertices, by calling gl.drawElements().", "localization_tags": [], "locale": "pt-BR", "last_edit": "2015-08-27T08:54:10", "review_tags": []}, {"uuid": "5033dbdb-dd9e-4130-9829-4768e18a2aa6", "title": "\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 3D \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WebGL", "url": "/ru/docs/Web/API/WebGL_API/Tutorial/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_3D_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BE%D0%B2_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_WebGL", "tags": ["\u0423\u0440\u043e\u043a", "WebGL"], "summary": "\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043d\u0430\u0448 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0435\u0449\u0435 5 \u0433\u0440\u0430\u043d\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u0443\u0431. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e, \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0440\u0448\u0438\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u00a0gl.drawArrays() , \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0435\u0440\u0448\u0438\u043d \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438, \u0432\u044b\u0437\u044b\u0432\u0430\u044f gl.drawElements().", "localization_tags": [], "locale": "ru", "last_edit": "2016-09-24T21:57:45", "review_tags": ["editorial"]}, {"uuid": "d3aa20fc-d336-491b-b77b-7cbffe761d16", "title": "Creating 3D objects using WebGL", "url": "/zh-CN/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "tags": [], "summary": "\u73b0\u5728\u8ba9\u6211\u4eec\u7ed9\u4e4b\u524d\u7684\u6b63\u65b9\u5f62\u6dfb\u52a0\u4e94\u4e2a\u9762\u4ece\u800c\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u4e09\u7ef4\u7684\u7acb\u65b9\u4f53\u3002\u6700\u7b80\u5355\u7684\u65b9\u5f0f\u5c31\u662f\u901a\u8fc7\u8c03\u7528\u65b9\u6cd5\u00a0gl.drawElements()\u00a0\u4f7f\u7528\u9876\u70b9\u6570\u7ec4\u5217\u8868\u6765\u66ff\u6362\u4e4b\u524d\u7684\u901a\u8fc7\u65b9\u6cd5gl.drawArrays() \u76f4\u63a5\u4f7f\u7528\u9876\u70b9\u6570\u7ec4\u3002\u800c\u9876\u70b9\u6570\u7ec4\u5217\u8868\u91cc\u4fdd\u5b58\u7740\u5c06\u4f1a\u88ab\u5f15\u7528\u5230\u4e00\u4e2a\u4e2a\u72ec\u7acb\u7684\u9876\u70b9\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-07-26T00:51:09", "review_tags": []}], "modified": "2016-06-17T13:11:57", "label": "Creating 3D objects using WebGL", "localization_tags": [], "locale": "en-US", "id": 3626, "last_edit": "2016-02-25T07:32:56", "summary": "Let's take our square into three dimensions by adding five more faces to create a cube. To do this efficiently, we're going to switch from drawing using the vertices directly by calling the gl.drawArrays() method to using the vertex array as a table, and referencing individual vertices in that table to define the positions of each face's vertices, by calling\u00a0gl.drawElements().", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Define_the_positions_of_the_cube's_vertices", "title": "Define the positions of the cube's vertices"}, {"id": "Define_the_vertices'_colors", "title": "Define the vertices' colors"}, {"id": "Define_the_element_array", "title": "Define the element array"}, {"id": "Drawing_the_cube", "title": "Drawing the cube"}], "slug": "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "review_tags": []}