WebGL открыла новую эру 3D-рендеринга веб-страниц, что позволяет 3D-контенту отображаться непосредственно на холсте без помощи каких-либо плагинов. Как и API Canvas 2D, WebGl -манипулирует объекты с помощью сценариев, поэтому шаги в основном похожи: подготовьте рабочий контекст, подготовите данные, нарисуйте объект в холсте и выполняйте его. В отличие от 2D, 3D включает в себя больше знаний, таких как мир, свет, текстура, камера, матрица и другие профессиональные знания. У Webgl есть хороший китайский учебник, который является первой ссылкой в ссылке ниже, поэтому я не буду демонстрировать свои навыки здесь. Следующий контент - это просто краткое изложение того, что я узнал.
Поддержка браузераПоскольку Microsoft имеет свой собственный план разработки графики и не поддерживает WebGL, IE не может запускать WebGL, за исключением установки плагинов. Другие основные браузеры, такие как Chrome, Firefox, Safari, Opera и т. Д., Все установлены с последней версией. В дополнение к установке последнего браузера, вы также должны убедиться, что драйвер видеокарты также актуально.
После их установки вы можете открыть браузер и ввести следующий URL, чтобы проверить поддержку браузера для WebGL: http://webglreport.sourceforge.net/.
После того, как вы обычно установили вышеуказанный браузер, вы все еще не можете запускать WebGL, поэтому вы можете насильственно включить поддержку WebGL и попробовать ее. Метод, позволяющий сделать это следующим образом:
Chrome Browser Нам нужно добавить несколько параметров запуска в Chrome. В качестве примера представлены следующие конкретные этапы работы: найти ярлык в браузер Chrome, щелкнуть правой кнопкой мыши ярлык и выберите свойства; В целевом поле, после кавычек после Chrome.exe, добавьте следующий контент: -enable-webgl-ignore-gpu-blacklist-allow-file-access-fromНажмите OK, чтобы закрыть Chrome, а затем используйте этот ярлык для запуска браузера Chrome.
Значения нескольких параметров следующие:
-enable-webgl означает включение поддержки WebGL;
-Inignore-gpu-blacklist означает игнорировать черный список графических процессоров, что означает, что некоторые графические графические процессоры не рекомендуются запускать WebGL, потому что они слишком старые и другие причины. Этот параметр позволяет браузеру игнорировать этот черный список и запустить WebGL;
-Allow-File-Access-From-Ils означает, что вы разрешаете загрузку ресурсов из локального уровня. Если вы не являетесь разработчиком WebGL и вам не нужно разрабатывать и отлаживать WebGL, но просто хотите взглянуть на демонстрацию WebGL, то вы не можете добавить этот параметр.
Firefox браузер Пользователи Firefox, пожалуйста, введите: config в адресной строке браузера, введите, а затем найдите Webgl в фильтре (фильтр), установите с поддержкой webgl.force tor true; установить webgl.disabled в false; Поиск для безопасности.fileuri.strict_origin_policy в фильтре (фильтр), установить безопасность.fileuri.strict_origin_policy в false; Затем закройте все окна Firefox в настоящее время открыты и перезапустите Firefox.Первые два настройки должны поддерживать поддержку WebGL, а последняя настройка Security.fileuri.strict_origin_policy - разрешить загрузку ресурсов из локальной области. Если вы не являетесь разработчиком WebGL и вам не нужно разрабатывать и отлаживать WebGL, но просто хотите взглянуть на демонстрацию WebGL, то вы не можете установить этот элемент.
Сафари браузер Найдите свойства → Advanced в меню, выберите меню «Показать разработку», затем перейдите в меню разработки и выберите «Включить WebGL». Шаги развитияСледующий код является лишь краткой резюме соответствующих концепций. Это происходит из китайского учебника в ссылке и включает в себя много знаний в 3D. Заинтересованные студенты могут непосредственно перейти к китайскому учебному пособию в практической ссылке на изучение, что гораздо более подробно и точнее, чем я здесь объяснил. Студенты, которые присоединяются к веселью, могут просто взглянуть, не углубляясь в значение каждой строки кода.
Подготовка Само собой разумеется, это добавить элемент холста на страницу в качестве контейнера рендеринга. Например:<bodyonload = "start ()">
<canvasid = "glcanvas" width = "640" высота = "480">
Yourbrowserdoes не Appeartosupport thehtml5canvaselement.
</canvas>
</body>
Вот время официально начать писать сценарии. Во -первых, давайте посмотрим на вход в программу и общую структуру:
functionStart () {
varcanvas = document.getElementById ("glcanvas");
initgl (Canvas);
initShaders ();
initBuffers ();
gl.clearcolor (0,0,0,0,0,0,0,1,0);
gl.enable (gl.depth_test);
DrawScene ();
}
Несколько методов здесь представляют собой шаги рисования типичного Webgl:
Шаг 1: Инициализируйте рабочую среду Webgl - initgl Код для этого метода выглядит следующим образом:vargl;
functionInitgl (canvas) {
gl = null;
пытаться{
//Trytograbthestandardcontext.ifitfails, fallbacktoexperimental.
gl = canvas.getContext ("webgl") || canvas.getContext ("Experimental-webgl");
}
Catch (e) {} // ifwedon'taveAglContext, DifPNow
if (! gl) {
Alert ("untableToinitializeWebgl.yourbrowserMaynotsupportit.");
}
}
Этот метод очень прост, чтобы получить среду рисования WebGL. Вам нужно передать параметр webgl в метод Canvas.getContext. Однако, поскольку текущий стандарт WebGL не был завершен, параметры, используемые на экспериментальной стадии, являются экспериментальными Webgl. Конечно, также можно назвать Canvas.getContext (Experimental-Webgl). После установки стандартов вы можете изменить другой код.
Шаг 2: Инициализировать шейдеры - initshaders Концепция шейдера шейдера относительно проста, чтобы сказать, это команда операции графической карты. Создание трехмерной сцены требует большого количества расчетов цвета, позиции и другой информации. Если эти расчеты выполняются программным обеспечением, скорость будет очень медленной. Поэтому, если вы позволите графической карте рассчитать эти операции, скорость очень быстрая; Как выполнить эти расчеты, определяется шейдером. Код шейдера написан на языке шейдеров под названием GLSL, и мы больше не будем говорить об этом языке.Шейдеры могут быть определены в HTML и используются в коде. Конечно, для вас то же самое, чтобы определить шейдер со строкой в вашей программе.
Давайте сначала посмотрим на определение:
<scriptid = "shader-fs" type = "x-shader/x-fragment">
PrecisionMediumpfloat;
VaryingVec4vcolor;
voidmain (void) {
gl_fragcolor = vcolor;
}
</script>
<scriptid = "shader-vs" type = "x-shader/x-vertex">
attributeVec3avertexposition;
attributeVec4avertexcolor;
Uniformmat4umvmatrix;
Uniformmat4upmatrix;
VaryingVec4vcolor;
voidmain (void) {
gl_position = upmatrix*umvmatrix*vec4 (avertexposition, 1,0);
vcolor = avertexcolor;
}
</script>
Вот два шейдера: шейдер для лица и вершина -шейдер.
Что касается этих двух шейдеров, здесь необходимо объяснить, что 3D -модели на компьютерах в основном описываются точками в сочетании с треугольными лицами. Vertex Shader обрабатывает данные этих точек, а поверхностный шейдер обрабатывает данные точек на треугольнических лицах посредством интерполяции.
Вершино -шейдер, определенный выше, определяет метод положения и расчета цветов; в то время как поверхностный шейдер определяет метод расчета цвета интерполированных точек. В фактических сценариях применения он также будет включать обработку света и другие эффекты в шейдерах.
Определите шейдеры, вы можете найти их в программе и использовать их:
Варшадерпрограмма;
functionInitShaders () {
varfragmentshader = getshader (gl, "shader-fs");
varvertexshader = getshader (gl, "shader-vs");
ShaderProgram = gl.createProgram ();
gl.attachderer (шейдерпрограмма, вертексшадер);
gl.attachderer (шейдерпрограмма, фрагментшадер);
Gl.linkProgram (шейдерпрограмма);
if (! gl.getprogramparameter (shaderprogram, gl.link_status)) {
блюд ("Cannotinitialiseshaders");
}
gl.useprogram (шейдерпрограмма);
shaderprogram.vertexpositionattribute = gl.getattriblocation (Shaderprogram, "Avertexposition");
gl.enablevertexattribarray (shaderprogram.vertexpositionattribute);
Shaderprogram.vertexcolorattribute = gl.getAttriblocation (ShaderProgram, "Avertexcolor");
gl.enablevertexattribarray (shaderprogram.vertexcolorattribute);
Shaderprogram.pmatrixuniform = gl.getUniformLocation (ShaderProgram, "upmatrix");
Shaderprogram.mvmatrixuniform = gl.getUniformLocation (ShaderProgram, "Umvmatrix");
}
Есть шейдер, но как сделать видеокарту выполнить? Программа такой мост. Это нативный двоичный код WebGL. Его функция в основном позволяет графической карте запустить код шейдера, чтобы отобразить указанные данные модели.
Вот также вспомогательный метод Getshader. Этот метод состоит в том, чтобы пересечь документ HTML, найти определение шейдера и создать шейдер после получения определения. Я не буду вдаваться в подробности здесь:
functiongetshader (gl, id) {
Varshaderscript, TheSource, CurrentChild, Shader;
shaderscript = document.getElementbyId (id);
if (! ShaderScript) {
returnnull;
}
theSource = "";
currentChild = shaderscript.firstchild;
while (currentchild) {
if (currentChild.nodeType == currentChild.text_node) {
theSource+= currentChild.TextContent;
}
currentChild = currentChild.nextIbling;
}
if (shaderscript.type == "x-shader/x-fragment") {
Shader = gl.createshader (gl.fragment_shader);
} elseif (shaderscript.type == "x-shader/x-vertex") {
Shader = gl.createShader (gl.vertex_shader);
}еще{
// Неизвестный Шадертип
returnnull;
}
gl.shadersource (шейдер, тезис);
// CompiletheShaderProgram
gl.compileshader (шейдер);
// см
if (! gl.getshaderparameter (shader, gl.compile_status)) {
Alert ("AnerroroCcurredCompilingTheShaders:"+gl.getshaderinfolog (шейдер));
returnnull;
}
returnshader;
}
Шаг 3: Создание/загрузка данных модели - initbuffers В этих небольших примерах данные модели в основном генерируются напрямую. В реальных программах эти данные должны быть получены из загрузки модели:vartrianglevertexpositionbuffer;
vartrianglevertexcolorbuffer;
functionInitBuffers () {
TrianglevertexpositionBuffer = gl.createBuffer ();
gl.bindbuffer (gl.array_buffer, trianglevertexpositionbuffer);
varvertices = [
0,0,1,0,0,0,
-1,0, -1,0,0,0,
1.0, -1,0,0,0
];
gl.bufferdata (gl.array_buffer, newfloat32array (вершины), gl.static_draw);
TrianglevertexpositionBuffer.Itemsize = 3;
Trianglevertexpositionbuffer.numitems = 3;
Trianglevertexcolorbuffer = gl.createBuffer ();
gl.bindbuffer (gl.array_buffer, trianglevertexcolorbuffer);
varcolors = [
1,0,0,0,0,0,1,0,
0,0,1,0,0,0,1,0,
0,0,0,0,1,0,1,0
];
gl.bufferdata (gl.array_buffer, newfloat32array (цвета), gl.static_draw);
Trianglevertexcolorbuffer.itemsize = 4;
Trianglevertexcolorbuffer.numitems = 3;
}
Приведенный выше код создает вершины и цветные данные треугольника и помещают их в буфер.
Шаг 4: рендеринг - DrawScene После подготовки данных просто передайте их Webgl для рендеринга. Метод GL.DraWarrays вызывает здесь. Посмотрите на код:functionDrawScene () {
gl.viewport (0,0, gl.viewportwidth, gl.viewportheath);
gl.clear (gl.color_buffer_bit | gl.depth_buffer_bit);
pmatrix = okmat4proj (45,0, gl.viewportwidth/gl.viewportheath, 0,1,100,0);
mvmatrix = okmat4trans (-1,5, 0,0, -7,0);
gl.bindbuffer (gl.array_buffer, trianglevertexpositionbuffer);
gl.vertexattribpointer (shaderprogram.vertexpositionattribute, trianglevertexpositionbuffer.itemsize, gl.float, false, 0,0);
gl.bindbuffer (gl.array_buffer, trianglevertexcolorbuffer);
gl.vertexattribpointer (shaderprogram.vertexcolorattribute, Trianglevertexcolorbuffer.itemsize, gl.float, false, 0,0);
setMatrixUniforms ();
gl.drawarrays (gl.triangles, 0, trianglevertexpositionbuffer.numitems);
}
Эта функция сначала устанавливает фон трехмерного мира на черный, затем устанавливает проекционную матрицу, устанавливает положение объекта, которое нужно нарисовать, а затем рисует объект в соответствии с данными вершины и цветов в буфере. Существуют также некоторые вспомогательные методы для генерации проекционной матрицы и прямоугольников модели (используя вспомогательный метод матрицы в библиотеке графики Oak3D), которые имеют мало общего с темой, поэтому я не буду подробно объяснить его здесь.
В основном есть так много процессов. Более сложные текстуры, свет и т. Д. Реализуются на основе них. Пожалуйста, обратитесь к китайскому руководству ниже, в котором содержится подробные примеры.
Как насчет этого? Каково это использовать нативную разработку WebGL? Вам нужно не только иметь глубокие 3D знания, но вам также необходимо знать различные детали реализации. Webgl делает это для гибкой адаптации к различным сценариям приложений, но для большинства непрофессионалов, таких как я, многие детали не должны быть известны. Это вызвало различные классовые библиотеки для оказания помощи в разработке, таких как библиотека Oak3D, используемая в этом разделе (для того, чтобы продемонстрировать разработку WebGL, в примерах использовались только методы помощи матрицы). В следующем разделе будет представлена более широко используемая графическая библиотека Three.js.
Практическая ссылка:Китайский учебник: http://www.hiwebgl.com/?p=42
Центр разработки: https://developer.mozilla.org/en/webgl