2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




На страницу Пред.  1, 2, 3, 4, 5 ... 7  След.
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение19.10.2009, 23:58 
2mycoding
В одном из моих сообщений приводится готовый псевдокод для перемножения матриц и для применения матрицы к вектору. Остается только портировать этот код под js.

Цитата:
а как сделать чтобы невидимые грани не показывались?

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

Есть и универсальные способы. Например в реальных приложения OGL/DX используется буфер глубины. Но у него немало недостатков (памяти кушает много).

Цитата:
я хочу на каждую сторону куба прицепить картинку , как это сделать?

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

Ещё не помешало бы освещение, тем более его-то как раз реализовать не очень сложно.

Поищите в сети какие-нибудь лекции по компьютерной графике. Это, imho, слишком обширная тематика и кратко ответить на ваши вопросы не получится.

-- Вт окт 20, 2009 03:11:25 --

И добавьте наконец-то управление мышкой!

Я немножко переделал ваш предыдущий пример, теперь кубик можно вращать мышкой (js почти не знаю, так что не смейтесь):

код: [ скачать ] [ спрятать ]
Используется синтаксис HTML
<html>

<head>

<script language="javascript"><!--

var DrawingContext=0;
var Canvas=0;

var XLast=0;
var YLast=0;
var Dragging=false;

var XAngle=0.5;
var YAngle=0.5;
var ZAngle=0;

var ScaleFactor=4;

var Vertices=new Array();
var Edges=new Array();

var VerticesCount=0;
var EdgesCount=0;

var CubeVertices=new Array();

function Vector(x, y, z)
{
   this.x=x;
   this.y=y;
   this.z=z;
}

function Vertex(Point)
{
   this.Point=Point;

   this.u=0;
   this.v=0;
}

function Edge(Begin, End)
{
   this.Begin=Begin;
   this.End=End;
}

function Translate(Point, Translation)
{
   return new Vector
   (
       Point.x+Translation.x,
       Point.y+Translation.y,
       Point.z+Translation.z
   );
}

function Scale(Point, Factor)
{
   return new Vector
   (
       Point.x*Factor,
       Point.y*Factor,
       Point.z*Factor
   );
}

function AddVertex(Origin, Point, Size)
{
   Vertices[VerticesCount]=
       new Vertex(Translate(Scale(Point, Size), Origin));
   return VerticesCount++;
}

function AddEdge(Begin, End)
{
   Edges[EdgesCount++]=
       new Edge(CubeVertices[Begin], CubeVertices[End]);
}

// Constructs 3D-model of the cube.
function AddCube(Size)
{
   var x=0;
   var y=0;
   var z=0;
   var i=0;
   var Origin=new Vector(-25, -25, -25);

   for(x=0; x<2; x++) for(y=0; y<2; y++) for(z=0; z<2; z++)
       CubeVertices[i++]=AddVertex(Origin, new Vector(x, y, z), Size);

   AddEdge(0, 1); AddEdge(0, 2); AddEdge(0, 4); AddEdge(1, 3);
   AddEdge(1, 5); AddEdge(2, 3); AddEdge(2, 6); AddEdge(3, 7);
   AddEdge(4, 5); AddEdge(4, 6); AddEdge(5, 7); AddEdge(6, 7);
}

// Allows interactive, "moused" rotation.
function MoveHandler(Data)
{
   var dx=XLast?Data.pageX-XLast:0;
   var dy=YLast?Data.pageY-YLast:0;

   XLast=Data.pageX;
   YLast=Data.pageY;

   if(Dragging)
   {
       XAngle+=dy*0.01;
       YAngle+=dx*0.01;
   }

   return true;
}

function DownHandler()
{
   Dragging=true;

   return true;
}

function UpHandler()
{
   Dragging=false;

   return true;
}

// Performs initialization of canvas, event
// handlers, and world geometry.
function Initialize()
{
   Canvas=document.getElementById("Canvas");

   DrawingContext=Canvas.getContext("2d");
   DrawingContext.strokeStyle="#009900";

   document.captureEvents(Event.MOUSEMOVE);
   document.captureEvents(Event.MOUSEDOWN);
   document.captureEvents(Event.MOUSEUP);
   document.onmousemove=MoveHandler;
   document.onmousedown=DownHandler;
   document.onmouseup=UpHandler;

   AddCube(50);

   // Visualize scene periodically.
   setInterval("Render()", 20);
}

// Mapping from world- to screen-coordinates (with
// applying appropriate world transformation).
function Project(Vertex)
{
   var sinx=Math.sin(XAngle);
   var siny=Math.sin(YAngle);
   var sinz=Math.sin(ZAngle);
   var cosx=Math.cos(XAngle);
   var cosy=Math.cos(YAngle);
   var cosz=Math.cos(ZAngle);

   var x=Vertex.Point.x;
   var y=Vertex.Point.y;
   var z=Vertex.Point.z;

   var yx=y*cosx+z*sinx;
   var zx=z*cosx-y*sinx;
   var xy=x*cosy+zx*siny;
   var zy=zx*cosy-x*siny;
   var xz=xy*cosz+yx*sinz;
   var yz=yx*cosz-xy*sinz;

   Vertex.u=Canvas.width/2+xz*ScaleFactor;
   Vertex.v=Canvas.height/2+yz*ScaleFactor;
}

function Render()
{
   var i=0;

   DrawingContext.clearRect(0,0,500,500);
   DrawingContext.beginPath();

   // Project all vertices.
   for(i=0; i<VerticesCount; i++)
       Project(Vertices[i])

   // Draw all edges.
   for(i=0; i<EdgesCount; i++)
   {
       var Begin=Vertices[Edges[i].Begin];
       var End=Vertices[Edges[i].End];

       DrawingContext.moveTo(Begin.u, Begin.v);
       DrawingContext.lineTo(End.u, End.v);
   }

   DrawingContext.stroke();
}

//--></script>

</head>

<body onload="Initialize()">
    <center>
    <canvas id="Canvas" width="500" height="500">
    </canvas>
    </center>
</body>

</html>
 

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 15:48 
В принципе, если вам нетерпится реализовать удаление невидимых граней, могу посоветовать два простых способа:

  1. При визуализации сцены сортируйте грани по удаленности от наблюдателя. Если две грани пересекаются, разбивайте их на непересекающиеся части (возможно, это покажется вам достаточно сложным). Прорисовывайте грани начиная от наиболее удаленных (алгоритм художника).
  2. Визуализируйте сцену с применением обратной трассировки лучей. Выпускайте из камеры (из каждого экранного пикселя) луч и смотрите с чем он первым делом пересечется (можно для начала искать коллизии с линейными оболочками, т.е. с габаритными контейнерами объектов, потом с линейными оболочками граней). Если пересечение есть, определяйте с каким именно полигоном (гранью) произошло пересечение и каким цветом нужно закрасить пиксель (это зависит от материала объекта, от положения точки на полигоне, от "нормалей" к поверхности объекта , заданных в вершинах полигона и от положения вершин относительно источников света).

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

При текстурировании вам надо будет делать что-то вроде следующего. Удобно задавать модели как полигональные с тругольными полигонами. У каждого полигона тогда будет ровно три вершины, по сути три вектора. Если рядом выписать эти три вектора получится матрица. Вам надо будет найти обратную к этой матрице. Теперь когда вы будете работать с определенной точкой полигона, её координаты можно умножать на ранее полученную обратную матрицу и получать в результате координаты пикселя на куске, выкроенном из загруженной картинки, т.е. вы сможете подкорректировать цвет пикселя, используя цвет пикселя из текстуры.

Теперь ещё раз по поводу матричного умножения. Если будете реализовывать операции линейной алгебры пишите сразу для матриц 4-го порядка (16 компонент) и читайте об однородных координатах. Этот подход позволит вложив 3D геометрию в 4D производить трансформации координат обходясь лишь применением матриц, i.e. без дополнительного сложения с вектором трансляции. Это себя оправдает (немного повысит скорость).

Вообще, дело даже не в технических деталях. Хочется услышать зачем вы это делаете. Т.е. что ваш подход дает по сравнению с вами же упомянутыми 3D возможностями canvas'а и прочими технологиями интеграции (трехмерной) графики в браузеры (flash, vrml).

Можно попробовать исследования ваши направить немного в другом направлении. Что если, например, попробовать написать js фреймворк для 3D (пространственного) позиционирования элементов web-страниц? Это могло бы быть интересным с точки зрения веб-дизайна. Поразмышляйте... Сорри за пессимизм. :)

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 16:24 
Умножение матриц на JS, если оно выполняется быстро - уже прекрасно! А то скриптовый язык всё-таки. :) Вообще, всего можно достичь, просто времени уйдёт соответственное количество...

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 18:53 
Просто гляньте пожалуйста http://my2d3d.narod.ru/, пока без матриц, как только время будет разберусь.
И еще а как сферу сделать? И ещё хочется горный велосипед сделать , это вообще была бы тема ещё та, вот я нашёл в нете пример с самолётом
http://www.nihilogic.dk/labs/canvas3d/.
Как это всё супер интересно......

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 19:07 
Аватара пользователя
Как там сделано (я не вникал), так и сделать. И приделайте у себя обработчик таскания мышью наконец. Двадцать первый век на дворе, ёлки в рот.

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 21:20 
Приделал ураааааааааа
http://my2d3d.narod.ru/

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 21:38 
Аватара пользователя
Фак. Неправильно работает, во-первых. Во-вторых, я имел в виду повесить на него (в случае 3D) вращение, а не таскание. Или, например: так - вращение, а с нажатым альтом - таскание. Или наоборот.

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 22:05 
ИСН в сообщении #253446 писал(а):
Фак. Неправильно работает, во-первых. Во-вторых, я имел в виду повесить на него (в случае 3D) вращение, а не таскание. Или, например: так - вращение, а с нажатым альтом - таскание. Или наоборот.

Пока не знаю как это сделать, если подскажите буду рад.
И еще говорили, что мыша не правильно работает с 2d, не получается сделать правильно не догоняю, т.е. с клавы правильно а тут не как
вот код, подскажите
Код:
canvasx0=50;
canvasy0=10;
function mousedown(event)
{
downx=event.clientX-canvasx0;
downy=event.clientY-canvasy0;
}

function mousemove(event)
{
if(down)
{
x0=event.clientX-canvasx0;
y0=event.clientY-canvasy0;
if(my2d3d=='2d') paint();
else paint3d();
}
}
а вот с клавой работает правильно
Код:
window.onkeydown = function(event)
{
k=7;
if(!over)
{
   switch(event.keyCode)
   {
   case 37: x0-=k;if(my2d3d=='2d') paint();else paint3d(); break;
   case 38: y0-=k;if(my2d3d=='2d') paint();else paint3d(); break;
   case 39: x0+=k;if(my2d3d=='2d') paint();else paint3d(); break;
   case 40: y0+=k;if(my2d3d=='2d') paint();else paint3d(); break;
   }
}

}

И ещё писали так:"Отрисовка на чуть мене глдких функция глючит ", это про что.
А ещё почему то не работате функция 1/x, не пойму и так и эдак пробовал исправить ....

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 22:40 
Аватара пользователя
 !  ИСН :censored:

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 23:03 
2mycoding
Цитата:
И еще а как сферу сделать? И ещё хочется горный велосипед сделать

C.f. определение и уравнение сферы.

А вообще, реализуйте на js загрузку 3d моделей, созданных отдельно в редакторе. Можете придумать свой формат.

Цитата:
Пока не знаю как это сделать, если подскажите буду рад.

Вы мое сообщение с переделанным кодом опять не читали?

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение20.10.2009, 23:04 
Аватара пользователя
Короче, я хватаю картинку за угол, тащу - хоп! тут она прыгает, и я тащу её уже за середину. Давайте, что ли, как-то запоминать, за какую точку я её потащил, а то - - -

-- Ср, 2009-10-21, 00:05 --

Circiter в сообщении #253511 писал(а):
C.f. определение и уравнение сферы.

А также определение и уравнение горного велосипеда, чего уж мелочиться :lol: :lol: :lol:

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение21.10.2009, 09:53 
Глянул пример, просто суппппппппппппппппеееееееееееееееер
Как только время появится сразу реализую также у себя...... Огромнейшеее спасибо Circiter.

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение21.10.2009, 20:05 
Начал разбираться с матрицами, возникли вопросы:
1 -Предположим мне надо повернуть точку по оси x
для этого я умножу её координаты
b={x,y,z} на матрицу A, она же Rx
в результате получю
с[0]=1*x+0*y+0*z =x
c[1]=0*x+cosp*y-sinp*z=cosp*y-sinp*z
c[2]=0*x+sinp*y+cosp*z=sinp*y+cosp*z
c[0] - x
c[1] - y
c[2] - z
p - угол поворота оси X
Я этими формулами уже пользовался, в данном случае не сохраняется угол поворота вокруг других осей....
??????

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение21.10.2009, 20:22 
Аватара пользователя
Такой вещи нет, а поэтому и сохраняться она не должна. Можем обсудить подробнее, если Вас интересует геометрия. Но вообще-то здесь ни к чему об этом думать.

 
 
 
 Re: Приглашаю помочь и заняться интересным 2d 3d web построение
Сообщение21.10.2009, 20:30 
Как понял надо умножить матрицу Rx на b, верно?
Если не верно то что надо в этом случае надо сделать, если я хочу повернуть точку по оси x?

 
 
 [ Сообщений: 91 ]  На страницу Пред.  1, 2, 3, 4, 5 ... 7  След.


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group