{"id":326261,"date":"2021-07-11T09:00:08","date_gmt":"2021-07-11T09:00:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=326261"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=326261","title":{"rendered":"\u0417\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430 \u0441 WebGL (\u0447\u0430\u0441\u0442\u044c 2)"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<h3>\u0412\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0434\u0438 \u0447\u0435\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c WebGL<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043a\u0443\u0441\u0442\u0430\u0440\u043d\u044b\u0439 REPL, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043c\u043e\u0433 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<blockquote>\n<p>\u042f \u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0441\u043f\u0443\u0441\u0442\u044f 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0438 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 -&gt;<\/p>\n<\/blockquote>\n<p><iframe id=\"60ea6058920526a288c7e146\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/60ea6058920526a288c7e146\" class=\"embed_video embed__content\" allowfullscreen=\"true\"><\/iframe><\/p>\n<p>\u0412\u043e\u043e\u0440\u0443\u0436\u0438\u0441\u044c \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0438 \u0440\u0435\u043f\u043b\u043e\u043c, \u044f \u043f\u043e\u0448\u0435\u043b \u0438\u0441\u043a\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u043c\u043d\u0435 .obj \u0444\u0430\u0439\u043b\u0438\u043a \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u044b.\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u043e\u043b\u0435\u0435\/\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043b\u043e \u043c\u043d\u0435 \u0444\u0430\u0439\u043b\u0438\u043a \u044d\u0442\u043e \u0431\u044b\u043b npm \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/webgl-obj-loader\" rel=\"noopener noreferrer nofollow\"><u>webgl-obj-loader<\/u><\/a>.<\/p>\n<h4>\u041f\u0435\u0440\u0432\u044b\u0435 \u043d\u0430\u0431\u0440\u043e\u0441\u043a\u0438<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u044f \u0441\u0440\u0430\u0437\u0443 \u0441\u043c\u043e\u0433 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/p>\n<pre><code class=\"objectivec\">\/\/ vertex attribute vec4 a_position; \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u044f\u0431\u043b\u043e\u043a\u0430.  uniform mat4 u_matrix; \/\/ \u043c\u0430\u0442\u0440\u0438\u0446\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c  void main(){     gl_Position = u_matrix * a_position; \/\/ \u0443 glsl \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438. \u0422\u0443\u0442 \u043e\u043d \u0441\u0430\u043c \u0437\u0430 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u043c\u043d\u043e\u0436\u0430\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043d\u0430 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u043c\u0435\u0449\u0430\u0435\u0442 \u0438\u0445 \u043a\u0443\u0434\u0430 \u043d\u0430\u0434\u043e. }<\/code><\/pre>\n<pre><code class=\"objectivec\">\/\/ fragment precision mediump float; \/\/ \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f.   void main() {   gl_FragColor = vec4(1., 0., 0., 1.); \/\/ \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u043c }<\/code><\/pre>\n<p>\u041a\u043e\u0434<\/p>\n<pre><code class=\"javascript\">import { vertex, fragment } from '.\/shaders'; \/\/ \u0447\u0435\u0440\u0435\u0437 parcel \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u044b import { createCanvas, createProgramFromTexts } from \".\/helpers\";  import { m4 } from \".\/matrix3d\"; \/\/ \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 webgl \u043d\u0430 webgl fund, \u043c\u043d\u0435 \u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 3\u0434 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438. import appleObj from \".\/apple.obj\"; \/\/ \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0430 \u044f\u0431\u043b\u043e\u043a\u0430 import * as OBJ from \"webgl-obj-loader\"; \/\/ \u043d\u0430\u0448\u0430 \u043b\u0438\u0431\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442 obj   function main() {   const apple = new OBJ.Mesh(appleObj); \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c   const canvas = createCanvas(); \/\/ \u0441\u043e\u0437\u0434\u0430\u044e canvas \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432 body   const gl = canvas.getContext(\"webgl\"); \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442   const program = createProgramFromTexts(gl, vertex, fragment); \/\/ \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438\u0437 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432   gl.useProgram(program); \/\/ \u043b\u0438\u043d\u043a\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442   const positionLocation = gl.getAttribLocation(program, \"a_position\");    \/\/ \u0443 \u043b\u0438\u0431\u044b \u0431\u044b\u043b\u0430 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430 \u043c\u0435\u043d\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430 \u0431\u0443\u0444\u0435\u0440 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043b\u0430 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0443\u0444\u0435\u0440\u044b. \u0418\u0437 .obj \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u044b, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b.   OBJ.initMeshBuffers(gl, apple);    gl.enableVertexAttribArray(positionLocation); \/\/ \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0437\u043d\u0430\u044e, \u043d\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0448\u044c, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.   gl.vertexAttribPointer(     positionLocation,     apple.vertexBuffer.itemSize, \/\/ \u043b\u0438\u0431\u0430 \u0441\u0430\u043c\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u0431\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0435\u043b, \u0447\u0442\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u0443     gl.FLOAT,     false, \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u044d\u0442\u043e \u0447\u0442\u043e\u0431 \u043d\u0435 \u043f\u044b\u0442\u0430\u043b\u043e\u0441\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 1 \u0432 1. \u0410\u043b\u044f 255 -&gt; 0.255.     0,     0   ); \/\/ \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u0412 \u043d\u0435\u0435 \u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b   const matrixLocation = gl.getUniformLocation(program, \"u_matrix\");    let translation = [canvas.width \/ 2, 400, 0]; \/\/ \u0441\u043c\u0435\u0449\u0430\u044e \u043d\u0430 \u0446\u0435\u043d\u0442\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 400 px \u0432\u043d\u0438\u0437   let rotation = [degToRad(180), degToRad(0), degToRad(0)]; \/\/ \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043d\u0443\u043b\u044f\u043c   let scale = [5, 5, 5]; \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443 \u0432 5 \u0440\u0430\u0437. scaleX, scaleY, scaleZ    \/\/ \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u044c\u044e \u043f\u043e\u0440\u0442   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);   gl.enable(gl.DEPTH_TEST); \/\/ \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0443 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439, \u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0432\u0438\u0434\u0435\u043d.    function drawScene() {     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); \/\/ \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043a\u0430\u043d\u0432\u0430\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440      const matrix = m4.multiply(       m4.identity(), \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u0443\u044e \u043c\u0430\u0442\u0440\u0438\u0446\u0443. \u041c\u0430\u0442\u0440\u0438\u0446\u0443 \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.       m4.orthographic(         0,         gl.canvas.width,         gl.canvas.height,         0,         400,         -400       ), \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0438 \u044f\u0431\u043b\u043e\u043a\u0430 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e -1 \u0434\u043e 1.       m4.translation(...translation), \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443        m4.xRotation(rotation[0]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e X       m4.yRotation(rotation[1]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e Y       m4.zRotation(rotation[2]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e Z       m4.scaling(...scale) \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443     ); \/\/ \u043f\u0435\u0440\u0435\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u0447\u0442\u043e\u0431 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 1 \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438 \u043f\u0440\u043e\u043a\u0438\u043d\u0435\u043c \u0432 \u0448\u0435\u0439\u0434\u0435\u0440     gl.uniformMatrix4fv(matrixLocation, false, matrix); \/\/ \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u0443     \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e \u0431\u0443\u0444\u0435\u0440 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c\u0438     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, apple.indexBuffer);      \/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u044f\u0431\u043b\u043e\u043a\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432     gl.drawElements(       gl.TRIANGLES,       apple.indexBuffer.numItems,       gl.UNSIGNED_SHORT,       0     );   }    drawScene();    \/\/ \u0422\u0443\u0442 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u044f\u043a\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u0447\u0442\u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b.   \/\/ ...   \/\/ }  main();<\/code><\/pre>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/af4\/495\/915\/af449591589517fb6d7b5bb2bd97a494.png\" width=\"800\" height=\"500\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0448\u0430\u0433 \u0434\u043b\u044f webgl, \u043d\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0441\u043a\u0430\u0447\u043e\u043a \u0434\u043b\u044f&nbsp;<strong>\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430<\/strong>.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435&nbsp;index?<\/h4>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043b\u0438\u0431\u043e\u0439 \u0443\u0437\u043d\u0430\u043b \u043f\u0440\u043e \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0449\u044c: \u0438\u043d\u0434\u0435\u043a\u0441\u044b.<br \/>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432 .obj \u0444\u0430\u0439\u043b\u0435 \u043a\u0440\u043e\u043c\u0435 \u0432\u0435\u0440\u0448\u0438\u043d \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u043e\u0440\u043c\u0430\u043b\u0438, \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 (faces).<br \/>\u0427\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435?<\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0438\u0444\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0448\u0435\u0439\u0434\u0435\u0440\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u0433\u0434\u0435 \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0435, \u0447\u0442\u043e\u0431 \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0445 \u043d\u0435\u0442, \u0442\u043e \u0448\u0435\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043d\u0435 \u0437\u043d\u0430\u044f \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442. \u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041d\u043e\u0440\u043c\u0430\u043b\u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435, \u0447\u0442\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043d\u044c \u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u0430(\u043c\u043e\u0434\u0435\u043b\u044c) \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u0435\u0442 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c &#8212; \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0432\u0435\u0440\u0448\u0438\u043d, \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0435\u0439. \u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 (\u0430\u043b\u044f cinema4d \u0438 \u0434\u0440\u0443\u0433\u0438\u0445), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u0438\u0433\u043e\u043d\u044b \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443. \u0422\u0430\u043a \u0432\u043e\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043c\u044b \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u043b\u0438 \u0432 2 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0432\u0435\u0440\u0448\u0438\u043d \u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0418 webgl \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0438 \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 (\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 size, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0435\u043b, \u0447\u0442\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u0443) \u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0447\u0438\u0441\u0435\u043b \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c&nbsp;<code>gl.TRIANGLES<\/code>&nbsp;\u043d\u0430&nbsp;<code>gl.LINES<\/code>. \u0418 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/861\/b25\/8ec\/861b258ec9abe1f433ceda25f7d28911.png\" width=\"800\" height=\"500\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u0434\u0430, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u044f \u043e\u0436\u0438\u0434\u0430\u043b. \u0413\u0434\u0435 \u043c\u043e\u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u043a\u0430\u043a \u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0447\u0435 \u0437\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u042f \u0442\u043e\u0433\u0434\u0430 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043e\u0441\u043e\u0437\u043d\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0438\u0441\u0442\u0438\u043d\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u0431\u043b\u0438\u043d \u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u0445. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u044f \u043f\u043e\u0431\u0435\u0436\u0430\u043b \u0432 \u0447\u0430\u0442 \u0438 \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u0440\u043e\u0434\u0438\u043b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u043c.<\/p>\n<blockquote>\n<p>\u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438.<\/p>\n<\/blockquote>\n<p>\u042f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043b \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b \u0441\u043e\u0432\u0435\u0442\u043e\u0432. \u0421\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e:<\/p>\n<blockquote>\n<p>&#8212; \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435 uv, \u0447\u0442\u043e\u0431 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438 \u0441\u0430\u043c.<\/p>\n<p>&#8212; \u0420\u0430\u0441\u043f\u0430\u0440\u0441\u0438 .obj \u0441\u0430\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>&#8212; \u0421\u0434\u0435\u043b\u0430\u0439 uv \u0440\u0430\u0437\u0432\u0435\u0442\u043a\u0443 \u0438 \u043d\u0430\u0442\u044f\u043d\u0443 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u042f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u0438\u0437 1 \u043e\u0442\u0432\u0435\u0442\u0430, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 uv, \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b. \u0414\u0430 \u0438 \u0433\u0434\u0435 \u044d\u0442\u0438 uv \u0431\u0440\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>\u0418\u0437 \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0442\u0430, \u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u043c\u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0410 \u0442\u0440\u0435\u0442\u0438\u0439 \u043e\u0442\u0432\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0445\u043e\u0442\u044c \u0442\u043e\u0436\u0435 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u044b\u043c, \u043d\u043e \u043c\u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b\u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442. \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443.<\/p>\n<p>\u0412 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u044f \u043d\u0430\u0448\u0435\u043b \u0433\u0430\u0439\u0434\u044b \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 cinema 4d uv \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0442\u0430\u043c \u0436\u0435 \u043d\u0430\u0448\u0435\u043b \u043a\u0430\u043a \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443. \u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0437\u0430\u043b\u0438\u0442\u044c \u043f\u043e \u0433\u0440\u0430\u043d\u044f\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0435\u0439(faces) \u043d\u0443\u0436\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. \u042f \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0440\u0435\u0448\u0430\u0435\u0442 \u043c\u043e\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0412\u044b\u043f\u043b\u044e\u043d\u0443\u0432 texture.png \u0438 \u043d\u043e\u0432\u044b\u0439 obj \u0441 uv (\u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b).<\/p>\n<h3>\u0411\u0430\u0433 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u043e\u0440\u0442\u0438\u043b \u043d\u0435\u0440\u0432\u044b<\/h3>\n<p>\u042f \u043f\u043e\u0431\u0435\u0436\u0430\u043b \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430&nbsp;<a href=\"https:\/\/webglfundamentals.org\/webgl\/lessons\/ru\/webgl-3d-textures.html\" rel=\"noopener noreferrer nofollow\"><u>webgl fund \u043a\u0430\u043a \u043d\u0430\u0442\u044f\u043d\u0443\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443<\/u><\/a>. \u041a\u043e\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0421\u0434\u0435\u043b\u0430\u043b \u043a\u0430\u043a \u0432 \u0433\u0430\u0439\u0434\u0435 \u0438 \u0434\u0443\u043c\u0430\u043b, \u0449\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e!<\/p>\n<pre><code class=\"objectivec\">\/\/ vertex precision mediump float;  attribute vec4 a_position; attribute vec2 a_texture_coords; \/\/ \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438  uniform mat4 u_matrix;  varying vec2 v_texture_coords;  void main(){     gl_Position = u_matrix * a_position;      v_texture_coords = a_texture_coords; \/\/ \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440  }<\/code><\/pre>\n<pre><code class=\"objectivec\">\/\/ fragment precision mediump float;  varying vec2 v_texture_coords; \/\/ \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d\u044b uniform sampler2D u_texture; \/\/ \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430  void main(){   gl_FragColor = texture2D(u_texture, v_texture_coords); }<\/code><\/pre>\n<pre><code class=\"javascript\"> \/\/...   const textureCoordsLocation = gl.getAttribLocation(     program,     \"a_texture_coords\"   ); \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442   \/\/ ...   gl.enableVertexAttribArray(textureCoordsLocation);   gl.bindBuffer(gl.ARRAY_BUFFER, apple.textureBuffer); \/\/ \u0437\u0430\u0431\u0438\u043d\u0434\u0438\u043b\u0438 \u0431\u0443\u0444\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0434\u0430\u043b\u0430 \u043b\u0438\u0431\u0430 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438   gl.vertexAttribPointer(     textureCoordsLocation,     apple.textureBuffer.itemSize,     gl.FLOAT,     false,     0,     0   );    const texture = gl.createTexture(); \/\/ \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b   gl.bindTexture(gl.TEXTURE_2D, texture); \/\/ \u0431\u0438\u043d\u0434\u0438\u043c    gl.texImage2D(     gl.TEXTURE_2D,     0,     gl.RGBA,     1,     1,     0,     gl.RGBA,     gl.UNSIGNED_BYTE,     new Uint8Array([0, 0, 255, 255])   ); \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0448\u043a\u0443, \u043f\u043e\u043a\u0430 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430    const image = new Image();   image.src = textureImg; \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443   image.onload = () =&gt; {     gl.bindTexture(gl.TEXTURE_2D, texture);     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);     gl.generateMipmap(gl.TEXTURE_2D);     gl.texParameteri(       gl.TEXTURE_2D,       gl.TEXTURE_MIN_FILTER,       gl.LINEAR_MIPMAP_LINEAR     );     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); \/\/ \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u0432\u0435\u0434\u043e\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0447\u0442\u043e\u0431 \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043a\u0440\u0443\u0442\u043e     drawScene();   };    \/\/ ...   const textureLocation = gl.getUniformLocation(program, \"u_texture\");    function drawScene() {     \/\/ ...     gl.uniform1i(textureLocation, 0);     \/\/ ...   }<\/code><\/pre>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u043d\u043d\u044b \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0442 \u044d\u0442\u043e&nbsp;<strong>\u0447\u0443\u0434\u043e\u0432\u0438\u0449\u0435<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24c\/bcb\/dab\/24cbcbdabadf13d39837a4bf1ee3540e.png\" width=\"800\" height=\"500\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0427\u0442\u043e \u0437\u0430??<\/strong><\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u044d\u043f\u043e\u043f\u0435\u044f \u0432 \u0446\u0435\u043b\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0434\u0435\u043d\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u042f \u043c\u0430\u043b\u043e, \u0447\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043b \u0438 \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u044f \u043a\u043e\u0441\u044f\u0447\u0443, \u0430 \u043d\u0435 \u043b\u0438\u0431\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u0442\u043a\u0430\u0442\u0438\u043b \u043a\u043e\u0434 \u0441 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043e\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0437\u0430\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043e\u043f\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8b3\/e38\/c98\/8b3e38c988f7b9f396c2d69e62718f83.png\" width=\"800\" height=\"500\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0427\u0442\u043e \u0437\u0430 \u0444\u0438\u0433\u043d\u044f?<\/strong><\/p>\n<p>\u042f \u0442\u043e\u0433\u0434\u0430 \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u043b \u0441 uv mapping. \u041f\u043e\u0438\u0433\u0440\u0430\u0432 \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \u0441 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0432 blender \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e \u0447\u0443\u0434\u043e, \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0430 \u043f\u043e\u0447\u0438\u043d\u0438\u043b\u0430\u0441\u044c!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fc0\/e20\/47b\/fc0e2047ba44ff915072170a507160c2.png\" width=\"800\" height=\"500\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u0435\u0449\u0435 \u043a\u0443\u0447\u0443 \u0447\u0430\u0441\u043e\u0432 \u0432 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0432 \u0447\u0435\u043c \u0436\u0435 \u0434\u0435\u043b\u043e. \u042f \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e blender \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u043b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 4 \u0442\u043e\u0447\u0435\u043a \u0432 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 3 \u0442\u043e\u0447\u0435\u043a. \u0418 \u043a\u043e\u0433\u0434\u0430 \u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u043b \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0442\u043e \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0438 \u043e\u043f\u044f\u0442\u044c \u043b\u043e\u043c\u0430\u043b\u0438\u0441\u044c. \u0418 \u0442\u043e\u0433\u0434\u0430, \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b\u0430 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 webgl-obj-loader. \u041e\u043d\u0430 \u043b\u043e\u043c\u0430\u043b\u0430\u0441\u044c \u0435\u0441\u043b\u0438 \u0435\u0439 \u043f\u043e\u0434\u0430\u0432\u0430\u043b\u0438 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 4 \u0442\u043e\u0447\u0435\u043a (\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043d\u0435 \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b\u0438 \u0432 \u0447\u0430\u0442\u0435).<\/p>\n<p>\u042f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0431\u0435\u0436\u0430\u043b \u043f\u0438\u0441\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/github.com\/frenchtoast747\/webgl-obj-loader\/issues\/69\" rel=\"noopener noreferrer nofollow\"><u>\u0436\u0430\u043b\u043e\u0431\u0443 \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443<\/u><\/a>, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0430\u0448\u0435\u043b&nbsp;<a href=\"https:\/\/github.com\/frenchtoast747\/webgl-obj-loader\/pull\/66\" rel=\"noopener noreferrer nofollow\"><u>pull request<\/u><\/a>&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0430\u0432\u0438\u043b \u044d\u0442\u0443 \u0431\u0430\u0433\u0443 \u0438 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u043b \u0435\u0433\u043e \u043a \u0441\u0432\u043e\u0435\u043c\u0443 issue.<\/p>\n<h3>\u041e\u0442\u043a\u0430\u0437 \u043e\u0442 webgl-obj-loader<\/h3>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0443\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0435\u0433\u043e \u044f \u0445\u043e\u0442\u0435\u043b. \u041b\u0438\u043d\u0438\u0438 \u0431\u044b\u043b\u0438 \u0442\u043e\u043b\u0441\u0442\u044b\u043c\u0438, \u043f\u043b\u044e\u0441 \u0447\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u0435\u0439 \u0431\u044b\u043b\u043e \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435, \u0442\u0435\u043c \u043f\u043b\u043e\u0442\u043d\u0435\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<br \/>\u0415\u0449\u0435 \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443 \u0432 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0449\u0438\u043a\u0430\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439, \u043e\u043d\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0438 \u043b\u0438\u043d\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/456\/f00\/4c8\/456f004c8a2ef7feff542ac05926c447.png\" width=\"1670\" height=\"938\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0438\u0434\u044f \u044d\u0442\u043e, \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e, \u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u043b \u043a\u0430\u043a&#8230;<\/p>\n<p>\u0418 \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0440\u044b\u0446\u0430\u0440\u044c \u0432 \u0441\u0438\u044f\u044e\u0449\u0438\u0445 \u0434\u043e\u0441\u043f\u0435\u0445\u0430\u0445 \u0438 \u0441\u043f\u0430\u0441 \u043c\u0435\u043d\u044f \u0438\u0437 \u043b\u043e\u0433\u043e\u0432\u0430 \u0431\u0435\u0441\u0441\u0438\u043b\u0438\u044f. \u041e\u043d \u0431\u044b\u043b \u0442\u0435\u043c \u043a\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b:<\/p>\n<blockquote>\n<p>\u0420\u0430\u0441\u043f\u0430\u0440\u0441\u0438 .obj \u0441\u0430\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u043a\u0430\u043a \u043c\u043d\u0435 \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442. \u0418 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0430\u043a\u0438\u0434\u0430\u043b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 three.js.<\/p>\n<p><iframe id=\"60ea638cf2fa57a26f179f7b\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/60ea638cf2fa57a26f179f7b\" class=\"embed_video embed__content\" allowfullscreen=\"true\"><\/iframe><\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u044b\u043b \u0441\u0432\u0435\u0442\u043e\u043c. \u042f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c&nbsp;<strong>webgl-obj-loader<\/strong>&nbsp;\u0438 \u0437\u0430\u0436\u0438\u0442\u044c \u043a\u0430\u043a \u0447\u0435\u043b\u043e\u0432\u0435\u043a. \u0412\u044b\u0431\u0440\u043e\u0441\u0438\u043b \u0435\u0433\u043e \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u0439.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/567082\/\"> https:\/\/habr.com\/ru\/post\/567082\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<h3>\u0412\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0434\u0438 \u0447\u0435\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c WebGL<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0447\u0442\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043a\u0443\u0441\u0442\u0430\u0440\u043d\u044b\u0439 REPL, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043c\u043e\u0433 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<blockquote>\n<p>\u042f \u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0441\u043f\u0443\u0441\u0442\u044f 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0438 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 -&gt;<\/p>\n<\/blockquote>\n<p><iframe id=\"60ea6058920526a288c7e146\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/60ea6058920526a288c7e146\" class=\"embed_video embed__content\" allowfullscreen=\"true\"><\/iframe><\/p>\n<p>\u0412\u043e\u043e\u0440\u0443\u0436\u0438\u0441\u044c \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0438 \u0440\u0435\u043f\u043b\u043e\u043c, \u044f \u043f\u043e\u0448\u0435\u043b \u0438\u0441\u043a\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u043c\u043d\u0435 .obj \u0444\u0430\u0439\u043b\u0438\u043a \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u044b.\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u043e\u043b\u0435\u0435\/\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043b\u043e \u043c\u043d\u0435 \u0444\u0430\u0439\u043b\u0438\u043a \u044d\u0442\u043e \u0431\u044b\u043b npm \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/webgl-obj-loader\" rel=\"noopener noreferrer nofollow\"><u>webgl-obj-loader<\/u><\/a>.<\/p>\n<h4>\u041f\u0435\u0440\u0432\u044b\u0435 \u043d\u0430\u0431\u0440\u043e\u0441\u043a\u0438<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u044f \u0441\u0440\u0430\u0437\u0443 \u0441\u043c\u043e\u0433 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/p>\n<pre><code class=\"objectivec\">\/\/ vertex attribute vec4 a_position; \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u044f\u0431\u043b\u043e\u043a\u0430.  uniform mat4 u_matrix; \/\/ \u043c\u0430\u0442\u0440\u0438\u0446\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c  void main(){     gl_Position = u_matrix * a_position; \/\/ \u0443 glsl \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438. \u0422\u0443\u0442 \u043e\u043d \u0441\u0430\u043c \u0437\u0430 \u043d\u0430\u0441 \u043f\u0435\u0440\u0435\u043c\u043d\u043e\u0436\u0430\u0435\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043d\u0430 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u043c\u0435\u0449\u0430\u0435\u0442 \u0438\u0445 \u043a\u0443\u0434\u0430 \u043d\u0430\u0434\u043e. }<\/code><\/pre>\n<pre><code class=\"objectivec\">\/\/ fragment precision mediump float; \/\/ \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f.   void main() {   gl_FragColor = vec4(1., 0., 0., 1.); \/\/ \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u043c }<\/code><\/pre>\n<p>\u041a\u043e\u0434<\/p>\n<pre><code class=\"javascript\">import { vertex, fragment } from '.\/shaders'; \/\/ \u0447\u0435\u0440\u0435\u0437 parcel \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u044b import { createCanvas, createProgramFromTexts } from \".\/helpers\";  import { m4 } from \".\/matrix3d\"; \/\/ \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 webgl \u043d\u0430 webgl fund, \u043c\u043d\u0435 \u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 3\u0434 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438. import appleObj from \".\/apple.obj\"; \/\/ \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0430 \u044f\u0431\u043b\u043e\u043a\u0430 import * as OBJ from \"webgl-obj-loader\"; \/\/ \u043d\u0430\u0448\u0430 \u043b\u0438\u0431\u0430 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442 obj   function main() {   const apple = new OBJ.Mesh(appleObj); \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c   const canvas = createCanvas(); \/\/ \u0441\u043e\u0437\u0434\u0430\u044e canvas \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432 body   const gl = canvas.getContext(\"webgl\"); \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442   const program = createProgramFromTexts(gl, vertex, fragment); \/\/ \u0441\u043e\u0437\u0434\u0430\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0438\u0437 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432   gl.useProgram(program); \/\/ \u043b\u0438\u043d\u043a\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442   const positionLocation = gl.getAttribLocation(program, \"a_position\");    \/\/ \u0443 \u043b\u0438\u0431\u044b \u0431\u044b\u043b\u0430 \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430 \u043c\u0435\u043d\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430 \u0431\u0443\u0444\u0435\u0440 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043b\u0430 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0443\u0444\u0435\u0440\u044b. \u0418\u0437 .obj \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u044b, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b.   OBJ.initMeshBuffers(gl, apple);    gl.enableVertexAttribArray(positionLocation); \/\/ \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0437\u043d\u0430\u044e, \u043d\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0448\u044c, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.   gl.vertexAttribPointer(     positionLocation,     apple.vertexBuffer.itemSize, \/\/ \u043b\u0438\u0431\u0430 \u0441\u0430\u043c\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u0431\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0435\u043b, \u0447\u0442\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u0443     gl.FLOAT,     false, \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u044d\u0442\u043e \u0447\u0442\u043e\u0431 \u043d\u0435 \u043f\u044b\u0442\u0430\u043b\u043e\u0441\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 1 \u0432 1. \u0410\u043b\u044f 255 -&gt; 0.255.     0,     0   ); \/\/ \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u0412 \u043d\u0435\u0435 \u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b   const matrixLocation = gl.getUniformLocation(program, \"u_matrix\");    let translation = [canvas.width \/ 2, 400, 0]; \/\/ \u0441\u043c\u0435\u0449\u0430\u044e \u043d\u0430 \u0446\u0435\u043d\u0442\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 400 px \u0432\u043d\u0438\u0437   let rotation = [degToRad(180), degToRad(0), degToRad(0)]; \/\/ \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043d\u0443\u043b\u044f\u043c   let scale = [5, 5, 5]; \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443 \u0432 5 \u0440\u0430\u0437. scaleX, scaleY, scaleZ    \/\/ \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u044c\u044e \u043f\u043e\u0440\u0442   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);   gl.enable(gl.DEPTH_TEST); \/\/ \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0443 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439, \u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0432\u0438\u0434\u0435\u043d.    function drawScene() {     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); \/\/ \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043a\u0430\u043d\u0432\u0430\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440      const matrix = m4.multiply(       m4.identity(), \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u0443\u044e \u043c\u0430\u0442\u0440\u0438\u0446\u0443. \u041c\u0430\u0442\u0440\u0438\u0446\u0443 \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.       m4.orthographic(         0,         gl.canvas.width,         gl.canvas.height,         0,         400,         -400       ), \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0438 \u044f\u0431\u043b\u043e\u043a\u0430 \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e -1 \u0434\u043e 1.       m4.translation(...translation), \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443        m4.xRotation(rotation[0]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e X       m4.yRotation(rotation[1]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e Y       m4.zRotation(rotation[2]), \/\/ \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u043e Z       m4.scaling(...scale) \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443     ); \/\/ \u043f\u0435\u0440\u0435\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u0447\u0442\u043e\u0431 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c 1 \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438 \u043f\u0440\u043e\u043a\u0438\u043d\u0435\u043c \u0432 \u0448\u0435\u0439\u0434\u0435\u0440     gl.uniformMatrix4fv(matrixLocation, false, matrix); \/\/ \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u0443     \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e \u0431\u0443\u0444\u0435\u0440 \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c\u0438     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, apple.indexBuffer);      \/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u044f\u0431\u043b\u043e\u043a\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432     gl.drawElements(       gl.TRIANGLES,       apple.indexBuffer.numItems,       gl.UNSIGNED_SHORT,       0     );   }    drawScene();    \/\/ \u0422\u0443\u0442 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u044f\u043a\u0438\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u0447\u0442\u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b.   \/\/ ...   \/\/ }  main();<\/code><\/pre>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0448\u0430\u0433 \u0434\u043b\u044f webgl, \u043d\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0441\u043a\u0430\u0447\u043e\u043a \u0434\u043b\u044f&nbsp;<strong>\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430<\/strong>.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435&nbsp;index?<\/h4>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043b\u0438\u0431\u043e\u0439 \u0443\u0437\u043d\u0430\u043b \u043f\u0440\u043e \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0449\u044c: \u0438\u043d\u0434\u0435\u043a\u0441\u044b.<br \/>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432 .obj \u0444\u0430\u0439\u043b\u0435 \u043a\u0440\u043e\u043c\u0435 \u0432\u0435\u0440\u0448\u0438\u043d \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u043e\u0440\u043c\u0430\u043b\u0438, \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 (faces).<br \/>\u0427\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435?<\/p>\n<ul>\n<li>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0446\u0438\u0444\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0448\u0435\u0439\u0434\u0435\u0440\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u0433\u0434\u0435 \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0435, \u0447\u0442\u043e\u0431 \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0438\u0445 \u043d\u0435\u0442, \u0442\u043e \u0448\u0435\u0439\u0434\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u043d\u0435 \u0437\u043d\u0430\u044f \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442. \u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041d\u043e\u0440\u043c\u0430\u043b\u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043d\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435, \u0447\u0442\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043d\u044c \u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u0430(\u043c\u043e\u0434\u0435\u043b\u044c) \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u0435\u0442 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c &#8212; \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0432\u0435\u0440\u0448\u0438\u043d, \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0435\u0439. \u041f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 (\u0430\u043b\u044f cinema4d \u0438 \u0434\u0440\u0443\u0433\u0438\u0445), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u0438\u0433\u043e\u043d\u044b \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0434\u0435\u043b\u044c\u043a\u0443. \u0422\u0430\u043a \u0432\u043e\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043c\u044b \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u043b\u0438 \u0432 2 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0432\u0435\u0440\u0448\u0438\u043d \u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0418 webgl \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0438 \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 (\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 size, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0435\u043b, \u0447\u0442\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u0443) \u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0447\u0438\u0441\u0435\u043b \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c&nbsp;<code>gl.TRIANGLES<\/code>&nbsp;\u043d\u0430&nbsp;<code>gl.LINES<\/code>. \u0418 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u0434\u0430, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u044f \u043e\u0436\u0438\u0434\u0430\u043b. \u0413\u0434\u0435 \u043c\u043e\u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u043a\u0430\u043a \u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0447\u0435 \u0437\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u042f \u0442\u043e\u0433\u0434\u0430 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043e\u0441\u043e\u0437\u043d\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0438\u0441\u0442\u0438\u043d\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u0431\u043b\u0438\u043d \u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u0445. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u044f \u043f\u043e\u0431\u0435\u0436\u0430\u043b \u0432 \u0447\u0430\u0442 \u0438 \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u0440\u043e\u0434\u0438\u043b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u043c.<\/p>\n<blockquote>\n<p>\u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438.<\/p>\n<\/blockquote>\n<p>\u042f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043b \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b \u0441\u043e\u0432\u0435\u0442\u043e\u0432. \u0421\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e:<\/p>\n<blockquote>\n<p>&#8212; \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0432 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435 uv, \u0447\u0442\u043e\u0431 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438 \u0441\u0430\u043c.<\/p>\n<p>&#8212; \u0420\u0430\u0441\u043f\u0430\u0440\u0441\u0438 .obj \u0441\u0430\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>&#8212; \u0421\u0434\u0435\u043b\u0430\u0439 uv \u0440\u0430\u0437\u0432\u0435\u0442\u043a\u0443 \u0438 \u043d\u0430\u0442\u044f\u043d\u0443 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u042f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u0438\u0437 1 \u043e\u0442\u0432\u0435\u0442\u0430, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 uv, \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b. \u0414\u0430 \u0438 \u0433\u0434\u0435 \u044d\u0442\u0438 uv \u0431\u0440\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>\u0418\u0437 \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u0432\u0435\u0442\u0430, \u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u043c\u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0410 \u0442\u0440\u0435\u0442\u0438\u0439 \u043e\u0442\u0432\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0445\u043e\u0442\u044c \u0442\u043e\u0436\u0435 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u044b\u043c, \u043d\u043e \u043c\u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b\u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442. \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443.<\/p>\n<p>\u0412 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u044f \u043d\u0430\u0448\u0435\u043b \u0433\u0430\u0439\u0434\u044b \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 cinema 4d uv \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0442\u0430\u043c \u0436\u0435 \u043d\u0430\u0448\u0435\u043b \u043a\u0430\u043a \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443. \u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u0437\u0430\u043b\u0438\u0442\u044c \u043f\u043e \u0433\u0440\u0430\u043d\u044f\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0435\u0439(faces) \u043d\u0443\u0436\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. \u042f \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0440\u0435\u0448\u0430\u0435\u0442 \u043c\u043e\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u0412\u044b\u043f\u043b\u044e\u043d\u0443\u0432 texture.png \u0438 \u043d\u043e\u0432\u044b\u0439 obj \u0441 uv (\u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b).<\/p>\n<h3>\u0411\u0430\u0433 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u043e\u0440\u0442\u0438\u043b \u043d\u0435\u0440\u0432\u044b<\/h3>\n<p>\u042f \u043f\u043e\u0431\u0435\u0436\u0430\u043b \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430&nbsp;<a href=\"https:\/\/webglfundamentals.org\/webgl\/lessons\/ru\/webgl-3d-textures.html\" rel=\"noopener noreferrer nofollow\"><u>webgl fund \u043a\u0430\u043a \u043d\u0430\u0442\u044f\u043d\u0443\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443<\/u><\/a>. \u041a\u043e\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0421\u0434\u0435\u043b\u0430\u043b \u043a\u0430\u043a \u0432 \u0433\u0430\u0439\u0434\u0435 \u0438 \u0434\u0443\u043c\u0430\u043b, \u0449\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e!<\/p>\n<pre><code class=\"objectivec\">\/\/ vertex precision mediump float;  attribute vec4 a_position; attribute vec2 a_texture_coords; \/\/ \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438  uniform mat4 u_matrix;  varying vec2 v_texture_coords;  void main(){     gl_Position = u_matrix * a_position;      v_texture_coords = a_texture_coords; \/\/ \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440  }<\/code><\/pre>\n<pre><code class=\"objectivec\">\/\/ fragment precision mediump float;  varying vec2 v_texture_coords; \/\/ \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d\u044b uniform sampler2D u_texture; \/\/ \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430  void main(){   gl_FragColor = texture2D(u_texture, v_texture_coords); }<\/code><\/pre>\n<pre><code class=\"javascript\"> \/\/...   const textureCoordsLocation = gl.getAttribLocation(     program,     \"a_texture_coords\"   ); \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442   \/\/ ...   gl.enableVertexAttribArray(textureCoordsLocation);   gl.bindBuffer(gl.ARRAY_BUFFER, apple.textureBuffer); \/\/ \u0437\u0430\u0431\u0438\u043d\u0434\u0438\u043b\u0438 \u0431\u0443\u0444\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0434\u0430\u043b\u0430 \u043b\u0438\u0431\u0430 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438   gl.vertexAttribPointer(     textureCoordsLocation,     apple.textureBuffer.itemSize,     gl.FLOAT,     false,     0,     0   );    const texture = gl.createTexture(); \/\/ \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b   gl.bindTexture(gl.TEXTURE_2D, texture); \/\/ \u0431\u0438\u043d\u0434\u0438\u043c    gl.texImage2D(     gl.TEXTURE_2D,     0,     gl.RGBA,     1,     1,     0,     gl.RGBA,     gl.UNSIGNED_BYTE,     new Uint8Array([0, 0, 255, 255])   ); \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0448\u043a\u0443, \u043f\u043e\u043a\u0430 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430    const image = new Image();   image.src = textureImg; \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443   image.onload = () =&gt; {     gl.bindTexture(gl.TEXTURE_2D, texture);     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);     gl.generateMipmap(gl.TEXTURE_2D);     gl.texParameteri(       gl.TEXTURE_2D,       gl.TEXTURE_MIN_FILTER,       gl.LINEAR_MIPMAP_LINEAR     );     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); \/\/ \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u0432\u0435\u0434\u043e\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0447\u0442\u043e\u0431 \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043a\u0440\u0443\u0442\u043e     drawScene();   };    \/\/ ...   const textureLocation = gl.getUniformLocation(program, \"u_texture\");    function drawScene() {     \/\/ ...     gl.uniform1i(textureLocation, 0);     \/\/ ...   }<\/code><\/pre>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u043d\u043d\u044b \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0442 \u044d\u0442\u043e&nbsp;<strong>\u0447\u0443\u0434\u043e\u0432\u0438\u0449\u0435<\/strong>:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0427\u0442\u043e \u0437\u0430??<\/strong><\/p>\n<p>\u0418<\/p>\n<p><\/br><\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-326261","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/326261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=326261"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/326261\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=326261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=326261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=326261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}