Форум программистов
 
О проблемах с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 02.06.2015, 13:39   #1
rekodDeveloper
Новичок
Джуниор
 
Регистрация: 02.06.2015
Сообщений: 3
Радость Пример использования Gera WebGL 3D Library

Приветствую! Хочу поделиться с вами небольшим опытом работы с библиотекой, которая мне понравилась в работе с 3D графикой в браузере.
Для начала вот ссылочка на GitHub: https://github.com/amegas/gera

Итак, у нас есть все source файлы, можно их собрать самим, но проще сразу юзать собранную версию, тем более, что она не минифицированна. Разберем простой примерчик. В теле html определяем canvas элемент (на нем то все и будет "держаться"), подключаем библиотеку и исполняемый скрипт. Вот такой получается html:
Код HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">

            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

            canvas {
                width: 100%;
                height: 100%;
                display: block;
            }

        </style>
        <script src="gera-0.0.2.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <canvas id="webgl-application"></canvas>
    </body>
</html>
Теперь беремся за app.js файл. Вызываем событие window.onload и определяем canvas элемент и renderer - объект Gera.Renderer:

Код:
window.onload = function( sender ) {
   		 this.canvas = document.getElementById( 'webgl-application' );
   	 	 this.renderer = new Gera.Renderer();
	...
Затем определяем некоторые настройки отрисовки (альфа буффер, сглаживание, глубину):
Код:
	var webglContext = renderer.createWebGLContext(
       		 canvas,
       		 new Gera.Renderer.Settings({
            			alpha: true,
          			antialias: true,
            			depth: true,
           			stencil: true
        		})
    	);
Передаем renderer объекту canvas элемент и ,определенный ранее, webglContext:
Код:
	renderer.setActiveCanvasElement( canvas );
	renderer.setCurrentWebGLContext( webglContext );
Далее создаем объект Gera.Scene и Gera.Camera:
Код:
var scene = new Gera.Scene();

    	var camera = new Gera.Camera();
   	camera.setProjection(
        		new Gera.Bounds.Perspective({
           			fieldOfView: 45,
            			aspect: window.innerWidth / window.innerHeight,
            			near: 0.1,
           			far: 100
        		})
    	);
Добавляем на сцену камеру, выбираем ее как "активную":
Код:
	scene.add( camera );
    	scene.setActiveCamera( camera );
Теперь создадим простой mesh объект Gera.Mesh() в конструктор нужно передать geometry типа Gera.Geometry и material типа Gera.Material. Заглянув в библиотеку, увидим 5 стандартных типов геометрии и 1 кастомный:
Код:
Gera.Geometry.Type = {
            Custom: 0,
            Triangle: 1,
            Plane: 2,
            Cube: 3,
            Pyramid: 4,
            Sphere: 5
        };
С помощью кастомного типа геометрии можно подгрузить любую триангулированную 3D модель установив путь к файлу этой модели, а с помощью Gera.Texture можно наложить текстуры, прописав путь к ним, но это выходит за рамки данного обзора, так что создадим стандартный кубик и установим ему какой-нибудь цвет:
Код:
	var cubeMesh = new Gera.Mesh({
        		geometry: new Gera.Geometry({
           		type: Gera.Geometry.Type.Cube
        		}),
        		material: new Gera.Material(
            			new Gera.Texture({
                			type: Gera.Texture.Type.Color,
                			color: 0x4A2169
            			})
        		)
    	});
Теперь у нас есть кубик, которому мы можем задать позицию посредством свойств cubeMesh.position.x, cubeMesh.position.y, cubeMesh.position.z;
задать прозрачность cubeMesh.transparency.set();
повернуть cubeMesh.rotate(Gera.Vector3());
постоянно вращать cubeMesh.rotation = new Gera.Rotation(). Вот пример изменения некоторых свойств:
Код:
	cubeMesh.position.z = -15;
    	cubeMesh.rotation = new Gera.Rotation({
       	 	vector: new Gera.Vector3( { x: 0, y: 1, z: 0 } ),
        		angle: 1.5
    	});
   	 cubeMesh.rotate( new Gera.Vector3( { x: 0, y: 1, z: 1 } ), 45 );
    	cubeMesh.transparency.set( 0.5 );
Наконец, чтобы добавить mesh объект на сцену нужно вызвать метод add объектка Gera.Scene.
Код:
	scene.add( cubeMesh);
Передаем сцену объекту Gera.Renderer и даем команду на отрисовку:
Код:
renderer.setCurrentFrameBufferColor(
		new Gera.Color.GlFloat({
            		red: 1,
            		green: 1,
           		blue: 1,
            		alpha: 1
        		})
    	);

	renderer.setCurrentScene( scene );
    	renderer.renderScene();
Вот и все! Можно открыть страницу и посмотреть на кубик.
rekodDeveloper вне форума Ответить с цитированием
Старый 02.06.2015, 13:39   #2
rekodDeveloper
Новичок
Джуниор
 
Регистрация: 02.06.2015
Сообщений: 3
По умолчанию

А на закуску приведу пример кода, который отрисовывает на сцене рандомные фигуры, рандомного цвета и прозрачности:
Код:
for ( var i = 0; i < 10; i++ ) {
        		for ( var j = 0; j < 10; j++ ) {
            			var mesh = new Gera.Mesh({
                			geometry: new Gera.Geometry({
                    				type: generateRandomInteger( 1, 								Object.keys( Gera.Geometry.Type ).length - 2 )
                			}),
               		 	material: new Gera.Material(
                    				new Gera.Texture({
                       					type: Gera.Texture.Type.Color,
                        					color: generateRandomInteger( 0, 0xffff )
                    				})
                			)
            			});

            			mesh.position.x = -23 + 5 * i;
            			mesh.position.z = -25 + 5 * j;
            			mesh.transparency.set( generateRandomArbitrary( 0.5, 1.0 ) );
            			scene.add( mesh );
        		}
    	}
У вас должна получится подобная картинка:

Как видите, просто нужно создание mesh объекта засунуть в цикл. Нужно заметить, что я специально не стал передавать все типы геометрии, а исключил сферу:
Код:
new Gera.Geometry({
             	type: generateRandomInteger( 1, Object.keys( Gera.Geometry.Type ).length - 2 )
     })
Метод "generateRandomInteger" генерирует целое число от 1 до 4, что соответствует 4 типам геометрии (куб, треугольник, плоскость, пирамида):
return Math.floor( Math.random() * ( maximum - minimum + 1 ) ) + minimum;
Аналогично работает "generateRandomArbitrary( 0.5, 1.0 ) " только без округления до целого: return Math.random() * ( maximum - minimum ) + minimum
На этом пока закончу.

PS
Если у вас возникли проблемы при повторе действий в моем описании, пишите-отвечу, а также, можете глянуть на живой сэмпл:
rekodDeveloper вне форума Ответить с цитированием
Старый 02.06.2015, 14:55   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Как там дела с многослойными текстурами, матрицей трансформации, материалами, светом, тенью, шейдерами, поддержкой многооконности сцены, поддержкой 3д-мониторов и окулусов всяких?
Вижу весит меньше THREE.js, соблазнительно...
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 02.06.2015, 15:24   #4
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,503
По умолчанию

Ну дык за счет отсутствия кучи всего и весит меньше.
Да и пара сотен лишних КБ веса по-моему не проблема для таких задач, 3D графику ж не на все подряд сайты/страницы обычно кидать надо.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 02.06.2015 в 15:29.
Alex11223 вне форума Ответить с цитированием
Старый 02.06.2015, 15:27   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
Ну дык за счет отсутствия кучи всего и весит меньше.
Ну не факт, в THREE.js просто лишнего много, вроде поддержки CSS-3d
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 02.06.2015, 16:05   #6
rekodDeveloper
Новичок
Джуниор
 
Регистрация: 02.06.2015
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Как там дела с многослойными текстурами, матрицей трансформации, материалами, светом, тенью, шейдерами, поддержкой многооконности сцены, поддержкой 3д-мониторов и окулусов всяких?
Вижу весит меньше THREE.js, соблазнительно...
этого действительно - нет, так и есть, но посмотрите на версию, 0.0.2, было бы удивительным в 0.0.2 увидеть все заявленное

мне в сравнении с three.js понравился стиль либы, если three.js пишут большой толпой, видны разные стили, нет вменяемой обработки ошибок и какой-то хаос

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

поэтому я не удивлюсь, что если ряд вещей появятся в ней и на это надеюсь
rekodDeveloper вне форума Ответить с цитированием
Ответ
Купить рекламу на форуме 20000 рублей в месяц

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пример использования ДЛЛ без исходников Max1548 Общие вопросы C/C++ 15 09.08.2013 12:29
Пример использования многомерного массива Ципихович Эндрю JavaScript, Ajax 3 15.10.2011 14:31
Простой пример использования TDrawGrid bookkc Помощь студентам 1 17.03.2010 15:51
Нужнен пример использования dll bookkc Общие вопросы Delphi 0 13.02.2010 13:37
Dec to Hex - пример использования Roof Общие вопросы Delphi 8 03.08.2008 18:40


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS