Елементи полотна 3d canvas в opera.

Нещодавно Opera опублікувала експериментальні дані побудовані в Opera Labs, з підтримкою елементів відео і відео в SVG. Нова версія Opera 11.10 ,також включає в себе експериментальний елемент полотна 3D Canvas. Для перегляду демо представлених в цій статті ви будете повинні завантажити новий реліз Opera 11.10 . Новий реліз в даний час доступний тільки для Windows. Версії для Mac і Linux повинні бути доступні найближчим часом.

Нове доповнення до HTML5 є полотном. Полотно більш менш точковий малюнок, який можна зробити на використанні javascript. Саме малювання виконується в контексті. Специфікація включає 2D контекст який повинен бути реалізований і він дозволяє браузерам додавати свої власні контексти. У цій статті я опишу 3D контекст котрий я додав, він є в недавно випущеному релізі Opera Labs. контекст називається Opera -3D і в основному реалізований в версіях Opera 3D Canvas. Для тих, хто не знайомий з тегом полотна тут прискорений курс в його використанні.
1.Добавіть 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.jpg).

Відео: Canvas 3D in Opera

 Canvas not supported!

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

P.P.S. Якщо у Вас є питання, бажання прокоментувати або поділитися досвідом, напишіть, будь ласка, в коментарях нижче.

Відео: HTML5 Canvas - 3D Dental Demo in iPhone