Елементи полотна 3D Canvas в Opera. - все про комп'ютери

загрузка...

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


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




Canvas not supported!
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();

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



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