Элементы холста 3D Canvas в Opera.

Opera опубликовала экспериментальные данные построенные в Opera Labs, с поддержкой элементов видео в SVG. Новая версия Opera , также включает в себя экспериментальный элемент холста 3D Canvas. Для просмотра демо представленных в этой статье вы должны будете скачать новый релиз Opera. Новый релиз в настоящее время доступен только для Windows. Версии для Mac и Linux должны быть доступны в ближайшее время. Новое дополнение к HTML5 является холстом. Холст более или менее точечный рисунок, который можно сделать на использовании JavaScript. Само рисование выполняется в  контексте. Спецификация включает 2D контекст который должен быть реализован и он позволяет браузерам добавлять свои собственные контексты.

В этой статье я опишу 3D контекст котрый я добавил, он имеется в недавно выпущенном релизе Opera Labs. Контекст называется Opera -3D и в основном реализован в версиях Opera 3D Canvas. Для тех, кто не знаком с тегом холста здесь ускоренный курс в его использовании.
1.Добавить <canvas></canvas> tag  теги на вашу страницу
2.Получить элемент холста из JavaScript с использованием getElementById или нечто подобное.
3.Call canvas.getContext (<имя>); для получения подробной информации.
Вот и всё. Если у вас есть контекст в вашем скрипте, вы можете просто посмотерть  функции визуализации.
Opera -3D контекст .
3D контекст Opera , в отличие от Mozilla, не прямо отображает OpenGL. Он находится на более абстрактном уровне. Основными причинами этого являются:
•Это делает его легче для реализации на не-OpenGL платформах (таких как D3D)
•У той или иной формы обнаруживались доступные столкновения.
Основная концепция является то, что вы работаете с 3D-моделями. Для создания 3D-моделей, добавте вершину треугольников и, наконец, сделайте для них холст. Это то, как выглядит интерфейс.

 interface CanvasRenderingContextOpera3D {

 // state

 void save(); // push state on state stack

 void restore(); // pop state stack and restore state

 // scene/frame

 void beginScene(); // start rendering a new frame

 void endScene(); // finish rendering of the scene and present the result

// transformations

 void translate(in float x, in float y, in float z);

 void scale(in float x, in float y, in float z);

 void rotateX(in float rotation);

 void rotateY(in float rotation);

 void rotateZ(in float rotation);

 // rendering operation

 void drawTriangle(in float x1, in float y1, in float z1, in float tex_s1, in float tex_t1, 

 in float x2, in float y2, in float z2, in float tex_s2, in float tex_t2, 

 in float x3, in float y3, in float z3, in float tex_s3, in float tex_t3);

 void draw3DModel(in Canvas3DModel model);

 // create objects

 CanvasTexture createTexture(in Image img);

 Canvas3DModel create3DModel();

 // collision detection

 string checkIntersection(in float x, in float y, in float z, in float radius, in Canvas3DModel model);

 // rendering state

 attribute CanvasTexture texture; // current texture or null for no texture, default is null

 attribute string color; // current color, default is transparent black

 attribute float fov; // field of view of the scene in degrees, default is 45

 attribute float nearPlane; // distance to the near clipping plane, default is 0.1

 attribute float farPlane; // distance to the far clipping plane, default is 100

 attribute string ztest; // "none", "less", "lessequal", "greater", "greaterequal", "equal", "notequal". Default is "lessequal"

 attribute string blend; // "replace", "add", "srcalpha", "multiply". Default is "replace"

};

 interface Canvas3DModel {

 void addVertex(in float x, in float y, in float z, in float s, in float t);

 void addTriangle(in integer vertex1, in integer vertex2, in integer vertex3);

};

 interface CanvasTexture{

};

