Перенос из opengl в webgl: Как преобразовать код OpenGL в WebGL

Как преобразовать код OpenGL в WebGL

Я сделал графический проект с помощью OpenGL, и теперь я хочу преобразовать его в WebGL, чтобы я мог поместить его в интернете. Есть ли способ напрямую преобразовать коды OpenGL C++ в WebGL или мне нужно переписать вручную ??
Я изучил только некоторые основы WebGL, поскольку я также изучаю javascript параллельно (только потому, что это требуется в кодировании webgl).
И любые другие предложения также приветствуются.

5 ответов

Я удивлен, что никто не упомянул Emscripten. Это не идеальное решение, и в зависимости от того, как структурирован ваш код и какие библиотеки вы используете, вам, возможно, придется выполнить некоторую ручную настройку, но он работает довольно хорошо как общий кросс-компилятор C++ для Javascript.

Я не обещаю, что это волшебная пуля, но, возможно, стоит посмотреть.

это коммерческое решение, но Mandreel сделает это. Он даже эмулирует поддержку фиксированной функции OpenGL ES 1.1 на WebGL. Есть также Emscripten который преобразует C / C++ и, по-видимому, имеет некоторые старый поддержка OpenGL.

иначе

1. вам придется конвертировать C++ в JavaScript, конечно
2. если вы использовали старые функции фиксированной функции старого OpenGL (glVertex, glColor, etc..) вам придется преобразовать их, чтобы использовать новый программируемый стиль OpenGL 4 и OpenGL ES 2.0

Если ваше приложение не тривиально, основная часть вашей проблемы будет заключаться в преобразовании кода C++ в JavaScript. C++ и JavaScript-это совершенно разные языки, например, один статически типизированный, а другой динамически типизированный.

WebGL основан на OpenGL ES 2.0, который является примерно подмножеством OpenGL 2.0. Таким образом, Вы можете написать код OpenGL, который можно перевести, но не весь код OpenGL. Трудно понять, насколько простым будет перенос кода OpenGL без дополнительной информации.

Я не знаю никаких инструментов для автоматизации работы для вас, и я был бы очень скептически к таким инструментам, если бы я их увидел. Сопоставление семантики одного языка программирования или API с другим-очень сложная задача для автоматизации.

вообще говоря, требуется ручная переписка. Существует не так много шансов, что общее решение будет правильно интерпретировать существующий код. Конечно, вы можете написать свой собственный конвертер, так как у вас есть преимущество только с вашим собственным кодом и структурами.

также стоит упомянуть, что WebGL является подмножеством OpenGL ES 2.0, поэтому код, написанный для настольных систем, не обязательно будет совместим в любом случае.

ближе всего я видел код для преобразования моделей OBJ в код WebGL.

кажется, что http://asmjs.org/ может быть основой для запуска кода, отличного от javascript, в браузере.

Emscriptem (уже упоминалось), я думаю, может понять LLVM, который может быть выведен некоторыми компиляторами C++, но, вероятно, ему также нужна ручная работа, как это происходит.

Я никогда не использовал ни один из них, но читал о них, и они кажутся интересными и пытаются достичь того, что вы пытаетесь достичь, я ничего не могу сказать о внедрение и как они работают в «реальном мире».

Мягкие частицы в WebGL и OpenGL ES / Хабр

Системы частиц это одни из самых простых способов сделать 3D сцену визуально богаче. В одном из наших Android приложений 3D Buddha Live Wallpaper достаточно простая сцена, которой было бы неплохо добавить чуть больше деталей. И когда мы думали как добавить разнообразия изображению то самым очевидным решением заполнить пустое пространство вокруг статуи Будды стало добавление клубов дыма или тумана. Благодаря использованию мягких частиц мы достигли довольно хорошего результата. В этой статье мы детально опишем реализацию мягких частиц на чистом WebGL / OpenGL ES без использования сторонних библиотек и готовых 3D-движков.

Разница между старым и обновленным приложением даже превзошла наши ожидания. Простенькие частицы дыма существенно улучшили сцену, сделали ее богаче и полнее. Клубы дыма это и дополнительные детали за которые “цепляется глаз”, а также способ сделать переход между основными объектами и фоном более плавным:

Мягкие частицы

Так что такое эти мягкие частицы? Вы можете помнить что во многих старых играх (времен Quake 3 и CS 1.6) эффекты дыма и взрывов имели очень четкие плоские границы на пересечении частиц с другой геометрией. Все современные игры уже не имеют подобных артефактов благодаря использованию мягких частиц — то есть частиц с размытыми, “мягкими” краями вокруг прилегающих объектов.

