FLYP Markup Language

Рассмотрим язык FLYP в сопоставлении с HTML5 (SVG-графикой), что позволит провести знакомство с языком быстро, эффективно и очень наглядно. Аналоги из SVG будут представлены на желтом фоне, FLYP будет представлен на голубом фоне. Это демонстрационная страница. Полная интерактивная документация по языку FLYP будет поставляться вместе с Flypoint 3D Browser. При этом, она написана на самом языке FLYP, и предоставляет возможность проверить работу каждого элемента и параметра. На видео Flypoint 3D Browser. Shapes можно увидеть интерактивную справку по FLYP в работе

Если вы не видите рисунки слева на желтом фоне, то ваш HTML браузер не поддерживает SVG

Line

<html>
	<body>
		<svg>
			<line x1="20" y1="40" x2="180" y2="160" stroke="dimgray" stroke-width="3"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<line a="20,40" b="180,160" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

Точки во FLYP могут быть как двумерные, так и трехмерные. Если нужна линия в пространстве, то ее точки могут быть определены так: a="20,40,10" b="180,160,30". Таким образом, координата z опциональна. Кроме этого, FLYP позволяет сослаться на точку: a="#pnt", где pnt - id точки, объявленной как <point id="pnt" x="20" y="40" z="10"/>. Это дает широчайшие возможности для управления сценой

Circle

<html>
	<body>
		<svg>
			<circle cx="100" cy="100" r="80" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<circle pos="100,100" r="80" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

В примерах SVG опущены параметры настройки области просмотра. Во FLYP готовить область просмотра нет необходимости, т.к. параметры камеры выставляются автоматически и управляются пользователем. FLYP также не содержит инструментов управления единицами измерения для связи пикселей с миллиметрами, например. 3D сцена может быть описана любыми единицами и показываться при этом единообразно

Spline

<html>
	<body>
		<svg>
			<path d="M20,40 T40,50 T100,40 T180,160" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<spline points="20,40 40,50 100,40 180,160" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

В SVG очень тяжело работать со сплайнами, т.к. path содержит не только точки самого сплайна, но и символы, указывающие на такие математические термины, как, например, кубические и квадратные кривые Безье. Кроме этого, path содержит координаты направляющих кривых, которые не лежат на самой кривой. Во FLYP - это просто слово spline и его точки! Мы постарались спрятать от пользователя математику как можно глубже

Composite

<html>
	<body>
		<svg>
			<path d="M70,160 L40,160 L40,40 L70,40 Q160,40 160,100 T70,160" stroke="dimgray" stroke-width="3" fill="none"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<composite path="L:70,160 40,160 40,40 70,40 С:160,100" color="dimgray" size="3"/>
		</body>
	</site>
</flyp>

Сложность элемента path в SVG обусловлена его универсальностью - он может содержать как отрезки линий, так и гладкие кривые. Мы пошли дальше, и наш composite может, кроме того, содержать кривые любых типов - дугу, например. При этом composite намного проще - в нем есть возможность максимально наглядно задать точки непосредственно в элементе. FLYP composite также трехмерный и полностью анимированный! Больше не нужно задавать касательные для гладкого примыкания - FLYP это сделает автоматически, нужно только задать символ примыкания

Area

<html>
	<body>
		<svg>
			<rect x="20" y="40" width="160" height="120" rx="30" ry="20" stroke="dimgray" stroke-width="3" fill="palegreen"/>
		</svg>
	</body>
</html>

<flyp>
	<site>
		<body>
			<rect-area pos="20,40" x="160" y="120" rx="30" ry="20" color="palegreen" border="3 dimgray"/>
		</body>
	</site>
</flyp>

Замкнутые кривые в SVG могут иметь заливку. Во FLYP нет необходимости вводить такую заливку, т.к. в нем есть поверхности. Таким образом, кривые и поверхности разделены и имеют свои особенные свойства. Можно, например, двигаться по кривой или поверхности, рисовать кривые на поверхности, задавать границы поверхностей особым стилем, использовать кривые для создания поверхностей выдавливания, например, и т.д. В данном случае аналогом залитого прямоугольника SVG со скругленными углами, является специальная поверхность rect-area

Transformation

