initial commit

6 files changed, 948 insertions, 0 deletions

diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
new file mode 100644
index 0000000000..7205f72e7a
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
@@ -0,0 +1,265 @@
+---
+title: Создание простой сцены с помощью Three.js
+slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
+tags:
+  - 3D
+  - Beginner
+  - Games
+  - Tutorial
+translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">В 3D сцене любой игры, даже самой простой, есть стандартные сущности, такие как поверхности, расположенные в координатной системе, камера, для того, чтобы их видеть, света и материалы, для того, чтобы они лучше выглядели, анимации, чтобы их оживить и тд.<strong> Three.js</strong>, как и любая другая 3D библиотека, предоставляет встроенные функции, которые помогут вам в реализации 3D. <span class="seoSummary">В этой статье мы покажем вам основы использования Three, включая настройку среды, структуру необходимого HTML, фундаментальные объекты Three и как создать простейшую сцену.</span></p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Мы выбрали Three, потому что это одна из самых популярных <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> библиотек и она достаточно проста в освоении. Это не значит, что она самая лучшая, вы можете выбрать любую другую, например <a href="http://www.ambiera.com/copperlicht/index.html">CopperLicht</a>, <a href="http://www.glge.org/">GLGE</a>, <a href="https://code.google.com/p/o3d/">O3D</a> и тд.</p>
+</div>
+
+<h2 id="Настройка_среды">Настройка среды</h2>
+
+<p>Чтобы начать разработку с Three.js, нужно:</p>
+
+<ul>
+ <li>Удостовериться, что вы используете современную версию браузера с поддеркой <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, например, Firefox или Chrome.</li>
+ <li>Создать папку для экспериментов.</li>
+ <li>Сохранить копию <a href="http://threejs.org/build/three.min.js">последней версии библиотеки Three.js</a> в вашей папке.</li>
+ <li>Открыть <a href="http://threejs.org/docs/">документацию Three.js</a> в отдельной вкладке.</li>
+</ul>
+
+<h2 id="HTML_структура">HTML структура</h2>
+
+<p>Здесь находится HTML структура, которую мы будем использовать:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;MDN Games: Three.js demo&lt;/title&gt;
+	&lt;style&gt;
+		body { margin: 0; padding: 0; }
+		canvas { width: 100%; height: 100%; }
+	&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script src="three.min.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+	var WIDTH = window.innerWidth;
+	var HEIGHT = window.innerHeight;
+	/* весь наш JavaScript код будет после этого комментария */
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Она содержит основную информацию: {{htmlelement("title")}}, CSS, чтобы сделать <code>ширину</code> и <code>высоту</code> {{htmlelement("canvas")}} элемента равным странице. В первом элементе {{htmlelement("script")}} мы подключаем Three.js, во втором будем писать наш код, в котором уже создали 2 переменные для хранения <code>width</code> и <code>height</code>.</p>
+
+<p>Прежде чем продолжить, скопируйте этот код в новый файл и сохраните в вашей рабочей директории под именем <code>index.html</code>.</p>
+
+<h2 id="Renderer">Renderer</h2>
+
+<p>Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядить одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.</p>
+
+<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize(WIDTH, HEIGHT);
+renderer.setClearColor(0xDDDDDD, 1);
+document.body.appendChild(renderer.domElement);
+</pre>
+
+<p>Создаем новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM элемент к странице. Вы могли заметить параметр <code>antialias</code> в первой строке — если он установлен в <code>true</code>, то границы объектов сглаживаются. Метод <code>setClearColor()</code> устанавливает цвет бэкграунда (мы установили в 0xDDDDDD, светло-серый, значение по цмолчанию - черный).</p>
+
+<p>Добавьте этот код в ваш элемент {{htmlelement("script")}}.</p>
+
+<h2 id="Сцена">Сцена</h2>
+
+<p>Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект <code>Scene</code>. Давайте создадим его, добавив следующих код:</p>
+
+<pre class="brush: js notranslate">var scene = new THREE.Scene();
+</pre>
+
+<p>Позже, мы будем использовать метод <code>.add()</code> для добавления объектов в сцену.</p>
+
+<h2 id="Камера">Камера</h2>
+
+<p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим ее позицию в координатной системе и направим ее на нужную нам точку, где расположено то, что мы хотим видеть:</p>
+
+<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+camera.position.z = 50;
+scene.add(camera);
+</pre>
+
+<p>Добавьте следующий код в программу.</p>
+
+<p>Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая - перспективная (Perspective). Чтобы инициализировать ее, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:</p>
+
+<ul>
+ <li>Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.</li>
+ <li>Соотношение сторон установлено в соотношение сторон окна браузера. Можно установить, например, в 16 ⁄ 9. Значение по умолчанию1.</li>
+ <li>Координата <code>z</code>, равная 50, это дистанция от камеры до начала координат сцены вдоль оси <code>z</code>. Мы установили такое значение, чтобы увидеть объекты в сцене. Значения <code>x</code> и <code>y</code> по умолчанию равны 0.</li>
+</ul>
+
+<p>Стоит поэкспериментировать с этими значениями, чтобы лучше разобраться в том, как они влияют на отрисовку сцены.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: значения позиции  (например координата z) безразмерны, устанавливайте их так, чтобы вам было удобно с ними работать.</p>
+</div>
+
+<h2 id="Отрисовка_сцены">Отрисовка сцены</h2>
+
+<p>Все уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам все равно нужно запустить рендеринг. Функция <code>render()</code> выполнит эту работу с небольшой помощью <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, которая заставляет сцену постоянно перерисовываться в каждом кадре:</p>
+
+<pre class="brush: js notranslate">function render() {
+	requestAnimationFrame(render);
+	renderer.render(scene, camera);
+}
+render();
+</pre>
+
+<p>На каждом новом кадре вызывается функция <code>render()</code>, а <code>renderer</code> рендерит <code>scene</code> и <code>camera</code>. Сразу после объявления функции мы в первый раз вызываем ее, чтобы запустить цикл, после чего он будет использоваться бесконечно.</p>
+
+<p>Еще раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!</p>
+
+<h2 id="Geometry">Geometry</h2>
+
+<p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p>
+
+<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+</pre>
+
+<p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p>
+
+<h2 id="Material">Material</h2>
+
+<p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p>
+
+<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+</pre>
+
+<p>Add this line below the previously added.</p>
+
+<p>Our material is now ready, what next?</p>
+
+<h2 id="Mesh">Mesh</h2>
+
+<p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p>
+
+<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+</pre>
+
+<p>Again, add this line below the one you previously added.</p>
+
+<h2 id="Добавление_куба_в_сцену">Добавление куба в сцену</h2>
+
+<p>Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы долны сделать - добавить куб на сцену. Добавте в код эту строку:</p>
+
+<pre class="brush: js notranslate">scene.add(cube);
+</pre>
+
+<p>Есди вы сохраните код и обновите вкладку браузера, вы увидете квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У обьектов есть полезное свойтво - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Чтож давайте немного повернем его, чтобы видеть больше сторон.  Добавть в конец кода эту строку:</p>
+
+<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0);
+</pre>
+
+<p>Поздровляю, Вы создали обьект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:</p>
+
+<p><img alt="Blue cube on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11849/cube.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+
+<p>Весь код который мы создали:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}</p>
+
+<p>Вы также можете <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">просмотреть на GitHub</a>.</p>
+
+<h2 id="More_shapes_and_materials">More shapes and materials</h2>
+
+<p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p>
+
+<pre class="brush: js notranslate">cube.position.x = -25;
+</pre>
+
+<p>Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p>
+
+<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
+var torus = new THREE.Mesh(torusGeometry, phongMaterial);
+scene.add(torus);
+</pre>
+
+<p>These lines will add a torus geometry; the <code>TorusGeometry()</code> method's parameters define, and the parameters are <code>radius</code>, <code>tube diameter</code>, <code>radial segment count</code>, and <code>tubular segment count</code>. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black.</p>
+
+<p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p>
+
+<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
+var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
+dodecahedron.position.x = 25;
+scene.add(dodecahedron);
+</pre>
+
+<p>This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, <code>DodecahedronGeometry(),</code> defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus.</p>
+
+<p>As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.</p>
+
+<h2 id="Lights">Lights</h2>
+
+<p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p>
+
+<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF);
+light.position.set(-10, 15, 50);
+scene.add(light);
+</pre>
+
+<p>We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.</p>
+
+<p><img alt="Shapes: blue cube, dark yellow torus and dark gray dodecahedron on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11851/shapes.png" style="height: 400px; width: 600px;"></p>
+
+<p>This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!</p>
+
+<h2 id="Анимация">Анимация</h2>
+
+<p>Мы можем использовать 'rotation', чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесенные изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.</p>
+
+<h3 id="Вращение">Вращение</h3>
+
+<p>Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавте эту строкуу кода сразу после: <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p>
+
+<pre class="brush: js notranslate">cube.rotation.y += 0.01;
+</pre>
+
+<p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p>
+
+<h3 id="Scaling">Scaling</h3>
+
+<p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p>
+
+<pre class="brush: js notranslate">var t = 0;
+</pre>
+
+<p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p>
+
+<pre class="brush: js notranslate">t += 0.01;
+torus.scale.y = Math.abs(Math.sin(t));
+</pre>
+
+<p>We use <code>Math.sin</code>, ending up with quite an interesting result. This scales the torus, repeating the process, as <code>sin</code> is a periodic function. We're wrapping the scale value in <code>Math.abs</code>, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1,  negative values might render out torus in unexpected way. In this case it looks black half the time.</p>
+
+<p>Now, onto movement.</p>
+
+<h3 id="Moving">Moving</h3>
+
+<p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p>
+
+<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2);
+</pre>
+
+<p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Here's the final code:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p>
+
+<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
+
+<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html
new file mode 100644
index 0000000000..ee839e283f
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html
@@ -0,0 +1,229 @@
+---
+title: GLSL Шейдеры
+slug: Games/Techniques/3D_on_the_web/GLSL_Shaders
+tags:
+  - GLSL
+  - OpenGL
+  - Shader
+  - three.js
+  - Шейдер
+translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary"><span class="seosummary">Шейдеры используют GLSL (</span><span class="ILfuVd">OpenGL Shading Language</span>)<span class="seosummary">, специальный язык программирования шейдеров от OpenGL, который во многом напоминает С (Си). GLSL выполняется напрямую графическим процессором. Существует два типа шейдеров: вершинные шейдеры и фрагментные (пиксельные) шейдеры. Вершинные шейдеры изменяют положение фигуры в системе 3D координат. Фрагментные шейдеры расчитывают цвет и другие атрибуты отображения.</span></p>
+
+<p>GLSL не так прост в изучении, как JavaScript. GLSL является строготипизированым и в нем часто используются операции с векторами и матрицами. It can get very complicated — very quickly. В этой статье мы создадим небольшой пример кода, который отображает куб. Чтобы ускорить разработку, мы будем использовать Three.js API.</p>
+
+<p>Как Вы помните из статьи о <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">теоретических основах</a>, вертекс или вершина это точка в системе 3D кординат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.</p>
+
+<h2 id="shader_types" name="shader_types">Типы шейдеров</h2>
+
+<p>Шейдер, по сути, это функция, которая требуется для отображения чего-либо на экране. Шейдер запускается в <a href="https://en.wikipedia.org/wiki/GPU">GPU</a> (graphics processing unit), который оптимизирован для выполнения подобных операций. Using a GPU to deal with shaders offloads some of the number crunching from the CPU. This allows the CPU to focus its processing power on other tasks, like executing code.</p>
+
+<h3 id="vertex_shader" name="vertex_shader">Вершинный шейдер</h3>
+
+<p>Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the <code>gl_Position</code> variable — this is a special, global, and built-in GLSL variable. <code>gl_Position</code> is used to store the position of the current vertex.</p>
+
+<p>The <code>void main()</code> function is a standard way of defining the <code>gl_Position</code> variable. Everything inside  <code>void main()</code> will be executed by the vertex shader.  A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.</p>
+
+<h3 id="fragment_shader" name="fragment_shader">Фрагментный шейдер</h3>
+
+<p>Fragment (or texture) shaders define RGBA (red, blue, green, alpha) colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the fragment shader is to set up the <code>gl_FragColor</code> variable. <code>gl_FragColor</code> is a built-in GLSL variable like <code>gl_Position</code>.</p>
+
+<p>The calculations result in a variable containing the information about the RGBA color.</p>
+
+<h2 id="demo" name="demo">Демо</h2>
+
+<p>Let's build a simple demo to explain those shaders in action. Be sure to read <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js tutorial</a> first to grasp the concept of the scene, its objects, and materials.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that you don't have to use Three.js or any other library to write your shaders — pure <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.</p>
+</div>
+
+<h3 id="Environment_setup" name="Environment_setup">Настройка окружения</h3>
+
+<p>Чтобы приступить к работе с шейдерами WebGL Вам потребуется:</p>
+
+<ul>
+ <li>Убедиться, что Вы используете современный браузер, который хорошо поддерживает <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>, например Firefox или Chrome.</li>
+ <li>Создать папку, в которой будете хранить результаты ваших экспериментов.</li>
+ <li>Сохранить копию <a href="https://threejs.org/build/three.min.js">последней минимизированной версии библиотеки Three.js</a> в созданную папку.</li>
+</ul>
+
+<h3 id="HTML_structure" name="HTML_structure">Структура HTML кода</h3>
+
+<p>Мы будем использовать следующую структуру HTML кода.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;MDN Games: Shaders demo&lt;/title&gt;
+	&lt;style&gt;
+		body { margin: 0; padding: 0; font-size: 0; }
+		canvas { width: 100%; height: 100%; }
+	&lt;/style&gt;
+	&lt;script src="three.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
+	// vertex shader's code goes here
+  &lt;/script&gt;
+  &lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
+	// fragment shader's code goes here
+  &lt;/script&gt;
+  &lt;script&gt;
+	// scene setup goes here
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>It contains some basic information like the document {{htmlelement("title")}}, and some CSS to set the <code>width</code> and <code>height</code> of the {{htmlelement("canvas")}} element that Three.js will insert on the page to be the full size of the viewport. The {{htmlelement("script")}} element in the {{htmlelement("head")}} includes the Three.js library in the page; we will write our code into three script tags in the {{htmlelement("body")}} tag:</p>
+
+<ol>
+ <li>The first one will contain the vertex shader.</li>
+ <li>The second one will contain the fragment shader.</li>
+ <li>The third one will contain the actual JavaScript code generating the scene.</li>
+</ol>
+
+<p>Before reading on, copy this code to a new text file and save it in your working directory as <code>index.html</code>. We'll create a scene featuring a simple cube in this file to explain how the shaders work.</p>
+
+<h3 id="Исходный_код_куба">Исходный код куба</h3>
+
+<p>Instead of creating everything from scratch we can reuse the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> source code of the cube. Most of the components like the renderer, camera, and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.</p>
+
+<p>Go to the <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">cube.html file on GitHub</a>, copy all the JavaScript code from inside the second {{htmlelement("script")}} element, and paste it into the third <code>&lt;script&gt;</code> element of the current example. Save and load <code>index.html</code> in your browser — you should see a blue cube.</p>
+
+<h3 id="Код_вершинного_шейдера">Код вершинного шейдера</h3>
+
+<p>Давайте напишем простой вершинный шейдер — добавим код ниже в тело первого тега <code>&lt;script&gt;</code> :</p>
+
+<pre class="brush: glsl">void main() {
+	gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
+}
+</pre>
+
+<p>The resulting <code>gl_Position</code> is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can learn more about <em>model</em>, <em>view</em>, and <em>projection transformations</em> from the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing">vertex processing paragraph</a>, and you can also check out the links at the end of this article to learn more about it.</p>
+</div>
+
+<p>Both <code>projectionMatrix</code> and <code>modelViewMatrix</code> are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the <code>x</code> axis and 5 units along the <code>z</code> axis, translated via a shader. We can ignore the fourth parameter and leave it with the default <code>1.0</code> value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.</p>
+
+<h3 id="Код_шейдера_текстуры">Код шейдера текстуры</h3>
+
+<p>Now we'll add the texture shader to the code — add the code below to the body's second <code>&lt;script&gt;</code> tag:</p>
+
+<pre class="brush: glsl">void main() {
+	gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
+}
+</pre>
+
+<p>This will set an RGBA color to recreate the current light blue one — the first three float values (ranging from <code>0.0</code> to <code>1.0</code>) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from <code>0.0</code> — fully transparent — to 1.0 — fully opaque).</p>
+
+<h3 id="Применение_шейдеров">Применение шейдеров</h3>
+
+<p>To actually apply the newly created shaders to the cube, comment out the <code>basicMaterial</code> definition first:</p>
+
+<pre class="brush: js">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+</pre>
+
+<p>Далее, создаем <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p>
+
+<pre class="brush: js">var shaderMaterial = new THREE.ShaderMaterial( {
+	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+});
+</pre>
+
+<p>This shader material takes the code from the scripts and applies it to the object the material is assigned to.</p>
+
+<p>Then, in the line that defines the cube we need to replace the <code>basicMaterial</code>:</p>
+
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+</pre>
+
+<p>...with the newly created <code>shaderMaterial</code>:</p>
+
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
+</pre>
+
+<p>Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:</p>
+
+<p><img alt="Three.js blue cube demo" src="http://end3r.github.io/MDN-Games-3D/Shaders/img/cube.png" style="display: block; margin: 0px auto;"></p>
+
+<p>It looks exactly the same as the Three.js cube demo but the slightly different position and the same blue color are both achieved using the shader.</p>
+
+<h2 id="Финальный_вариант">Финальный вариант</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"&gt;&lt;/script&gt;
+&lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
+    void main() {
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
+    }
+&lt;/script&gt;
+&lt;script id="fragmentShader" type="x-shader/x-fragment"&gt;
+    void main() {
+        gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
+    }
+&lt;/script&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">    var WIDTH = window.innerWidth;
+    var HEIGHT = window.innerHeight;
+
+    var renderer = new THREE.WebGLRenderer({antialias:true});
+    renderer.setSize(WIDTH, HEIGHT);
+    renderer.setClearColor(0xDDDDDD, 1);
+    document.body.appendChild(renderer.domElement);
+
+    var scene = new THREE.Scene();
+
+    var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+    camera.position.z = 50;
+    scene.add(camera);
+
+    var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+
+    var shaderMaterial = new THREE.ShaderMaterial( {
+        vertexShader: document.getElementById( 'vertexShader' ).textContent,
+        fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+    });
+
+    var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
+    scene.add(cube);
+    cube.rotation.set(0.4, 0.2, 0);
+
+    function render() {
+        requestAnimationFrame(render);
+        renderer.render(scene, camera);
+    }
+    render();</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body { margin: 0; padding: 0; font-size: 0; }
+canvas { width: 100%; height: 100%; }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Final_code', '100%', '400', '', 'Games/Techniques/3D_on_the_web/GLSL_Shaders') }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>This article has taught the very basics of shaders. Our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on <a href="http://shadertoy.com/">ShaderToy</a> for inspiration and to learn from their sources.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217">Изучение WebGL</a> — for general WebGL knowledge</li>
+ <li><a href="http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html">WebGL шейдеры и GLSL основы</a> — for GLSL specific information</li>
+</ul>
diff --git a/files/ru/games/techniques/3d_on_the_web/index.html b/files/ru/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..3944c617c6
--- /dev/null
+++ b/files/ru/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,113 @@
+---
+title: 3D games on the Web
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - Games
+  - Graphics
+  - NeedsContent
+  - NeedsExample
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebVR
+  - three.js
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p>
+
+<h2 id="Documentation_and_browser_support">Documentation and browser support</h2>
+
+<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p>
+
+<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p>
+
+<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2>
+
+<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p>
+
+<h2 id="Advanced_concepts">Advanced concepts</h2>
+
+<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p>
+
+<h3 id="Collision_Detection">Collision Detection</h3>
+
+<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p>
+
+<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p>
+
+<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2>
+
+<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p>
+
+<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p>
+
+<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3>
+
+<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p>
+
+<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3>
+
+<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3>
+
+<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Other_tools">Other tools</h3>
+
+<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Where_to_go_next">Where to go next</h2>
+
+<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p>
+
+<h3 id="Source_code">Source code</h3>
+
+<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (based on Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
+</ul>
diff --git a/files/ru/games/techniques/async_scripts/index.html b/files/ru/games/techniques/async_scripts/index.html
new file mode 100644
index 0000000000..914600cd94
--- /dev/null
+++ b/files/ru/games/techniques/async_scripts/index.html
@@ -0,0 +1,52 @@
+---
+title: Асинхронные скрипты для asm.js
+slug: Games/Techniques/Async_scripts
+tags:
+  - Games
+  - JavaScript
+  - asm.js
+  - async
+translation_of: Games/Techniques/Async_scripts
+---
+<div>
+<p><font><font>Каждая средняя или большая игра должна компилировать </font><font>код </font></font><a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js"><font><font>asm.js</font></font></a><font><font> как часть асинхронного скрипта, чтобы дать браузеру максимальную гибкость для оптимизации процесса компиляции. </font><font>В Gecko асинхронная компиляция позволяет движку JavaScript компилировать asm.js из основного потока когда игра загружается, и кэшировать сгенерированный машинный код, так что игру не нужно компилировать при последующих загрузках (начиная с Firefox 28) , </font><font>Чтобы увидеть разницу, переключите </font></font><code>javascript.options.parallel_parsing</code><font><font>в </font></font><code>about:config</code><font><font>.</font></font></p>
+</div>
+
+<h2 id="Написание_асинхронного_скрипта"><font><font> Написание асинхронного скрипта</font></font></h2>
+
+<p><font><font>Получить асинхронную компиляцию легко: при написании JavaScript просто используйте </font></font><code>async</code><font><font>атрибут следующим образом:</font></font></p>
+
+<pre><code>&lt;script async src="file.js"&gt;&lt;/script&gt;</code></pre>
+
+<p><font><font>или, чтобы сделать то же самое через скрипт:</font></font></p>
+
+<pre><code>var script = document.createElement('script');
+script.src = "file.js";
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>(скрипты создаются из скрипта по умолчанию </font></font><code>async</code><font><font>.) Стандартная оболочка HTML, которую генерирует Emscripten, создает последнее.</font></font></p>
+
+<h2 id="Когда_асинхронный_не_асинхронный"><font><font>Когда асинхронный не асинхронный?</font></font></h2>
+
+<p><font><font>Две распространенные ситуации, в которых сценарий * не * асинхронен (как </font></font><a href="http://www.w3.org/TR/html5/scripting-1.html"><font><font>определено спецификацией HTML</font></font></a><font><font> ):</font></font></p>
+
+<pre><code>&lt;script async&gt;code&lt;/script&gt;</code></pre>
+
+<p><font><font>а также</font></font></p>
+
+<pre><code>var script = document.createElement('script');
+script.innerHTML = "code";
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>Оба считаются «встроенными» скриптами, компилируются и запускаются сразу</font></font></p>
+
+<p><font><font>Что если ваш код находится в строке JS? </font><font>Вместо использования </font></font><code>eval</code><font><font>или </font></font><code>innerHTML</code><font><font>, оба из которых запускают синхронную компиляцию, вы должны использовать BLOB-объект с URL объекта:</font></font></p>
+
+<pre><code>var blob = new Blob([codeString]);
+var script = document.createElement('script');
+var url = URL.createObjectURL(blob);
+script.onload = script.onerror = function() { URL.revokeObjectURL(url); };
+script.src = url;
+document.body.appendChild(script);</code></pre>
+
+<p><font><font>Настройка </font></font><code>src</code><font><font>вместо настройки </font></font><code>innerHTML </code><font><font>делает этот скрипт асинхронным.</font></font></p>
diff --git a/files/ru/games/techniques/controls_gamepad_api/index.html b/files/ru/games/techniques/controls_gamepad_api/index.html
new file mode 100644
index 0000000000..edbb3e0a40
--- /dev/null
+++ b/files/ru/games/techniques/controls_gamepad_api/index.html
@@ -0,0 +1,260 @@
+---
+title: Реализация элементов управления с помощью API Gamepad
+slug: Games/Techniques/Controls_Gamepad_API
+tags:
+  - Gamepad API
+  - JavaScript
+  - Игры
+  - геймпады
+  - контроллеры
+translation_of: Games/Techniques/Controls_Gamepad_API
+---
+<div>{{GamesSidebar}}</div>
+
+<div></div>
+
+<p class="summary">В этой статье рассматривается реализация эффективной кросс-браузерной системы управления веб-играми с использованием API Gamepad, позволяющей управлять веб-играми с помощью консольных игровых контроллеров. В нем есть тематическое исследование игры "Голодный холодильник", созданный компанией <a href="http://enclavegames.com/">Enclave Games</a>.</p>
+
+<h2 id="Элементы_управления_для_web_игр">Элементы управления для web игр</h2>
+
+<p>Исторически игра на консоли, подключенной к телевизору, всегда была совершенно другим опытом, чем игра на ПК, в основном из-за уникальных элементов управления. В конце концов, дополнительные драйверы и плагины позволили нам использовать консольные геймпады с настольными играми - либо нативными играми, либо теми, которые работают в браузере. Теперь, в эпоху HTML5, у нас наконец есть API Gamepad, который дает нам возможность играть в браузерные игры с использованием геймпад-контроллеры без каких-либо плагинов. API Gamepad достигает этого, предоставляя интерфейс, демонстрирующий нажатия кнопок и изменения оси, которые могут быть использованы внутри кода JavaScript для обработки входных данных. Это хорошие времена для браузерных игр.</p>
+
+<p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+
+<h2 id="API_статус_и_поддержка_браузера">API статус и поддержка браузера</h2>
+
+<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> все еще находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все еще может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad.</p>
+
+<h2 id="Какие_геймпады_лучше_всего">Какие геймпады лучше всего?</h2>
+
+<p><img alt="gamepad devices" src="http://end3r.com/tmp/gamepad/devices.jpg" style="display: block; height: 450px; margin: 0px auto; width: 600px;"></p>
+
+<p>Наиболее популярные геймпады в наше время - геймпады от Xbox 360, Xbox One, PS3 и PS4 — они прошли все испытания и хорошо работают с Gamepad API, реализованном в браузерах на Windows и Mac OS X.</p>
+
+<p>Существует также ряд других устройств с различными макетами кнопок, которые более или менее работают в разных реализациях браузера. Код, описанный в этой статье, был протестирован с помощью нескольких геймпадов, но любимая конфигурация автора-это беспроводной контроллер Xbox 360 и браузер Firefox на Mac OS X.</p>
+
+<h2 id="Пример_исследования_Голодный_холодильник">Пример исследования: Голодный холодильник</h2>
+
+<p>The competition ran in November 2013 and  decided to take part in it. The theme for the competition was "change", so they submitted a game where you have to feed the Hungry Fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) A countdown changes the type of food the Fridge wants to eat every few seconds, so you have to be careful and act quickly. You can <a href="http://enclavegames.com/games/hungry-fridge/">try Hungry Fridge here</a>.</p>
+
+<p>Конкурс <a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a> состоялся в ноябре 2013 года, и <a href="http://enclavegames.com/">Enclave Games</a> решила принять в нем участие. Тема для конкурса была "переменна", поэтому они представили игру, в которой Вы должны накормить голодный холодильник, нажав на здоровую пищу (яблоки, морковь, салат) и избежать "плохой" пищи (пиво, гамбургеры, пицца.) Обратный отсчет меняет тип пищи, которую холодильник хочет съесть каждые несколько секунд, поэтому вы должны быть осторожны и действовать быстро. Вы можете попробовать Голодный холодильник <a href="http://enclavegames.com/games/hungry-fridge/">здесь</a>.</p>
+
+<p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Вторая, скрытая реализация "изменения" - это возможность превратить статичный холодильник в полноценную движущуюся, стреляющую и едящую машину. Когда вы подключаете контроллер, игра значительно меняется (голодный холодильник превращается в супер турбо голодный холодильник), и вы можете управлять бронированным холодильником с помощью API Gamepad. Вы должны сбивать еду, но вы все еще должны искать тип пищи, которую холодильник хочет съесть в каждой точке, иначе вы потеряете энергию.</p>
+
+<p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Игра инкапсулирует два совершенно разных типа "изменений" - хорошая еда против плохой еды и мобильная против настольной.</p>
+
+<p><img alt="hungryfridge-gameplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img04.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<h2 id="Демо-версия">Демо-версия</h2>
+
+<p>Сначала была построена полная версия игры Hungry Fridge, а затем, чтобы для демострации API Gamepad в действии и показа исходного кода JavaScript, была создана <a href="https://end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html">простая демо-версия</a>. Это часть <a href="https://end3r.github.io/Gamepad-API-Content-Kit/">набора контента Gamepad API</a>, доступного на GitHub, где вы можете глубоко погрузиться в код и изучить, как именно он работает.</p>
+
+<p><img alt="Hungry Fridge demo using Gamepad API" src="http://end3r.com/tmp/gamepad/super-turbo.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p>
+
+<p>Код, описанный ниже, взят из полной версии игры Hungry Fridge, но он почти идентичен демо-версии — единственная разница заключается в том, что полная версия использует переменную turbo, чтобы решить, будет ли игра запущена с использованием режима Super Turbo. Он работает независимо, поэтому его можно включить, даже если геймпад не подключен.</p>
+
+<div class="note">
+<p><strong>ПРИМЕЧАНИЕ: </strong>время пасхальных яиц: есть скрытая опция для запуска Super Turbo Hungry Fridge на рабочем столе без подключения геймпада — нажмите на значок геймпада в правом верхнем углу экрана. Он запустит игру в режиме Super Turbo, и Вы сможете управлять холодильником с помощью клавиатуры: A и D для поворота башни влево и вправо, W для стрельбы и клавиш со стрелками для перемещения.</p>
+</div>
+
+<h2 id="Реализация">Реализация</h2>
+
+<p>Есть два важных события, которые можно использовать вместе с API Gamepad-<code>gamepadconnected </code>и <code>gamepaddisconnected</code>. Первый срабатывает, когда браузер обнаруживает подключение нового геймпада, а второй - когда геймпад отключен (либо физически пользователем, либо из-за бездействия).) В демо-версии объект <code>gamepadAPI </code>используется для хранения всего, что связано с API:</p>
+
+<pre class="brush: js"><code>var gamepadAPI = {
+  controller: {},
+  turbo: false,
+  connect: function() {},
+  disconnect: function() {},
+  update: function() {},
+  buttonPressed: function() {},
+  buttons: [],
+  buttonsCache: [],
+  buttonsStatus: [],
+  axesStatus: []
+};</code></pre>
+
+<p>Массив <code>кнопок</code> содержит клавиатуру Xbox 360 :</p>
+
+<pre class="brush: js"><code>buttons: [
+  'DPad-Up','DPad-Down','DPad-Left','DPad-Right',
+  'Start','Back','Axis-Left','Axis-Right',
+  'LB','RB','Power','A','B','X','Y',
+],</code>
+</pre>
+
+<p>Это может быть по-разному для разных типов геймпадов, таких как контроллер PS3 (или безымянный, универсальный), поэтому вы должны быть осторожны и не просто предполагать, что кнопка, которую вы ожидаете, будет той же самой кнопкой, которую вы на самом деле получите. Затем мы настроили два прослушивателя событий, чтобы получить данные:</p>
+
+<pre class="brush: js"><code>window.addEventListener("gamepadconnected", gamepadAPI.connect);
+window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code>
+</pre>
+
+<p>Из-за политики безопасности вы должны сначала начать взаимодействовать с контроллером, пока страница видна для запуска события. Если API работал без какого-либо взаимодействия с пользователем, его можно было использовать для снятия отпечатков пальцев без их ведома.</p>
+
+<p>Обе функции довольно просты:</p>
+
+<pre class="brush: js"><code>connect: function(evt) {
+  gamepadAPI.controller = evt.gamepad;
+  gamepadAPI.turbo = true;
+  console.log('Gamepad connected.');
+},</code></pre>
+
+<p>The <code>connect()</code> function takes the event as a parameter and assigns the <code>gamepad</code> object to the <code>gamepadAPI.controller</code> variable. We are using only one gamepad for this game, so it's a single object instead of an array of gamepads. We then set the <code>turbo</code> property to <code>true</code>. (We could use the <code>gamepad.connected</code> boolean for this purpose, but we wanted to have a separate variable for turning on Turbo mode without needing to have a gamepad connected, for reasons explained above.)</p>
+
+<p>Функция <code>connect()</code> принимает событие в качестве параметра и назначает объект <code>gamepad</code> объекту <code>gamepadAPI.controller</code>. Мы используем только один геймпад для этой игры, так что это один объект вместо массива геймпадов. Затем мы устанавливаем свойство turbo в true. (Мы могли бы использовать <code>gamepad.connected</code>, т.к для этой цели подключается логическое значение, но мы хотели иметь отдельную переменную для включения турбо-режима без необходимости подключения геймпада, по причинам, описанным выше.)</p>
+
+<pre class="brush: js"><code>disconnect: function(evt) {
+  gamepadAPI.turbo = false;
+  delete gamepadAPI.controller;
+  console.log('Gamepad disconnected.');
+},</code>
+</pre>
+
+<p>Функция <code>disconnect</code> устанавливает <code>gamepad.turbo property</code> на <code>false</code> и удаляет переменную, содержащую объект gamepad.</p>
+
+<h3 id="Объект_геймпада">Объект геймпада</h3>
+
+<p>В объекте <code>gamepad </code>содержится много полезной информации, причем наиболее важными являются состояния кнопок и осей:</p>
+
+<ul>
+ <li><code>id</code>: Строка, содержащая информацию о контроллере.</li>
+ <li><code>index</code>: Уникальный индентификатор для подключенного устройства.</li>
+ <li><code>connected</code>: Логическая переменная. Возвращает <code>true</code> при подключении.</li>
+ <li><code>mapping</code>: Тип компоновки кнопок; Стандартный - единственный доступный вариант на данный момент.</li>
+ <li><code>axes</code>: Состояние каждой оси, представленное массивом значений с плавающей запятой.</li>
+ <li><code>buttons</code> : Состояние каждой кнопки, представленное массивом объектов GamepadButton, содержащих <code>pressed</code> и <code>value</code> свойства.</li>
+</ul>
+
+<p>Переменная <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">index</span></font> полезна, если мы подключаем более одного контроллера и хотим идентифицировать их, чтобы действовать соответственно — например, когда у нас есть игра для двух игроков, требующая подключения двух устройств.</p>
+
+<h3 id="Запрос_объекта_геймпада">Запрос объекта геймпада</h3>
+
+<p>Помимо <code>connect()</code> и <code>disconnect()</code>, в объекте <code>gamepadAPI </code>есть еще два метода: <code>update()</code> и <code>buttonPressed()</code>. <code>update() </code>выполняется на каждом кадре внутри игрового цикла, чтобы регулярно обновлять фактическое состояние объекта геймпада:</p>
+
+<pre class="brush: js"><code>update: function() {
+  // clear the buttons cache
+  gamepadAPI.buttonsCache = [];
+  // move the buttons status from the previous frame to the cache
+  for(var k=0; k&lt;gamepadAPI.buttonsStatus.length; k++) {
+    gamepadAPI.buttonsCache[k] = gamepadAPI.buttonsStatus[k];
+  }
+  // clear the buttons status
+  gamepadAPI.buttonsStatus = [];
+  // get the gamepad object
+  var c = gamepadAPI.controller || {};
+
+  // loop through buttons and push the pressed ones to the array
+  var pressed = [];
+  if(c.buttons) {
+    for(var b=0,t=c.buttons.length; b&lt;t; b++) {
+      if(c.buttons[b].pressed) {
+        pressed.push(gamepadAPI.buttons[b]);
+      }
+    }
+  }
+  // loop through axes and push their values to the array
+  var axes = [];
+  if(c.axes) {
+    for(var a=0,x=c.axes.length; a&lt;x; a++) {
+      axes.push(c.axes[a].toFixed(2));
+    }
+  }
+  // assign received values
+  gamepadAPI.axesStatus = axes;
+  gamepadAPI.buttonsStatus = pressed;
+  // return buttons for debugging purposes
+  return pressed;
+},</code>
+</pre>
+
+<p>На каждом кадре, <code>update()</code> сохраняет кнопки, нажатые во время предыдущего кадра, в массиве <code>buttonsCache </code>и берет новые из объекта <code>gamepadAPI.controller</code>. Затем он проходит по кнопкам и осям, чтобы получить их фактические состояния и значения.</p>
+
+<h3 id="Обнаружение_нажатия_кнопок">Обнаружение нажатия кнопок</h3>
+
+<p>Метод <code>buttonPressed()</code> также помещается в основной игровой цикл для прослушивания нажатий кнопок. Для этого требуется два параметра - кнопка, которую мы хотим прослушать, и (необязательно) способ сообщить игре, что удержание кнопки принято. Без него вам придется отпустить кнопку и нажать ее снова, чтобы получить желаемый эффект.</p>
+
+<pre class="brush: js"><code>buttonPressed: function(button, hold) {
+  var newPress = false;
+  // loop through pressed buttons
+  for(var i=0,s=gamepadAPI.buttonsStatus.length; i&lt;s; i++) {
+    // if we found the button we're looking for...
+    if(gamepadAPI.buttonsStatus[i] == button) {
+      // set the boolean variable to true
+      newPress = true;
+      // if we want to check the single press
+      if(!hold) {
+        // loop through the cached states from the previous frame
+        for(var j=0,p=gamepadAPI.buttonsCache.length; j&lt;p; j++) {
+          // if the button was already pressed, ignore new press
+          if(gamepadAPI.buttonsCache[j] == button) {
+            newPress = false;
+          }
+        }
+      }
+    }
+  }
+  return newPress;
+},</code>
+</pre>
+
+<p>Существует два типа действий, которые следует учитывать для кнопки: одно нажатие и удержание. Логическая переменная <code>newPress </code>будет указывать, есть ли новое нажатие кнопки или нет. Затем мы проходим через массив нажатых кнопок — если данная кнопка совпадает с той, которую мы ищем, переменная <code>newPress </code>устанавливается в <code>true</code>. Чтобы проверить, является ли нажатие новым, так как игрок не держит клавишу, мы перебираем кэшированные состояния кнопок из предыдущего кадра игрового цикла. Если мы находим его там, это означает, что кнопка удерживается, поэтому нового нажатия нет. В конце концов возвращается переменная <code>newPress</code>. Функция <code>buttonPressed </code>используется в цикле обновления игры следующим образом:</p>
+
+<pre class="brush: js"><code>if(gamepadAPI.turbo) {
+  if(gamepadAPI.buttonPressed('A','hold')) {
+    this.turbo_fire();
+  }
+  if(gamepadAPI.buttonPressed('B')) {
+    this.managePause();
+  }
+}</code>
+</pre>
+
+<p>Если <code>gamepadAPI.turbo</code> возвращает <code>true</code>, при нажатии (или удержании) данных кнопок мы выполняем соответствующие функции, возложенные на них. В этом случае нажатие или удержание "A" приведет к выстрелу пули, а нажатие "B" поставит игру на паузу.</p>
+
+<h3 id="Порог_оси">Порог оси</h3>
+
+<p>Кнопки имеют только два состояния: 0 или 1, но аналоговые стики могут иметь много различных значений — они имеют плавающий диапазон между -1 и 1 вдоль обеих осей X и Y.</p>
+
+<p><img alt="axis threshold" src="http://end3r.com/tmp/gamepad/axis-threshold.png" style="display: block; height: 300px; margin: 0px auto; width: 400px;"></p>
+
+<p>Геймпады могут запылиться от лежания в бездействии, что означает, что проверка точных значений -1 или 1 может быть проблемой. По этой причине может быть полезно установить пороговое значение для того, чтобы значение оси вступило в силу. Например, бак холодильника поворачивается вправо только тогда, когда значение X больше 0,5:</p>
+
+<pre><code>if(gamepadAPI.axesStatus[0].x &gt; 0.5) {
+  this.player.angle += 3;
+  this.turret.angle += 3;
+}</code>
+</pre>
+
+<p>Даже если мы немного сдвинем его по ошибке или стик не вернется в исходное положение, танк не повернется неожиданно.</p>
+
+<h2 id="Обновление_спецификаций">Обновление спецификаций</h2>
+
+<p>После более чем годичной стабильности, в апреле 2015 года была обновлена спецификация API W3C Gamepad (<a href="https://w3c.github.io/gamepad/">см. последнюю версию</a>). Он не сильно изменился, но хорошо знать, что происходит — обновления заключаются в следующем...</p>
+
+<h3 id="Получение_геймпадов">Получение геймпадов</h3>
+
+<p>Метод {{domxref ("Navigator.getGamepads ()")}} был обновлен с более длинным объяснением и примером кода. Теперь длина массива геймпадов должна быть <code>n+1</code>, где <code>n</code>-количество подключенных устройств — когда подключено одно устройство и оно имеет индекс 1, длина массива равна 2, и он будет выглядеть следующим образом: <code>[null, [object Gamepad]]</code>. Если устройство отключено или недоступно, то для него устанавливается значение <code>null</code>.</p>
+
+<h3 id="Стандартное_отображение">Стандартное отображение</h3>
+
+<p>Тип отображения теперь является перечисляемым объектом вместо строки:</p>
+
+<pre>enum GamepadMappingType {
+    "",
+    "standard"
+};
+</pre>
+
+<p>Это перечисление определяет набор известных отображений для геймпада. На данный момент доступна только компоновка <code>standart</code>, но в будущем могут появиться новые. Если макет неизвестен, он устанавливается в пустую строку.</p>
+
+<h3 id="События">События</h3>
+
+<p>В спецификации было доступно больше событий, чем просто <code>gamepadconnected </code>и <code>gamepaddisconnected</code>, но они были удалены из спецификации, поскольку считались не очень полезными. До сих пор продолжается дискуссия о том, следует ли их возвращать и в какой форме.</p>
+
+<h2 id="Подведение_итогов">Подведение итогов</h2>
+
+<p>API геймпада очень прост в разработке. Теперь это проще, чем когда-либо, вы можете использовать браузер как консоль без необходимости каких-либо плагинов. Вы можете играть в полную версию игры Hungry Fridge непосредственно в вашем браузере, установить ее из <a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> или проверить исходный код демо-версии вместе со всеми другими ресурсами в <a href="https://github.com/EnclaveGames/Hungry-Fridge">комплекте контента Gamepad API</a>.</p>
diff --git a/files/ru/games/techniques/index.html b/files/ru/games/techniques/index.html
new file mode 100644
index 0000000000..d404d7133c
--- /dev/null
+++ b/files/ru/games/techniques/index.html
@@ -0,0 +1,29 @@
+---
+title: Techniques for game development
+slug: Games/Techniques
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+
+<p>These are the Ideas and Technique for game devlopment</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>