Рендеринг

Что требуется для того чтобы сделать частицы мягкими? Во-первых, нужна информация о глубине сцены для того чтобы определить места пересечения частиц с другими объектами и смягчить их. Затем нам нужно определить места пересечения геометрий сцены и частицы путем сравнения глубины сцены и частицы во фрагментном шейдере — пересечения там, где глубины одинаковые. Далее мы рассмотрим процесс рендеринга пошагово. Обе реализации сцены под Android OpenGL ES и WebGL одинаковы, основное отличие только в загрузке ресурсов. Реализация на WebGL имеет открытый исходный код и вы можете взять его тут — https://github.com/keaukraine/webgl-buddha.

Рендеринг карты глубины

Для рендеринга карты глубины сцены, сперва нам потребуется создать текстуры для карты глубины и цвета и назначить их определенному FBO. Это делается в методе initOffscreen() в файле BuddhaRenderer.js.
Сам рендеринг Actual объектов сцены в карту глубины выполняется в методе drawDepthObjects(), который отрисовывает статую Будды и плоскость пола. Однако, тут есть одна хитрость для улучшения производительности. Поскольку на данном этапе рендеринга нам не нужна информация о цвете, а лишь глубина, рендеринг в цветовой буфер отключается вызовом gl.colorMask(false, false, false, false), а затем включается снова вызовом gl.colorMask(true, true, true, true). Функция glcolorMask() может выключать и выключать запись красного, зеленого синего и альфа компонента по отдельности, так что для того чтобы полностью отключить запись в буфер цвета мы ставим всем компонентам флажок false, а затем включаем их для рендеринга на экран, выставляя их все в true. Результат рендеринга в текстуру глубины можно увидеть, раскомментировав вызов drawTestDepth() в методе drawScene(). Поскольку текстура карты глубины имеет только один канал, она воспринимается как только красная, синий и зеленый каналы равно нулю. Визуализация карты глубины нашей сцены выглядит так:

Рендеринг частиц

Код шейдера, который используется для отрисовки частиц находится в файле SoftDiffuseColoredShader.js. Давайте разберемся как он устроен.

Основная идея поиска пересечения геометрий частицы и сцены состоит в сравнении значения текущей глубины фрагмента с сохраненным значением из карты глубины.

Первый шаг в сравнении глубин это линеаризация значений глубин, поскольку оригинальные значения экспоненциальные. Это делается с помощью функции calc_depth(). Эта техника хорошо описана здесь — https://community.khronos.org/t/soft-blending-do-it-yourself-solved/58190. Для линеаризации значений нам понадобится юниформ-переменная vec2 uCameraRange, компоненты x и y которой содержат значения ближней и дальней плоскостей отсечения камеры. Затем шейдер вычисляет линейную разницу между глубиной частицы и сцены — это значение сохраняется в переменной a. Однако, если мы будем применять это значение к цвету фрагмента, мы получим слишком прозрачные частицы — цвет будет затухать линейно от любой геометрии позади частицы, и затухать довольно быстро. Вот как выглядит визуализация линейной разницы глубины (Вы можете раскомментировать соответствующую строчку кода в шейдере и увидеть ее):

Чтобы частицы были более прозрачными только возле границы пересечения (в районе a=0) мы применим функцию GLSL smoothstep() к значению переменной a со значением перехода от 0 до коэффициента, заданного в юниформе uTransitionSize, который определяет ширину прозрачного перехода. Если Вы желаете узнать больше о работе функции smoothstep() и увидеть пару интересных примеров ее использования, рекомендуем прочитать эту статью — http://www.fundza.com/rman_shaders/smoothstep/. Финальный коэффициент сохраняется в переменной b. Для режима миешивания цветов, используемого в нашей сцене, достаточно просто перемножить цвет частицы взятый из текстуры на этот коэффициент; в других реализациях частиц Вам может понадобиться изменение например только альфа канала. Если в шейдере раскомментировать строчку кода для визуализации этого коэффициента то результат будет выглядеть так:
Сравнение различных значений коэффициента “мягкости” частиц:

Оптимизация отрисовки спрайтов

В этой сцене мелкие пылинки отрисовываются как точечные спрайты (примитивы типа GL_POINTS). Этот режим удобен тем что он автоматически создает готовую квадратную геометрию частицы с текстурными координатами. Однако, они имеют и недостатки, которые делают их использование неуместным для крупных частиц клубов тумана. Прежде всего, они отсекаются плоскостями отсечения матрицы камеры по координатам центра спрайта. Это приводит к тому что они резко исчезают из вида на краях экрана. Также, квадратная форма спрайта не очень оптимальна для фрагментного шейдера так как он вызывается и в тех местах где текстура частиц пустая, что вызывает заметную излишнюю перерисовку. Мы используем оптимизированную форму частицы — с обрезанными краями в тех местах где текстура полностью прозрачна:
Такие модели для частиц обычно называются billboard. Конечно, они не могут быть отрисованы как примитивы GL_POINTS, поэтому каждая частица рисуется отдельно. Это создает не очень много вызовов drawElements, во всей сцене всего 18 частиц тумана. Они должны быть размещены в произвольных координатах, масштабированы но повернуты таким образом, чтобы всегда быть перпендикулярными к камере независимо от ее положения. Это достигается модификацией матрицы, описанной в этом ответе на StackOverflow. В файле BuddhaRenderer.js есть метод calculateMVPMatrixForSprite() который создает MVP-матрицы для billboard моделей. Он выполняет все обычные трансформации перемещения и масштабирования а затем использует resetMatrixRotations() для сброса компонента вращения матрицы model-view перед тем как она перемножается на матрицу проекции. Результирующая матрица выполняет трансформацию в результате которой модель всегда направлена ровно на камеру.

Результат

Финальный результат можно посмотреть вживую здесь.

Можете изучать и переиспользовать для своих проектов исходный код с Github.

Как преобразовать код OpenGL для WebGL — webgl

Я сделал графический проект, используя OpenGL, и теперь я хочу преобразовать его в WebGL, чтобы я мог разместить его в интернете. Есть ли какой-либо способ напрямую преобразовать коды OpenGL c++ в WebGL или мне придется переписывать вручную ??
Я изучил только некоторые основы WebGL, поскольку я также изучаю javascript параллельно(только потому, что это требуется в кодировании webgl).
И любые другие предложения также приветствуются.

webgl

Поделиться

Источник

Bond    

27 марта 2012 в 07:27

5 Ответов

14

Я удивлен, что никто не упомянул Emscripten . Это не идеальное решение, и в зависимости от того, как структурирован ваш код и какие библиотеки вы используете, вам, возможно, придется сделать некоторые ручные настройки, но он довольно хорошо работает как универсальный кросс-компилятор C++ — Javascript.

Я не обещаю, что это волшебная пуля, но, может быть, стоит посмотреть.

Поделиться

Toji    

27 марта 2012 в 16:53

5

Это коммерческое решение, но Мандрел сделает это. Он даже эмулирует поддержку фиксированной функции OpenGL ES 1.1 на WebGL. Есть также Emscripten , который преобразует C/C++ и, по-видимому, имеет некоторую старую поддержку OpenGL .

Иначе,

1. Конечно, вам придется конвертировать C++ в JavaScript
2. Если вы использовали старые фиксированные функции функции old OpenGL (glVertex, glColor и т. д..) вам придется преобразовать их, чтобы использовать более новый программируемый стиль OpenGL 4 и OpenGL ES 2.0

Поделиться

gman    

27 марта 2012 в 19:23

3

Если ваше приложение не является тривиальным,основная часть вашей проблемы будет заключаться в преобразовании кода C++ в JavaScript. C++ и JavaScript-это совершенно разные языки, например, один из них статически типизирован, а другой-динамически типизирован.

WebGL основан на OpenGL ES 2.0, что примерно соответствует подмножеству OpenGL 2.0. Таким образом, вы можете написать код OpenGL, который можно перевести напрямую, но не весь код OpenGL. Трудно сказать, насколько простым будет перенос кода OpenGL без дополнительной информации.

Я не знаю никаких инструментов для автоматизации работы для вас, и я бы очень скептически отнесся к таким инструментам, если бы увидел их. Сопоставление семантики одного языка программирования или API с другим-очень сложная задача для автоматизации.

Поделиться

kusma    

27 марта 2012 в 07:36

0

Вообще говоря, требуется ручное переписывание. Существует не так много шансов, что универсальное решение будет правильно интерпретировать существующий код. Конечно, вы можете написать свой собственный конвертер, поскольку у вас есть преимущество только в работе с вашим собственным кодом и структурами.

