1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: WebGL
slug: Web/API/WebGL_API
tags:
- WebGL
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>
<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p>
<p>Поддержка WebGL присутствует в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/">Safari </a>5.1+ и <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.</p>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Разработка">Разработка</h2>
<dl>
<dt><a href="/ru/docs/Web/WebGL/Getting_started_with_WebGL" title="en-US/docs/WebGL/Getting started with WebGL">Начало работы с WebGL</a></dt>
<dd>Как настроить контекст WebGL .</dd>
<dt><a href="/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context" title="en-US/docs/WebGL/Adding 2D content to a WebGL context">Добавление 2D контента в контекст WebGL</a></dt>
<dd>Как отобразить простую плоскую фигуру с помощью WebGL.</dd>
<dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL" title="en-US/docs/WebGL/Using shaders to apply color in WebGL">Использование шейдеров для назначения цвета в WebGL</a></dt>
<dd>Демонстрирует как добавить цвет фигурам, используя шейдеры.</dd>
<dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL" title="en-US/docs/WebGL/Animating objects with WebGL">Анимация объектов с помощью WebGL</a></dt>
<dd>Показывает как повернуть и перемещать объекты для создания простой анимации.</dd>
<dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">Создание 3D объектов с помощью WebGL</a></dt>
<dd>Показывает как создавать и анимировать 3D объект (в данном случае куб).</dd>
<dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Использование текстур в WebGL</a></dt>
<dd>Демонстрирует как разместить текстуры на гранях объекта.</dd>
<dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">Освещение в WebGL</a></dt>
<dd>Как имитировать эффекты освещения в контексте WebGL .</dd>
<dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Анимация текстур в WebGL</a></dt>
<dd>Показывает как анимировать текстуры; в данном случае путём размещения видео Ogg на гранях вращающегося куба.</dd>
<dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">WebGL: советы по применению на практике</a></dt>
<dd>Советы и предложения по улучшению контента, созданного вами при помощи WebGL.</dd>
<dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Текстуры с других доменов</a></dt>
<dd>Информация о загрузке текстур с других доменов, отличных от того, с которого загружается ваш контент.</dd>
<dt><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Использование расширений</a></dt>
<dd>Как использовать расширения, доступные в WebGL.</dd>
</dl>
</td>
<td>
<h2 class="Related_Topics" id="Ресурсы">Ресурсы</h2>
<dl>
<dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/">Спецификация WebGL</a></dt>
<dd>Спецификация WebGL.</dd>
<dt><a class="external" href="http://www.khronos.org/webgl/">Официальный сайт WebGL</a></dt>
<dd>Веб-сайт разработчиков WebGL - Khronos Group.</dd>
<dt><a class="external" href="http://learningwebgl.com/blog/">Изучение WebGL</a></dt>
<dd>Веб-сайт с уроками, посвящёнными использованию WebGL.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Основы WebGL</a></dt>
<dd>Учебные материалы по основным возможностям WebGL.</dd>
<dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">Матрицы в WebGL</a></dt>
<dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трёхмерной графике.</dd>
<dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/">Советы по использованию WebGL</a></dt>
<dd>Веб-сайт с советами по написанию кода на WebGL.</dd>
<dt><a class="external" href="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
<dd>Библиотека для работы с матрицами для WebGL</dd>
<dt><a class="link-https" href="https://github.com/toji/gl-matrix">glMatrix</a></dt>
<dd>Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL</dd>
<dt><a class="external" href="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
<dd><span>Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL.</span></dd>
<dt><a class="external" href="http://sylvester.jcoglan.com/">Sylvester</a></dt>
<dd>Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная.</dd>
<dt><a class="external" href="http://webglplayground.net">WebGL площадка</a></dt>
<dd>Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования.</dd>
<dt><a href="http://www.webglacademy.com">Академия WebGL</a></dt>
<dd>Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.</dd>
</dl>
</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<h3 id="WebGL_1">WebGL 1</h3>
<div>
<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
<h3 id="WebGL_2">WebGL 2</h3>
</div>
<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
<h3 id="Замечания_по_Gecko">Замечания по Gecko</h3>
<h4 id="Отладка_и_тестирование_WebGL">Отладка и тестирование WebGL</h4>
<p>Начиная с Gecko 10.0 {{geckoRelease("10.0")}}, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:</p>
<dl>
<dt><code>webgl.min_capability_mode</code></dt>
<dd>Свойство типа Boolean которое, при значении <code>true</code> позволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
<dt><code>webgl.disable_extensions</code></dt>
<dd>Свойство типа Boolean которое, при значении <code>true</code> отключает все расширения WebGL. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
</dl>
|