Пойдем через различные функции в порядке их появления выше:
•сохранять и восстанавливать функции сохранения и восстановления текущего состояния рендеринга. Они очень похожи на сохранение и восстановление в 2D контексте.
•перевод,масштаб и поворот функции изменяет матрицу преобразования. Текущая матрица преобразования преобразует все вершины с 3D Canvas. Это включает в себя объекты Canvas3DModel.
•BeginScene и EndScene используются для разделения кадра. Холст обновляется только при EndScene. Если это так, то изображение копируется на холсте. На холсте рисуются только команды выпущенные между BeginScene и EndScene.
•drawTriangle обращает один треугольник. Этот метод, как правило, медленный и не должен использоваться для создания многих треугольников.
•draw3DModel делает модель ранее созданную с create3DModel на холсте. Эта функция гораздо лучше подходит для визуализации больших партий треугольников.
•CreateTexture создает текстуру объекта из изображения объекта. Этот метод не сработает, если размеры изображения объекта не в степени двойки (1, 2, 4, 8, 16, 32 и т.д.), с регулярным холстом можно создавать текстуры из изображения (в том числе SVG) или другие полотна.
•create3DModel создает объект 3DModel, которые могут быть построены (путем добавления вершины и треугольники) из оказываемых сценариев.
•checkIntersection просто сфера / модель столкновений функции обнаружения. Параметры сферы (центр и радиус) и модели для проверки столкновений с сфере. Функция возвращает точки столкновения, как струна, когда происходит столкновение (точки глубоко проникают в coosen как точки столкновения). Если столкновения не было найденная функция возвращает пустую строку наместо.
Обнаружение столкновений имеет некоторые ошибки в этой сборке, и я рекомендовал бы вам не использовать её. Мы будем писать больше об обнаружения столкновений, когда они неизменны.
Пример — вращающийся куб .
Это первый пример когда-либо написанный для Opera 3D в контексте. Он создаёт модели, добавляет вершины треугольников для куба, а затем делает её с различными преобразованиями. Если вы используете Opera с включенным 3D Canvas, то вы также можете увидеть вращающийся куб в действии. Файлы, используемые для этого примера файл HTML,как показано ниже, и изображение для использования в качестве текстуры (в данном случае operalogo.png).

<canvas id=»canvas» width=»200″ height=»200″>

  Canvas not supported!
</canvas>
<script>
  var canvas;
  var context3d;
  var rotation;
  var texture;
  var cube;
  function render(){
    context3d.beginScene();
    context3d.translate(0,0,-5);
    context3d.rotateY(rotation);
    context3d.rotateX(rotation);
    rotation += 2;
    context3d.color = "white";
    context3d.draw3DModel(cube);
    context3d.endScene();
  }
  function onTick(){
    render();
  }
  function onload(){
    canvas = document.getElementById("canvas");
    context3d = canvas.getContext("opera-3d");
    if (!context3d)
    {
      alert("3d canvas not supported");
      return;
    }
    logo = new Image();
    logo.src = "operalogo.png";
    texture = context3d.createTexture(logo);
    context3d.texture = texture;
    cube = context3d.create3DModel();
    cube.addVertex(-1, 1, 1, 0, 0);
    cube.addVertex(1, 1, 1, 1, 0);
    cube.addVertex(-1, -1, 1, 0, 1);
    cube.addVertex(1, -1, 1, 1, 1);
    cube.addVertex(-1, 1, -1, 1, 1);
    cube.addVertex(1, 1, -1, 0, 1);
    cube.addVertex(-1, -1, -1, 1, 0);
    cube.addVertex(1, -1, -1, 0, 0);
    cube.addTriangle(0,1,2);
    cube.addTriangle(2,1,3);
    cube.addTriangle(4,5,6);
    cube.addTriangle(6,5,7);
    cube.addTriangle(0,4,2);
    cube.addTriangle(2,4,6);
    cube.addTriangle(1,5,3);
    cube.addTriangle(3,5,7);
    cube.addTriangle(0,4,1);
    cube.addTriangle(1,4,5);
    cube.addTriangle(2,6,3);
    cube.addTriangle(3,6,7);
    setInterval(onTick, 10);
  }
  document.onload = onload();
</script>

Более продвинутые методы.
В приведенном выше примере простой текстурированный куб, который был жёстко прописан в сценарии. Можно сделать гораздо больше, чем используя Opera -3D контекст. Ниже я опишу некоторые методы, которые могут быть использованы для создания более сложных примеров.
DOM3 загрузка и сохранение.
Жёсткое кодирование модели отлично подходит для небольших объектов, так как объекты растут они становится все более и более трудными и жёстко кодироваными в их сценарии. Можно обойти эту проблему путем преобразования модели в формате XML, а затем загружать их в сценарий с помощью DOM3 загружать и сохранять для разбора XML. Вот модифицированная версия вращающегося куба.
Lightmapping
Lightmapping является одним из самых известных способов освещения. Он используется во многих популярных играх, например из серии землетрясения. Принцип состоит в том, что нужно умножить каждый пиксель со светом на значение в этом пикселе. Значение света для каждого пикселя предварительно рассчитано и хранится в текстуре.
Opera 3d Canvas не имеет ещё мульти-текстурирования, так что не возможно сделать lightmapping в один шаг, но вы можете достичь этого эффекта, выполнив несколько проходов. В первый проход сцена отображается как обычно. Во втором проходе ZTEST устанавливается равным и множества размножаются. Сцена в настоящее время оказывают лайтмап вместо текстур и результат мы видим lightmapped сцены.
Вот и все! Эта статья дала вам введение в основы использования Opera 3d Canvas. После прочтения всего этого вы должны знать достаточно, чтобы создать какой-нибудь классный демо 3d-холст.

[note]P.P.S. Если у Вас есть вопросы, желание прокомментировать или поделиться опытом, напишите, пожалуйста, в комментариях ниже.[/note]