Также стоит отметить, что WebGL является подмножеством OpenGL ES 2.0, поэтому код, написанный для настольных систем, не обязательно будет совместим в любом случае.

Самое близкое, что я видел, — это код для преобразования OBJ моделей в WebGL код.

Поделиться

SpliFF    

27 марта 2012 в 07:32

0

Похоже, что http://asmjs.org/ может быть основой для запуска не javascript кода в браузере.

Emscriptem (уже упоминавшийся), я думаю, может понять LLVM, который может быть выведен некоторыми компиляторами C++, но он, вероятно, также нуждается в ручной работе, как это происходит.

Я никогда не использовал ни один из них, но читал о них, и они кажутся интересными и пытаются достичь того, что вы пытаетесь достичь, я ничего не могу сказать о реализации и о том, как они работают в «real world».

Поделиться

Rolf    

12 октября 2015 в 11:39

Похожие вопросы:

Разница в Альфа-рендеринге между OpenGL и WebGL

Я визуализирую ту же сцену, используя тот же самый точный код C++, один раз в native OpenGL на windows и один раз с помощью Emscripten на WebGL. Все в сцене выглядит точно так же, за исключением тех…

Используют ли WebGL и OpenGL один и тот же язык затенения?

Является ли язык shader для WebGL тем же самым, что и для OpenGL? Другими словами, если я напишу shader для WebGL, будет ли он полностью совместим с OpenGL? Я не хочу покупать книгу о OpenGL языке…

GL_TEXTURE_2D_ARRAY в OpenGL ES/WebGL?

У меня есть приложение в виду, что было бы очень полезно от использования текстур массива . Однако я не смог определить, доступны ли текстуры массива в текущей спецификации WebGL и/или в OpenGL ES…

Различия между WebGL и OpenGL

Может ли кто-нибудь дать мне простой ответ о точной разнице между OpenGL и WebGL? Мне нужна более конкретная информация о следующем: семантика программирования, наследственность API, расширения API…

Производительность WebGL и OpenGL

В течение последнего месяца я возился с WebGL и обнаружил, что если я создаю и рисую большой буфер вершин, он вызывает низкий FPS. Кто-нибудь знает, будет ли то же самое, если я использую OpenGL с…

three.js для webGL до OpenGL

Я хочу взять код three.js и, возможно, преобразовать его в код webGL или предпочтительно OpenGL, чтобы я мог использовать его в Автономной программе, которую я разрабатываю в Python. Есть ли…

Как преобразовать код OpenGL для инструментов?

У меня есть приложение, использующее код OpenGL. Теперь я хочу преобразовать его в код JOGL . Можно ли преобразовать код OpenGL в JOGL? Какие изменения мы должны сделать?

WebGL/OpenGL: сравнение производительности

Для образовательных целей мне нужно сравнить производительность WebGL с OpenGL. У меня есть две эквивалентные программы, написанные в WebGL и OpenGL, теперь мне нужно взять частоту кадров из них и…

Modernizr: тестирование для WebGL против WebGL Exentions

Я использую THREE.js сцен и графических объектов на моей веб-странице. Я знаю, по крайней мере, THREE.js использует WebGL . Я хотел бы использовать Modernizr , чтобы проверить текущий браузер на…

Какая версия OpenGL поддерживается WebGL?

Я нахожусь в процессе чтения WebGL и просматриваю некоторые учебники . Но я думаю, что мне нужно было узнать OpenGL явно, чтобы работать с WebGL более эффективно. Но есть много версий OpenGL, и эта…

Вращение, движение, масштабирование и проекции в OpenGL под Lazarus

Среда программирования: 

В OpenGL используются основные три системы координат: левосторонняя, правосторонняя и оконная. Первые две системы являются трехмерными и отличаются друг от друга направлением оси z: в правосторонней она направлена на наблюдателя, в левосторонней – в глубину экрана. Ось x направлена вправо относительно наблюдателя, ось y – вверх.

Системы координат в OpenGL

Строго говоря, OpenGL позволяет путем манипуляций с матрицами моделировать как правую, так и левую систему координат. Но на данном этапе лучше пойти простым путем и запомнить: основной системой координат OpenGL является правосторонняя система.

РАБОТА С МАТРИЦАМИ

Для задания различных преобразований объектов сцены в OpenGL используются операции над матрицами, при этом различают три типа матриц: модельно-видовая, матрица проекций и матрица текстуры. Все они имеют размер 4×4. Видовая матрица определяет преобразования объекта в мировых координатах, такие как параллельный перенос, изменение масштаба и поворот. Матрица проекций определяет, как будут проецироваться трехмерные объекты на плоскость экрана (в оконные координаты), а матрица текстуры определяет наложение текстуры на объект.

Умножение координат на матрицы происходит в момент вызова соответствующей команды OpenGL, определяющей координату (как правило, это команда glVertex*)

Для того чтобы выбрать, какую матрицу надо изменить, используется команда:

void glMatrixMode (GLenum mode)

вызов которой со значением параметра mode равным

GL_MODELVIEW, 
GL_PROJECTION,
GL_TEXTURE 

включает режим работы с модельно-видовой матрицей, матрицей проекций, или матрицей текстуры соответственно. Для вызова команд, задающих матрицы того или иного типа, необходимо сначала установить соответствующий режим.

Для определения элементов матрицы текущего типа вызывается команда

void glLoadMatrix[f d] (GLtype *m)

где m указывает на массив из 16 элементов типа float или double в соответствии с названием команды, при этом сначала в нем должен быть записан первый столбец матрицы, затем второй, третий и четвертый. Еще раз обратим внимание: в массиве m матрица записана по столбцам.

Команда

void glLoadIdentity (void)

заменяет текущую матрицу на единичную.

Часто бывает необходимо сохранить содержимое текущей матрицы для дальнейшего использования, для чего применяются команды

void glPushMatrix (void)
void glPopMatrix (void) 

Они записывают и восстанавливают текущую матрицу из стека, причем для каждого типа матриц стек свой. Для модельно-видовых матриц его глубина равна как минимум 32, для остальных – как минимум 2.

МОДЕЛЬНО-ВИДОВЫЕ ПРЕОБРАЗОВАНИЯ

К модельно-видовым преобразованиям будем относить перенос, поворот и изменение масштаба вдоль координатных осей. Для проведения этих операций достаточно умножить на соответствующую матрицу каждую вершину объекта и получить измененные координаты этой вершины.

Сама матрица может быть создана с помощью следующих команд:

void glTranslate[f d] (GLtype x, GLtype y, GLtype z)
void glRotate[f d] (GLtype angle, GLtype x, GLtype y, GLtype z)
void glScale[f d] (GLtype x, GLtype y, GLtype z)

glTranlsate*() производит перенос объекта, прибавляя к координатам его вершин значения своих параметров.

glRotate*() производит поворот объекта против часовой стрелки на угол angle (измеряется в градусах) вокруг вектора (x,y,z).

glScale*() производит масштабирование объекта (сжатие или растяжение) вдоль вектора (x,y,z), умножая соответствующие координаты его вершин на значения своих параметров.

Все эти преобразования изменяют текущую матрицу, а поэтому применяются к примитивам, которые определяются позже. В случае, если надо, например, повернуть один объект сцены, а другой оставить неподвижным, удобно сначала сохранить текущую видовую матрицу в стеке командой glPushMatrix(), затем вызвать glRotate() с нужными параметрами, описать примитивы, из которых состоит этот объект, а затем восстановить текущую матрицу командой glPopMatrix().

Чтобы изображенная фигура выглядела пространственной, систему координат разворачивают вокруг оси X и вокруг оси Y.

ПРОЕКЦИИ

В OpenGL существуют стандартные команды для задания ортографической (параллельной) и перспективной проекций. Первый тип проекции может быть задан командами

 
void glOrtho (GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, 
              GLdouble near, GLdouble far)

void glFrustum (GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, 
              GLdouble near, GLdouble far)

Место команд в программе.
Для того чтобы при каждой последующей перерисовке экрана не происходило изменение размеров сцены, связанное с переносом и проецированием, следует использовать видовые команды по определенным правилам.
Первый способ – использование команды glLoadIdentity:

glLoadIdentity; 			//Сброс всех матриц в 1
glFrustum(-1, 1, -1, 1, 3, 10);		//видовые параметры
glTranslatef(0.0, 0.0, -5.0);		//начальный сдвиг системы координат
glRotatef(30.0, 1.0, 0.0, 0.0);		//поворот относительно оси X
glRotatef(70.0, 0.0, 1.0, 0.0);		//поворот относительно оси Y
glBegin(…);
  …..				// команды рисования
glEnd;	 

Второй способ – использование команд glPushMatrix и glPopMatrix:

glPushMatrix(); 			//запоминаем текущую матрицу
glFrustum(-1, 1, -1, 1, 3, 10);		//видовые параметры
glTranslatef(0.0, 0.0, -5.0);		//начальный сдвиг системы координат
glRotatef(30.0, 1.0, 0.0, 0.0);		//поворот относительно оси X
glRotatef(70.0, 0.0, 1.0, 0.0);		//поворот относительно оси Y
glBegin(…);
  …..				// команды рисования
glEnd;	 
glPopMatrix();				//восстанавливаем текущую матрицу

ПРОГРАММА — ПРИМЕР ВРАЩЕНИЯ КУБА В LAZARUS НА OPENGL

Разместите на форме три компонента

OpenGLControl1: TOpenGLControl; 
Button1: TButton;
Timer1: TTimer;  

Примечание. Обратите внимание для установки компонента TOpenGLControl смотрите урок «Подключение и работа с OpenGL в Lazarus под Windows».

Пропишите на события создания формы Form1: OnFormCreate, нажатия кнопки Form1: OnButton1Click и работы таймера Form1: OnTimer1Timer следующий код:

unit Unit1; 
 
{$mode objfpc}{$H+}
 
interface
 
uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls,
  ExtCtrls, OpenGLContext, GL, GLU;
 
type
 
  { TForm1 }
 
  TForm1 = class(TForm)
    Button1: TButton;
    OpenGLControl1: TOpenGLControl;
    Timer1: TTimer;
    procedure Button1Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure Timer1Timer(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
    cube_rotation: GLFloat;
    Speed:          Double;
  end; 
 
var
  Form1: TForm1; 
 
implementation
 
{$R *.lfm}
 
{ TForm1 }
 
procedure TForm1.Button1Click(Sender: TObject);
begin
  Timer1.Enabled := true;
end;
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  Timer1.Enabled  := false;
  Timer1.Interval := 100;
  Speed := 1;
end;
 
procedure TForm1.Timer1Timer(Sender: TObject);
begin
  glClearColor(1.0, 1.0, 1.0, 1.0);
  glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
  glEnable(GL_DEPTH_TEST);
 
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  gluPerspective(45.0, double(width) / height, 0.1, 100.0);
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
 
  glTranslatef(0.0, 0.0,-6.0);
  glRotatef(cube_rotation, 1.0, 1.0, 1.0);
 
  glBegin(GL_QUADS);
          glColor3f(0.0,1.0,0.0);                              // Set The Color To Green
          glVertex3f( 1.0, 1.0,-1.0);                  // Top Right Of The Quad (Top)
          glVertex3f(-1.0, 1.0,-1.0);                  // Top Left Of The Quad (Top)
          glVertex3f(-1.0, 1.0, 1.0);                  // Bottom Left Of The Quad (Top)
          glVertex3f( 1.0, 1.0, 1.0);                  // Bottom Right Of The Quad (Top)
  glEnd();
  glBegin(GL_QUADS);
          glColor3f(1.0,0.5,0.0);                              // Set The Color To Orange
          glVertex3f( 1.0,-1.0, 1.0);                  // Top Right Of The Quad (Bottom)
          glVertex3f(-1.0,-1.0, 1.0);                  // Top Left Of The Quad (Bottom)
          glVertex3f(-1.0,-1.0,-1.0);                  // Bottom Left Of The Quad (Bottom)
          glVertex3f( 1.0,-1.0,-1.0);                  // Bottom Right Of The Quad (Bottom)
  glEnd();
  glBegin(GL_QUADS);
          glColor3f(1.0,0.0,0.0);                              // Set The Color To Red
          glVertex3f( 1.0, 1.0, 1.0);                  // Top Right Of The Quad (Front)
          glVertex3f(-1.0, 1.0, 1.0);                  // Top Left Of The Quad (Front)
          glVertex3f(-1.0,-1.0, 1.0);                  // Bottom Left Of The Quad (Front)
          glVertex3f( 1.0,-1.0, 1.0);                  // Bottom Right Of The Quad (Front)
  glEnd();
  glBegin(GL_QUADS);
          glColor3f(1.0,1.0,0.0);                              // Set The Color To Yellow
          glVertex3f( 1.0,-1.0,-1.0);                  // Bottom Left Of The Quad (Back)
          glVertex3f(-1.0,-1.0,-1.0);                  // Bottom Right Of The Quad (Back)
          glVertex3f(-1.0, 1.0,-1.0);                  // Top Right Of The Quad (Back)
          glVertex3f( 1.0, 1.0,-1.0);                  // Top Left Of The Quad (Back)
  glEnd();
  glBegin(GL_QUADS);
          glColor3f(0.0,0.0,1.0);                              // Set The Color To Blue
          glVertex3f(-1.0, 1.0, 1.0);                  // Top Right Of The Quad (Left)
          glVertex3f(-1.0, 1.0,-1.0);                  // Top Left Of The Quad (Left)
          glVertex3f(-1.0,-1.0,-1.0);                  // Bottom Left Of The Quad (Left)
          glVertex3f(-1.0,-1.0, 1.0);                  // Bottom Right Of The Quad (Left)
  glEnd();
  glBegin(GL_QUADS);
          glColor3f(1.0,0.0,1.0);                              // Set The Color To Violet
          glVertex3f( 1.0, 1.0,-1.0);                  // Top Right Of The Quad (Right)
          glVertex3f( 1.0, 1.0, 1.0);                  // Top Left Of The Quad (Right)
          glVertex3f( 1.0,-1.0, 1.0);                  // Bottom Left Of The Quad (Right)
          glVertex3f( 1.0,-1.0,-1.0);                  // Bottom Right Of The Quad (Right)
  glEnd();
 
  cube_rotation += 5.15 * Speed;
 
 
  OpenGLControl1.SwapBuffers;
end;
 
end.

Все прелести OpenGL прямо в браузере: вышли WebGL 1.0 и Dev Goodies | Новости VJ программ

Fractal Lab Introduction from subBlue on Vimeo.

В то время как большая часть ПО для веба сейчас находится на стадии проекта, WebGL представлен уже в первой релизной версии. Apple, Google, Mozilla и Opera – вот те компании, находящиеся в группе разработки, которые сотрудничают друг с другом, чтобы обеспечить нормальную работу WebGL в своих браузерах. (Так что готовьтесь к встрече WebGL в Safari, Chrome, WebKit, Firefox,и Opera.) Мобильный WebGL ещё развит не так хорошо, но вы уже сейчас можете ощутить все преимущества  WebGL для десктопов. В скором времени выйдет финальный релиз Firefox 4.0, а пока Google Chrome – прекрасный выбор, если вам не терпится поэкспериментировать с WebGL в стабильной версии браузера.

Подробнее о WebGL 1.0 вы можете прочитать в следующей статье:

http://www.khronos.org/news/press/releases/khronos-releases-final-webgl-1.0-specification

Лицензия «royalty-free» позволяет использовать графические возможности OpenGL ES 2.0 3D в HTML5; браузеры от Apple, Google, Mozilla и Opera адаптированы под использование WebGL; бесплатные тесты новой технологии доступны на сайте Khronos.

А как же эксперименты? Вы скажете, что хотите испробовать WebGL, и весь остаток дня наслаждаться красивыми элементами, созданными с помощью него.

Fractal Lab  от Тома Беддарда (Tom Beddard) – это набор инструментов для создания фракталов в современных браузерах с поддержкой WebGL [http://fractal.io/]

А здесь вы можете прочитать милую хвалебную статью об этом инструменте от Creative Applications: [http://www.creativeapplications.net/webapp/fractal-lab-webapp/]

Том Беддард (известный как subblue) имеет и другие интересные разработки, которые можно будет увидеть на видео ниже. Кроме того прочитайте следующую статью о приёмах, касающихся использования WebGL — [http://www.fractalforums.com/3d-fractal-generation/revenge-of-the-half-eaten-menger-sponge/].

Когда вы вдоволь наэкспериментируетесь и будете готовы создавать свои собственные красивые элементы (для браузеров и не только) – команда Khronos будет рада принять вас в свои ряды.

Так что вперёд! Разрабатывайте!

Краткий обзор OpenGL можно прочитать здесь — http://www.scribd.com/doc/40323821/OpenGL-Overview

Khronos опубликовали на своём сайте огромное количество презентаций. Благодаря им вы как будто совершаете поездку в Сан-Франциско на конференцию разработчиков игр, не затрачивая на такое путешествие ни рубля…

На сайте Khronos много информации о WebGL, а также об OpenGL и OpenCL. (Сейчас для людей, создающих живые визуальные представления, предпочтительней «небраузерная» версия WebGL.)

Загляните также по следующим ссылкам:

Библиотека презентация для разработчиков [http://www.khronos.org/developers/library/]

Если вы интересуетесь WebGL, то вам будет интересен следующий раздел презентаций от Khronos:

2011 GDC WebGL [http://www.khronos.org/library/detail/2011-gdc-webgl]

Если же вам интересен старый добрый OpenGL, включая новомодный OpenGL 4, то обратите внимание статьи по  GDC OpenGL 2011 [http://www.khronos.org/library/detail/2011-gdc-opengl] … и по OpenCL [http://www.khronos.org/library/detail/2011-gdc-opencl] а также его мобильной версии  [http://www.khronos.org/library/detail/2011-gdc-mobile]

Что касается ограничений – для работы с WebGL вам потребуются самые современные браузеры – для Safari – это сборка Safari Nightly, также некоторые возможности доступны в бета-версии Firefox и последней стабильной версии Chrome. Со дня на день должна выйти стабильная версия Firefox 4.0.

Но самым большим «ограничением» является Microsoft. Microsoft является приверженцем только их собственного DirectX, работающего только под Windows. Этот вопрос уже затрагивался на прошлой неделе в следующих статьях:

• WebGL 1.0 spec finalized, everyone but Microsoft supports it (“Работа над WebGL 1.0 завершена. Все кроме Microsoft  поддерживают эту технологию”) [http://downloadsquad.switched.com/2011/03/04/webgl-1-0-spec-finalized-everyone-but-microsoft-supports-it/]
• WebGL 1.0 is done. Where’s Microsoft? (“Выпущен WebGL 1.0. Но где же Microsoft ?”) [http://news.cnet.com

С тех пор как мы говорим об аппаратном ускорении, наличие самой новой версии браузера никогда не было необходимым условием. Но очень важно обновлять операционную систему и драйвера. И это уже было подмечено разработчиками Google в блоге «The Chromium Blog» — и эта же мысль выражена в заголовке их поста:

Графическое ускорение + старые драйвера = L [http://blog.chromium.org/2011/03/gpu-acceleration-old-drivers.html]

Google даёт следующий совет:

1. Используйте самую последнюю стабильную версию вашей операционной системы (такую как Windows 7 или Mac OS 10.6)

2. Устанавливайте все системные обновления и обновления драйверов, которые доступны для вашей системы.

Но вернёмся назад к WebGL: мы видим впечатляющие результаты в браузерах (за исключением браузера от Microsoft). WebGL – это окончательный стандарт, а не просто проект или технология будущего, благодаря ему 3D графика в браузерах действительно аппаратно ускоряется. Вам не нужно изучать новый язык программирования, устанавливать плагины; нет здесь и смутных обещаний, какие чудесные вещи вы сможете делать в будущем с помощью этой технологии. Ускорение 3D графики доступно уже прямо сейчас – и оно демонстрирует мощь OpenGL не только в браузерах, но и на других компьютерных устройствах: от наладонников до десктопов профессионального уровня.

А сейчас красивое видео от subblue (как и было обещано выше)…

Surface detail from subBlue on Vimeo.

Со дня презентации первой модели iPad прошел год и теперь все модели планшета устройства доступны к продаже на территории России. С момента начала продаж цена на ipad опустилась и планшет ipad 2 купить может большой круг покупателей.

Tags:
3D
, Apple
, awesomeness
, browsers
, chrome
, design
, development
, eye-candy
, fractals
, GDC
, Google
, html-5
, microsoft-rocks
, open-web
, OpenCL
, opengl
, opera
, safari
, standards
, visualist
, visuals
, web
, webgl
, webkit

Перенос программ OpenGL с C на WebGL и Javascript

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

Страница не найдена · GitHub Pages

Страница не найдена · GitHub Pages

Файл не найден

Сайт, настроенный по этому адресу, не
содержать запрошенный файл.

Если это ваш сайт, убедитесь, что регистр имени файла соответствует URL-адресу.
Для корневых URL (например, http://example.com/ ) вы должны предоставить
index.html файл.

Прочтите полную документацию
для получения дополнительной информации об использовании GitHub Pages .

.

новейших вопросов о webgl — qaruQaruSite

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

2. Авторизоваться
   зарегистрироваться

3. текущее сообщество
   

   • Переполнение стека

     Помогите
     болтать

   • Переполнение мета-стека

   ваши сообщества

   Зарегистрируйтесь или

.

No related posts.