Back-port 2017-05-12 osg-sample article

7 years ago · 1db8e1a9b0
--- a/pelican/content/articles/01-stub-ru.md
+++ b/pelican/content/articles/01-stub-ru.md
@@ -1,8 +0,0 @@
 Title: Заглушка
 Date: 2017-06-03 00:00
 Category: Stub
 Slug: stub
 Lang: ru

 TODO Импортировать предыдущие статьи Opensource Game Studio с Wordpress.

--- a/pelican/content/articles/01-stub.md
+++ b/pelican/content/articles/01-stub.md
@@ -1,8 +0,0 @@
 Title: Stub
 Date: 2017-06-03 00:00
 Category: Stub
 Slug: stub
 Lang: en

 TODO Import previous Opensource Game Studio articles from Wordpress.

--- a/pelican/content/articles/2017-05-12_osg-sample-ru.md
+++ b/pelican/content/articles/2017-05-12_osg-sample-ru.md
@@ -0,0 +1,59 @@
 Title: Приложение OpenSceneGraph
 Date: 2017-05-12 00:00
 Category: News
 Slug: osg-sample
 Lang: ru

 ![OSG sample][screenshot]


 Эта статья описывает создание самоучителей по сборке приложения OpenSceneGraph на Linux, macOS, Windows и Android в апреле 2017.

 Предыдущие самоучители описывали установку OpenSceneGraph на Linux, macOS, Windows и отображение модели с помощью стандартного инструмента **osgviewer**. На этот раз результатом нашей работы стало [приложение OpenSceneGraph](https://github.com/OGStudio/openscenegraph-cross-platform-guide-application), которое работает на Linux, macOS, Windows и Android.

 Приложение очень простое. Оно умеет следующее:

 0. Создание окна для отрисовки
 0. Загрузка модели
 0. Отрисовка модели с помощью простых шейдеров GLSL
 0. Перемещение модели с помощью мыши на Linux, macOS, Windows и пальца на Android



 Создать самоучители для Linux, macOS, Windows было настолько простой и понятной задачей, что мы справились с ней за пару недель. Оставшуюся половину месяца мы потратили на создание самоучителя для Android.

 Наша [первая успешная сборка под Android](http://www.opengame.epizy.com/lang/ru/news/2414) в прошлом году требовала множество неочивидных телодвижений. В этот раз мы хотели получить более чистый, быстрый и дешёвый подход.

 Нам это удалось. В результате всё, что нужно для работы приложения OpenSceneGraph на Android, уместилось в набор из нескольких файлов и небольших изменений для стандартного проекта Android Studio (с поддержкой C++).

 Краткий перечень файлов:

 0. Поверхность GLES2
 0. Activity для отрисовки на этой поверхности
 0. Интерфейс Java для нативной библиотеки
 0. Реализация нативной библиотеки на C++
 0. Файл CMake для сборки нативной библиотеки
 0. Activity layout
 0. Модель для отрисовки



 Краткий перечень изменений проекта:

 0. Обновление Android manifest для использования GLES2 и Activity
 0. Использование файла CMake нативной библиотеки в проектном файле CMake



 Документация OpenSceneGraph предполагает сборку OpenSceneGraph вне Android Studio с помощью CMake. Такой подход имеет следующие ограничения:

 0. Ручная сборка OpenSceneGraph под каждую платформу
 0. Ручное копирование собранных библиотек OpenSceneGraph в проект Android Studio



 Наш подход включает в себя сборку OpenSceneGraph для тех платформ, для которых собирается проект Android Studio. К тому же, OpenSceneGraph используется как часть проекта, поэтому нет никакой дополнительной рутины: достаточно просто пересобрать проект, и всё готово.

 На этом мы заканчиваем описание создания самоучителей по сборке приложения OpenSceneGraph на Linux, macOS, Windows и Android в апреле 2017.

 [screenshot]: {attach}/images/2017-05_osg-sample.png
--- a/pelican/content/articles/2017-05-12_osg-sample.md
+++ b/pelican/content/articles/2017-05-12_osg-sample.md
@@ -0,0 +1,59 @@
 Title: OpenSceneGraph sample
 Date: 2017-05-12 00:00
 Category: News
 Slug: osg-sample
 Lang: en

 ![OSG sample][screenshot]


 This article describes creation of the tutorials for building sample OpenSceneGraph application under Linux, macOS, Windows, and Android in April 2017.

 Previous tutorials described how to install OpenSceneGraph under Linux, macOS, Windows and render a model using the standard **osgviewer** tool. This time we worked on a [sample OpenSceneGraph application](https://github.com/OGStudio/openscenegraph-cross-platform-guide-application) that would run under Linux, macOS, Windows, and Android.

 The application is very basic and has the following features:

 0. Render window creation
 0. Model loading
 0. Model rendering with simple GLSL shaders
 0. Model motion with a mouse under Linux, macOS, Windows and a finger under Android



 Creating the tutorials for Linux, macOS, Windows was so easy and straightforward, that it only took us half a month. We spent the second half of the month creating Android tutorial.

 Our [first successful Android build](http://www.opengame.epizy.com/lang/en/news/2414) last year included hacks and non-obvious steps to make OpenSceneGraph run under Android. This time we wanted a cleaner, faster, and cheaper approach.

 The approach we ended up with requires just a few files and a few changes to the original Android Studio project (with C++ support) to make sample OpenSceneGraph application run under Android.

 Here's a quick rundown of the files:

 0. GLES2 surface
 0. Render activity to render to the surface
 0. Native library Java interface
 0. Native library C++ implementation
 0. CMake file to build native library
 0. Render activity layout
 0. Model to display



 Here's a quick rundown of the project changes:

 0. Update Android manifest to use GLES2 and render activity
 0. Reference native library's CMake file in the project's CMake file



 OpenSceneGraph documentation suggests building OpenSceneGraph outside Android Studio with CMake. However, this approach has the following limitations:

 0. You have to build OpenSceneGraph for each target architecture
 0. You have to manually copy/reference built OpenSceneGraph libraries into Android Studio project



 Our approach includes building OpenSceneGraph for those target architectures that Android Studio project is built for. Also, OpenSceneGraph is already referenced, so no extra work is required: you just need to rebuild the project, and you're done.

 That's it for describing the creation of the tutorials for building sample OpenSceneGraph application under Linux, macOS, Windows, and Android in April 2017.

 [screenshot]: {attach}/images/2017-05_osg-sample.png
--- a/pelican/content/images/2017-05_osg-sample.png
+++ b/pelican/content/images/2017-05_osg-sample.png
--- a/stub-ru.html
+++ b/stub-ru.html
@@ -1,128 +0,0 @@
 <!DOCTYPE html>
 <head>
    <meta charset="utf-8" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Заглушка</title>

    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/normalize.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/foundation.min.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/style.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/pygments.css" />	
    <script src="http://opengamestudio.org/theme/js/custom.modernizr.js"></script>

    <!-- So Firefox can bookmark->"abo this site" -->
        <link href="feeds/all.atom.xml" rel="alternate" title="Opensource Game Studio" type="application/atom+xml">

 </head>

 <body>

 <!-- Nav Bar -->
 <nav>

 <!-- Show menu items and pages -->
 <div class="row">
    <div class="large-12 columns top-bar">
 	    <h1><a href="http://opengamestudio.org">Opensource Game Studio</a></h1>
    </div>
 </div>
 <div class="row top-menu">
 <div class="large-12 columns">
        <a href="/pages/projects.html" class="menu-button secondary">Projects</a>
        <a href="/pages/about.html" class="menu-button secondary">About</a>

 </div>
 </div>
 </nav>
 <!-- End Nav -->


 <!-- Main Page Content and Sidebar -->
 <div class="row">

    <!-- Main Blog Content -->
    <div class="large-9 columns">
 <article>
    <header>
        <h3 class="article-title"><a href="http://opengamestudio.org/stub-ru.html" rel="bookmark"
        title="Permalink to Заглушка">Заглушка</a></h3>
    </header>

 <h6 class="subheader" title="2017-06-03T00:00:00+03:00">Sat 03 June 2017
            <a class="button secondary small translation-button" href="http://opengamestudio.org/stub.html">en</a>

 </h6>    <p>TODO Импортировать предыдущие статьи Opensource Game Studio с Wordpress.</p>
 <p class="subheader">Category: <a href="http://opengamestudio.org/category/stub.html">Stub</a>

 </p>



 </article>
    </div>
    <!-- End Main Content -->

    <!-- Sidebar -->
    <aside class="large-3 columns">
        <!--k
        <h5 class="sidebar-title">Site</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/archives.html">Archives</a>
            <li><a href="http://opengamestudio.org/tags.html">Tags</a>


                <li><a href="http://opengamestudio.org/feeds/all.atom.xml" rel="alternate">Atom feed</a></li>
        </ul>

 		
        <h5 class="sidebar-title">Categories</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/category/news.html">News</a></li>
            <li><a href="http://opengamestudio.org/category/stub.html">Stub</a></li>
   
        </ul>
        -->


 		
        
        <h5 class="sidebar-title">Ads</h5>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- ogs2 -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-4473792248813084"
             data-ad-slot="9024247127"
             data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

    </aside> <!-- End Sidebar -->

 </div> <!-- End Main Content and Sidebar -->


 <!-- Footer -->
 <footer class="row">
    <div class="large-12 columns">
        <hr />
        <div class="row">
            <div class="large-7 columns">
                <p>Proudly powered by <a href="http://getpelican.com">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.</p>
            </div>
            </div>
    </div>
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-3773114-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
 </footer>
--- a/stub.html
+++ b/stub.html
@@ -1,128 +0,0 @@
 <!DOCTYPE html>
 <head>
    <meta charset="utf-8" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Stub</title>

    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/normalize.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/foundation.min.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/style.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/pygments.css" />	
    <script src="http://opengamestudio.org/theme/js/custom.modernizr.js"></script>

    <!-- So Firefox can bookmark->"abo this site" -->
        <link href="feeds/all.atom.xml" rel="alternate" title="Opensource Game Studio" type="application/atom+xml">

 </head>

 <body>

 <!-- Nav Bar -->
 <nav>

 <!-- Show menu items and pages -->
 <div class="row">
    <div class="large-12 columns top-bar">
 	    <h1><a href="http://opengamestudio.org">Opensource Game Studio</a></h1>
    </div>
 </div>
 <div class="row top-menu">
 <div class="large-12 columns">
        <a href="/pages/projects.html" class="menu-button secondary">Projects</a>
        <a href="/pages/about.html" class="menu-button secondary">About</a>

 </div>
 </div>
 </nav>
 <!-- End Nav -->


 <!-- Main Page Content and Sidebar -->
 <div class="row">

    <!-- Main Blog Content -->
    <div class="large-9 columns">
 <article>
    <header>
        <h3 class="article-title"><a href="http://opengamestudio.org/stub.html" rel="bookmark"
        title="Permalink to Stub">Stub</a></h3>
    </header>

 <h6 class="subheader" title="2017-06-03T00:00:00+03:00">Sat 03 June 2017
            <a class="button secondary small translation-button" href="http://opengamestudio.org/stub-ru.html">ru</a>

 </h6>    <p>TODO Import previous Opensource Game Studio articles from Wordpress.</p>
 <p class="subheader">Category: <a href="http://opengamestudio.org/category/stub.html">Stub</a>

 </p>



 </article>
    </div>
    <!-- End Main Content -->

    <!-- Sidebar -->
    <aside class="large-3 columns">
        <!--k
        <h5 class="sidebar-title">Site</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/archives.html">Archives</a>
            <li><a href="http://opengamestudio.org/tags.html">Tags</a>


                <li><a href="http://opengamestudio.org/feeds/all.atom.xml" rel="alternate">Atom feed</a></li>
        </ul>

 		
        <h5 class="sidebar-title">Categories</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/category/news.html">News</a></li>
            <li><a href="http://opengamestudio.org/category/stub.html">Stub</a></li>
   
        </ul>
        -->


 		
        
        <h5 class="sidebar-title">Ads</h5>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- ogs2 -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-4473792248813084"
             data-ad-slot="9024247127"
             data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

    </aside> <!-- End Sidebar -->

 </div> <!-- End Main Content and Sidebar -->


 <!-- Footer -->
 <footer class="row">
    <div class="large-12 columns">
        <hr />
        <div class="row">
            <div class="large-7 columns">
                <p>Proudly powered by <a href="http://getpelican.com">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.</p>
            </div>
            </div>
    </div>
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-3773114-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
 </footer>