VPF::Опыт использования Gera (WebGL Library)

rekodDeveloper

Дата 2.6.2015, 12:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 2.6.2015

Репутация: нет
Всего: нет

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

Итак, у нас есть все source файлы, можно их собрать самим, но проще сразу юзать собранную версию, тем более, что она не минифицированна. Разберем простой примерчик. В теле html определяем canvas элемент (на нем то все и будет "держаться"), подключаем библиотеку и исполняемый скрипт. Вот такой получается 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();

Вот и все! Можно открыть страницу и посмотреть на кубик. А на закуску приведу пример кода, который отрисовывает на сцене рандомные фигуры, рандомного цвета и прозрачности:

Код


    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 );
             }
     }

У вас должна получится подобная картинка:

user posted image

Как видите, просто нужно создание 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
Если у вас возникли проблемы при повторе действий в моем описании, пишите-отвечу, а также, можете глянуть на живой сэмпл: http://amegas.github.io/gera/random.meshes

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »