[3D]Есть ли вменяемые средства интерактивной работы с 3D-графикой?

Был же какой-то 3д шутер на js

квейк

Действительно, нет. Потому что никому еще не нужно. А те кому нужно, могут и плагин какой-нибудь поставить, и юзать что там у них - java, flash, webgl, vrml/x3d и т.д.

А что ты сделать-то хочешь?

В Canvas хотели, помнится, 3D API, но когда и есть ли что — не в курсе.

Потому что никому еще не нужно.

xml-запросы тоже когда-то не нужны были. И без JavaScript прекрасно обходились. Но те времена давно прошли.

А те кому нужно, могут и плагин какой-нибудь поставить

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

А что ты сделать-то хочешь?

Дали мне задачу: нарисовать в трехмерном пространстве распределение температуры (цветовыми градиентами и/или векторами) в огромном помещении. Математика несложная, но чтобы «крутить» все это дело, нужна нормальная трехмерная графика.

В Canvas хотели, помнится

Хотели. Пока нет.

А другого ничего и нет.

>xml-запросы тоже когда-то не нужны были. И без JavaScript прекрасно обходились. Но те времена давно прошли.

Ну да. Но пока WebGL и Web3d пилят-пилят как стандарты, и конца-края не видно.

Математика несложная, но чтобы «крутить» все это дело, нужна нормальная трехмерная графика.

И именно в браузере надо? И почему нельзя использовать flash?

И почему нельзя использовать flash?

Вы еще скажите: почему бы не программировать в мастдае?

Ну а все-таки. Это такая прихоть или необходимость?

Данные собираются сервером. Нужна возможность посмотреть красивую картинку с любого компьютера, подключенного к сети. Сделать это можно либо через браузер (наиболее простое решение), либо пилить свое приложение с OpenGL (но тогда процентов 10 пользователей запустить это не смогут, т.к. у них мастдай).

Это та картинка от нескольких температурных датчиков или уже другая?

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

На Qt делается просто и быстро, под все основные платформы. Я не думаю, что браузер тут хорошо подходит. Да даже и без Qt можно обойтись. Не понимаю проблемы, если честно, но удачи.

Так картинка или интерактивное 3д-нечто?

Странный тред.

Скорее

интерактивное 3д-нечто

т.е. картинка, которая строится динамически (по данным с сервера) и которую можно крутить-вертеть, а также менять режимы отображения (градиент, вектор, точка, цифры и т.п.). Если не рисовать стенки помещения, задача существенно упростится. Но при этом не будет никакой наглядности.

На Qt делается просто и быстро

Идеологически неприемлемо. Вот на gtk можно. И, судя по наличию всяких гимпов для мастдая, gtk'шные приложения тоже можно портировать (только неизвестно, как в мастдае со всякими libcurl).

Так уже придумал как визуализировать градиенты? Ато у меня на это фантазии не хватило.

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

Сделай 2 ползунка по полярным координатам, вращение мышкой потом прикрутишь.

У меня вращение мышкой прикручено :) Только нормально работает лишь относительно оси X (перпендикулярно плоскости экрана) - это элементарный rotate. Относительно оси Z (вертикально) и Y (горизонтально) реализую через scale, ясное дело, получается жуткое зрелище, т.к. нужно выполнить трапециевидное преобразование, а такого в стандартном наборе SVG нет.

Размещение объектов в пространстве реализуется через translate и scale. Для объектов сделал иерархию: <g> - сам рисунок, в нем <g> - трехмерные фигуры, в них <g> - двумерные фигуры, в них - уже элементарные SVGшные. Причем каждый объект для упрощения преобразований состоит из двух вложенных <g>: для внешнего выполняются только трансляции и масштабирования, для внутреннего - только поворот и трансляция.

Заинтриговал, покажи текущий код.

>Идеологически неприемлемо.

Почему?

И вообще, не заморачивайся, кроссплатформенных тулкитов выше крыши. Начиная с wxwidgets, заканчивая вообще такой штукой, как SDL. И, если сервер твой, то вместо curl можно взять что-то другое.

>>На Qt делается просто и быстро

Идеологически неприемлемо

trollface.jpg

> vrml
В свое время так дыфал, так дыфал... Но не взлетел. Где-то даже жаль.

Топикстартеру - посмотреть на vrml имхо стоит по-любому. Хотя бы из уважения к истории;)

Может быть что-то полезное удастся найти в http://www.vtk.org/

SV0L0CH

Заинтриговал, покажи текущий код.

Он у меня пока в страшном состоянии, но если есть желание посмотреть - могу на какой-нибудь pastebin сегодня или завтра вечером выложить (сейчас уезжаю кататься на велосипеде).

svu

посмотреть на vrml имхо стоит по-любому

Посмотрю, только сомневаюсь, что поможет.

kamre

Может быть что-то полезное удастся найти в http://www.vtk.org/

Спасибо, поищу.

А это не работает?

SVG-VML-3D is a free JavaScript library, to draw (and manipulate) 3D objects in webpages. The library either uses SVG (Internet Explorer) or SVG (otherwise) for drawing. The 3D objects can be manipulated (roteted, shifted, etc.) by JavaScript functions, which are provided by the library. The mathematical background is available for the interested reader.

А это не работает?

SVG-VML-3D

Это я пробовал первым делом. Не подходит, т.к. базируется на <path>, т.е. сложный рисунок из пары тройки десятков дуг и прочих фигур будет отображаться очень долго (получалось слайдшоу ~0.1 кадр в секунду).

ITT просто какая-то вакханалия велосипедостроения, при том, что Ява это всё умеет с античных времен.

> Ява это всё умеет с античных времен.

Вы что, это же наверняка «идеологически неприемлемо». А так да, можно 3D прям в апплете вертеть, например как здесь: http://jmol.sourceforge.net/

Комната прямоугольная, пустая?
Пиши на CSS.

>> Ява это всё умеет с античных времен.

Вы что, это же наверняка «идеологически неприемлемо».

Ну разве что... но наверняка есть готовые вьюеры SVG на основе batik или еще чего-то. То есть марать руки богопротивной явой не придется :)

Заинтриговал, покажи текущий код.

Как и обещал, даю ссылку (код в жуткой пре-альфа, т.к. уже месяц не занимался, а писать начал с нуля по аналогии с vml-3d, не добавил сортировку по расстоянию, обработчики событий и много чего еще - т.к. не придумал, как вращать по Z и Y). здесь пре-пре-пре-альфа «библиотеки», а здесь - пример инициализации картинки. Правда, pastebin угробил все комментарии.

Могу также привести примеры, как я реализовывал это на vml-3d, но там, во-первых, на порядок больше кода (я изменял и саму библиотеку под свои нужды), а во-вторых, его еще надо найти :) Но смысла от этой библиотеки нет - жутко тормозит отрисовка.

Фрагмент

function Vector(vx, vy, vz){
        this.x = (vx)?vx:0;
        this.y = (vy)?vy:0;
        this.z = (vz)?vz:0;
        this.Add = _VectorAdd;
        this.Low = _VectorLow;
        this.Zoom = _VectorZoom;
        this.Length = _Length;
        return this;
}

function _Length(){
        var l = this.x*this.x + this.y*this.y + this.z*this.z;
        return Math.sqrt(l);
}
function _VectorAdd(va){
        this.x += va.x;
        this.y += va.y;
        this.z += va.z;
}
function _VectorLow(vl){
        this.x -= vl.x;
        this.y -= vl.y;
        this.z -= vl.z;
}
function _VectorZoom(zf){
        this.x *= zf;
        this.y *= zf;
        this.z *= zf;
}

function Vector(vx, vy, vz){
        this.x = (vx)?vx:0;
        this.y = (vy)?vy:0;
        this.z = (vz)?vz:0;
}

Vector.prototype.Length=function(){
        var l = this.x*this.x + this.y*this.y + this.z*this.z;
        return Math.sqrt(l);
}
Vector.prototype.Add=function(va){
        this.x += va.x;
        this.y += va.y;
        this.z += va.z;
}
Vector.prototype.Low=function(vl){
        this.x -= vl.x;
        this.y -= vl.y;
        this.z -= vl.z;
}
Vector.prototype.Zoom=function(zf){
        this.x *= zf;
        this.y *= zf;
        this.z *= zf;
}

Ну и до кучи new Array() замени на []

А вообще я хотел посмотреть как ты обрабатываешь события от мыши, переводя их в изменения полярных координат.

А вообще я хотел посмотреть как ты обрабатываешь события от мыши, переводя их в изменения полярных координат.

Вот кусок кода:

	Pos = A.ScreenPos(S.Center);
	x = evt.clientX - Pos.x;

	y = evt.clientY - Pos.y;
	X_ = x / R;
	Z_ = -(y / R);
	Y_ = Math.sqrt(1 - X_*X_ - Z_*Z_)*((y>0)?1:-1);
	Theta = Math.acos(Z_);
	if(Y_ == 0) Phi = (X_<0) ? -Math.PI/2:0;
	else Phi = Math.atan(X_/Y_); 
	if(x == 0) Zeta = (y>0) ? -Math.PI/2:0;
	else Zeta = -Math.atan(y/x);
	var angleZ = (Phi - oldPhi) * 180 / Math.PI;
	var angleY = (Theta - oldTheta) * 180 / Math.PI;
	var angleX = (Zeta - oldZeta) * 180 / Math.PI;

Фрагмент ... заменить на ... И так по всему тексту. Ато читать тяжело.

А как быть с функциями, которые принадлежат нескольким объектам? Все равно ведь придется писать

this.Draw = _Draw;

Надо будет посмотреть в действии(самому писать svg к этому скрипту было лениво). Что-то мне подсказывает что вращать фигуру надо по-другому. Мне интересен алгоритм чтобы выглядело как в SolidWorks/Компас (навеяно последними новостями про CAD/CAM).

А функции и константы всёравно распихай по прототипам. Дублирование этому не помеха. Не вижу смысла прописывать их в конструкторе(разве что они зависят от аргументов конструктора, а у тебя такого нет).

попробуй на лету отрисовывать только контур, например

Что-то мне подсказывает что вращать фигуру надо по-другому.

Я перебрал несколько алгоритмов и остановился на этом, т.к. он мне больше всего понравился. О вкусах не спорят :)

Выложи уже всё, включая svg на какой-нибудь хостинг. Глянуть в действии хочу.

Выложи уже всё, включая svg на какой-нибудь хостинг. Глянуть в действии хочу.

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

Кстати, сам SVG я уже выкладывал:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<?xmlstylesheet url="index.xsl"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="OnLoadEvent(evt)">
<g id="Scene"></g>
<script type="text/ecmascript"><![CDATA[
function OnLoadEvent(evt){
	parent.AddSVGObject(evt.target.ownerDocument);
}
]]></script>
</svg>

http://www.unity3d.com

Ебошишь круйзис в браузере, да с таким то грофоном.

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

Если кому интересно (вроде, SV0L0CH такой же задачей занимался), расскажу вкратце, как все реализовано. Сам SVG содержит только минимум заготовок (слой для картинки, слой для неизменяющихся контуров помещения и определения, в которые будут помещаться описания градиентов). При загрузке инициализируются основные элементы (изменяющиеся элементы помещения, слои, массивы «датчиков» и их координат). Затем JavaScript посылает запрос к CGI, выдающему значение температур с датчиков и CGI, выдающему координаты. По значениям температур строятся градиенты. Далее, исходя из координат, все элементы размещаются на картинке. Каждые 5 минут посылается запрос на обновление значений температур и кординат. Соответственно, изменяются определения градиентов и координаты «датчиков» на рисунке.

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

Вращение картинки реализуется достаточно просто.

Можешь опубликовать полный рабочий пример одним архивом или svn/git/hg? Ато те отденльные фрагменты которые уже показывал сразу не понятно как применять(я немного в них поковырялся, потом забил). Единственное, если у тебя там есть серверная часть, замени статическими файлами.

Куда выложить? Серверная часть есть, но ее можно опустить (элементарные CGI, отсылающие координаты и температуры).

>Куда выложить?

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

а почему все-таки не флэш? SVG насчет работы в известных браузерах тоже не блещет

Флэш неправославен! Вопервых изза доступности средств разработки.

Выложил