<flyp>
	<site>
		<body>
			<plane u-range="-100,100" v-range="-100,100" color="springgreen" opacity="0.2"/>
		</body>
		<building pos="-20,-20">
			<body>
				<cylindrical-surface r="25" v-range="0,80" color="gold" opacity="0.2"/>
			</body>
			<storey pos="0,0,80">
				<body>
					<plane u-range="-70,70" v-range="-70,70" color="dodgerblue" opacity="0.2"/>
				</body>
				<element pos="-40,0">
					<body>
						<toroid pos="0,0,12" major-r="10" minor-r="12" color="greenyellow"/>
					</body>
				</element>
				<element pos="0,40" ang="70,0,0">
					<body>
						<plane u-range="0,64" v-range="0,36" texture="../-/640x360.jpg"/>
					</body>
				</element>
			</storey>
		</building>
	</site>
</flyp>

Позиционирование элементов во FLYP выполняется очень легко через параметры pos и ang. Вложенность элементов друг в друга означает также вложенность систем координат. Выше приведен FLYP-код 3D сцены, изображенной на рисунке - это очень компактный и нагляный код! Вместо элементов, SVG предлагает универсальный тег g. Чтобы с его помощью просто сдвинуть и отмасштабировать рисунок, нужно написать следующее:

<html>
	<body>
		<svg width="200" height="200">
			<g transform="translate(20,40)">
				<g transform="scale(1.3)">
					<path d="M30,100 L0,100 L0,0 L30,0 Q70,0 70,50 T30,100" stroke="dimgray" stroke-width="3" fill="none"/>
				</g>
			</g>
		</svg>
	</body>
</html>

Это же самое во FLYP выполняется простым указанием pos="20,40" scale="1.3" в параметрах элемента. Пытаться повторить позиционирование пяти элементов в SVG, как в исходном FLYP примере, даже не будем - это очень сложно, несмотря на то, что это всего лишь 2D

Elements

<flyp>
	<site>
		<element name="Camera">
			<var>
				<string name="Manufacturer" value="No name"/>
				<real name="Fovy" value="62.5"/>
			</var>
			<body>
				<axis length="5"/>
				<conical-surface axe-z="0,0,-1" r1="3" r2="4.8" v-range="0,8" color="slategray"/>
				<line a="0,-1,-8" b="0,-0.01,-8" color="yellow"/>
				<line a="0,0.01,-8" b="0,1,-8" color="yellow"/>
				<line a="-1,0,-8" b="-0.01,0,-8" color="yellow"/>
				<line a="0.01,0,-8" b="1,0,-8" color="yellow"/>
			</body>
		</element>
	</site>
</flyp>

Во FLYP есть структурные элементы - site, building, storey. Их можно сравнить с такими элементами HTML5 как body, article, section, aside и т.д. Тег svg можно сравнить с element во FLYP, но это достаточно условные сравнения, т.к. site, building, storey и element идентичны друг другу. Есть лишь условие, по которому element не может содержать в себе building, например и т.п.

Каждый элемент во FLYP может содержать внутри себя несколько вариантов геометрии, разнесенной по представлениям (body, plan, annotation) и описательную секцию var, которая не отображается на экране. В этой секции находится не только скрытая геометрия, на которую можно сослаться из представлений, но еще и описательная часть, состоящая из параметров. Структура данных такова, что с ее помощью можно, например, построить цифровую модель здания, удовлетворяющую требованиям стандарта Industrial Foundation Classes. Каждый элемент может также содержать внутри себя другие элементы и быть при этом таким же сложным и содержательным, как целый HTML-сайт!

Мы начинаем серию видео уроков по созданию моделей во Flypoint 3D Browser

Идея в том, чтобы показать процесс создания шаг за шагом, начиная с пустого шаблона и заканчивая анимированным интерактивным миром!

В этом кратком обзоре остались за скобками такие потрясающие возможности FLYP, как:

Анимация всех параметров элементов и геометрии

Механизм реакции на события, позволяющий запускать волны возмущений по всей модели

Создание разнообразных 2D и 3D элементов управления, которые принимают события от пользователя

Списки представлений, в которых могут находиться персонажи компьютерной игры, созданные во внешних редакторах сеток

Возможности геометрического ядра, не уступающие таковым в CAD системах

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

Возможности построения больших сцен с использованием параметрических миров, созданных кем-то ранее

И наконец, эти и многие другие возможности FLYP позволяют создать глобальную виртуальную реальность с игровым, деловым, либо научным поведением!