В итоге я портировал Мику на WebGL, с помощью SDL 1 и Emscripten.
Дальше я опишу что нужно было изменить в коде чтобы сборка в JavaScript завершилась успешно.
Использовать SDL 1 вместо SDL 2. На данный момент существует порт SDL 2 для emscripten, однако использовать встроенный в emscripten SDL 1 я посчитал более целесобразным. Инициализация контекста происходит не в окне, а с помощью SDL_SetVideoMode и флага SDL_OPENGL. Отрисовка буфера производится командой SDL_GL_SwapBuffers()
Из-за особенностей выполения циклов в JavaScript – рендеринг вынесен в отдельную функцию и его периодический вызов проставляется с помощью функции emscripten_set_main_loop
Также сборку нужно осуществлять с ключом “-s FULL_ES2=1“
Пришлось отказаться от библиотеки assimp, от загрузки модели из файловой системы, от загрузки текстуры с диска. Все необходимые буферы были прогружены на деcктоп версии, и прокинуты в c-header файл для сборки с помощью emscripten.
Результат работы над библиотекой FSGL с OpenGL ES и код:
Дальше я опишу как это все программировалось, решались разные интересные проблемы.
Сначала мы проинициализируем OpenGL ES контекст, как это делается я писал в прошлой заметке. Дальше будет рассматриваться только отрисовка, краткое описание кода.
Матрица следит за тобой
Данная фигура Мику на видео состоит из треугольников. Чтобы нарисовать треугольник в OpenGL, нужно задать три точки к координатами x, y, z. в 2D координатах контекста OpenGL.
Так как нам нужно отрисовать фигуру содержащую 3D координаты, нам нужно использовать матрицу проекции (projection). Также нам нужно крутить, увеличивать, или что угодно делать с моделью – для этого используется матрица модели (model). Понятия камеры в OpenGL нет, на самом деле объекты крутятся, поворачиваются вокруг статичной камеры. Для этого используется матрица вида (view).
Для упрощения реализации OpenGL ES – в нем данные матрицы отсутствуют. Вы можете использовать библиотеки которые добавляют отсутствующий функционал, например GLM.
Шейдеры
Для того чтобы позволить разработчику рисовать что угодно, и как угодно, в OpenGL ES нужно обязательно реализовать вертексные и фрагментные шейдеры. Вертексный шейдер должен получить на вход координаты отрисовки, произвести преобразования с помощью матриц, и передать координаты в gl_Position. Фрагментный или пиксельный шейдер – уже отрисовывает цвет/текстуру, применяет наложение и пр.
Шейдеры я писал на языке GLSL. В моей текущей реализации шейдеры встроены прямо в основной код приложения как C-строки.
Буферы
Вертексный буфер содержит координаты вершин (вертексов), в данный буфер также попадают координаты для текстурирования и прочие необходимые для шейдеров данные. После генерации вертексного буфера, нужно забиндить указатель на данные для вертексного шейдера. Это делается командой glVertexAttribPointer, там необходимо указать количество элементов, указатель на начало данных и размер шага, который будет использоваться для прохода по буферу. В моей реализации сделан биндинг координат вершин и текстурные координаты для пиксельного шейдера. Однако стоит сказать что передача данных (текстурных координат) во фрагментный шейдер осуществляется через вертексный шейдер. Для этого координаты объявлены с помощью varying.
Для того чтобы OpenGL знал в каком порядке отрисовывать точки для треугольников – вам понадобится индексный буфер (index). Индексный буфер содержит номер вертекса в массиве, с помощью трех таких индексов получается треугольник.
Текстуры
Для начала нужно прогрузить/сгенерировать текстуру для OpenGL. Для этого я использовал SDL_LoadBMP, загрузка текстуры происходит из bmp файла. Однако стоит отметить что годятся только 24-битные BMP, также цвета в них хранятся не в привычном порядке RGB, а в BGR. Тоесть после прогрузки нужно осуществить замену красного канала на синий.
Текстурные координаты задаются в формате UV, тоесть необходимо передать всего две координаты. Вывод текстуры осуществляется во фрагментном шейдере. Для этого необходимо осуществить биндинг текстуры во фрагментный шейдер.
Ничего лишнего
Так как, по нашему указанию, OpenGL рисует 3D через 2D – то для реализации глубины, и выборки невидимых треугольников – нужно использовать выборку (culling) и буфер глубины (Z-Buffer). В моей реализации удалось избежать ручной генерации буфера глубины, с помощью двух команд glEnable(GL_DEPTH_TEST); и выборки glEnable(GL_CULL_FACE);
Также обязательно проверьте что near plane для матрицы проекции больше нуля, т.к. проверка глубины с нулевым near plane работать не будет.
Рендеринг
Чтобы заполнить вертексный буфер, индексный буфер чем-то осознанным, например моделью Мику, нужно осуществить загрузку данной модели. Для этого я использовал библиотеку assimp. Мику была помещена в файл формата Wavefront OBJ, прогружена с помощью assimp, и реализована конвертация данных из assimp в вертексный, индексный буферы.
Рендеринг проходит в несколько этапов:
Поворот Мику с помощью поворота матрицы модели
Очистка экрана и буфера глубины
Отрисовка треугольников с помощью команды glDrawElements.
Следующий этап – реализация рендеринга в WebGL с помощью Emscripten.
I just drew a red monkey head in 3D, and here is my overview of OpenGL ES.
What if I told you that modern OpenGL can’t draw 3D? Yeah, you need to make almost everything by yourself.
To present something in OpenGL context, you need to chose drawing mode – (triangles, points, etc.), provide vertex buffer, code vertex shader, provide matrices (projection, view, model), bind all values for vertex shader, code pixel shader, and call OpenGL specific drawing method. Easy isn’t it?
Ok so what the hell is vertex buffer? It’s just list with coordinates (x, y, z) to draw.
Vertex shader is the little program that tells GPU coordinates to draw.
Pixel shader is the little program that draws pixels of some color, textures, etc.
Matrices translates your 3D coordinates into 2D screen surface coordinates, that OpenGL can draw.
In upcoming articles we will go deeper and I will show code and results.
I love Panda3D game engine. But right now this engine is very hard to compile and debug on Microsoft Windows operation system. So as I said some time ago, I begin to develop my own graphics library. Right now it’s based on OpenGL ES and SDL2.
In this article I am going to tell how to initialize OpenGL ES context and how SDL2 helps in this task. We are going to show nothing.
King Nothing
First of all you need to install OpenGL ES3 – GLES 3 libraries. This operation is platform dependant, for Ubuntu Linux you can just type sudo apt-get install libgles2-mesa-dev. To work with OpenGL you need to initialize OpenGL context. There is many ways to do that, by using one of libraries – SDL2, GLFW, GLFM etc. Actually there is no one right way to initialize OpenGL context, but I chose SDL2 because it’s cross-platform solution, code will look same for Windows/*nix/HTML5/iOS/Android/etc.
To install sdl2 on Ubuntu use this command sudo apt-get install libsdl2-dev
So here is OpenGL context initialization code with SDL2:
На днях я написал свою реализацию алгоритма шифрования с открытым ключом RSA. Также сделал простейший взлом этого алгоритма, поэтому хотел написать небольшую заметку на эту тему. Стойкость ко взлому RSA основывается на задаче факторизации. Факторизация… Какое страшное слово…
Не все так страшно
На самом деле на первом этапе создания ключей мы берем два случайных числа, но числа должны делиться только на себя и единицу – простые числа.
Назовем их p и q. Далее мы должны получить число n = p *q. Оно будет использоваться для дальнейшей генерации ключей, ключи в свою очередь будут использоваться для шифрования, дешифровки сообщений. В итоговом варианте приватного и публичного ключа число n будет передано без изменений.
Допустим у нас на руках один из ключей RSA и зашифрованное сообщение. Вытаскиваем из ключа число n и начинаем его хакать.
Факторизуем n
Факторизация – разложение числа на простые множители. Сначала вытаскиваем из ключа число n (на настоящих ключах можно сделать с помощью openssl), допустим n = 35. Тогда раскладываем на простые множители n = 35 = 5 * 7, это и есть наши p и q. Теперь можно перегенерить ключи с помощью полученных p, q, дешифровать сообщение и шифровать обеспечивая видимость оригинального автора.
С кубитами не все так просто
Неужели можно поломать любой RSA так просто? На самом деле нет, числа p, q берут заведомо большими, чтобы задача факторизации на классических компьютерах заняла очень продолжительное время (10 лет в какой-то там степени)
Однако, используя квантовый алгоритм Шора, факторизовать число можно за очень малое время. На данный момент в статьях на эту тему заявлено время перемножения данного числа, тоесть фактически моментально. Для работы алгоритма Шора необходимо реализовать квантовые компьютеры, с большим количеством кубит. В 2001 году IBM разложили на простые множители число 15 с помощью 7 кубит. Так что этого момента придется ждать еще долго, к тому времени мы перейдем на пост-квантовые алгоритмы шифрования.
Потрогать Шора
Питер Шор рассказывает про свой алгоритм факторизации
Чтобы опробовать алгоритм Шора на квантовом симуляторе, вы можете установить ProjectQ, в его примеры входит реализация shor.py, позволяющая факторизовать число вводимое пользователем. На симуляторе время выполнения удручает, но вроде весело и задорно симулирует работу квантового компьютера.
Без лишних слов о крутости квантовых компьютеров и всего такого, сегодня я покажу как сделать генератор чисел на реальном квантовом процессоре IBM.
Для этого мы будем использовать всего один кубит, фреймворк для разработки квантового ПО для python – ProjectQ, и 16 кубитовый процессор от IBM, онлайн доступ к которому открыт любому желающему по программе IBM Quantum Experience.
Установка ProjectQ
Для начала у вас должен быть Linux, Python и pip. Какие либо инструкции по установке этих базовых вещей приводить бесполезно, т.к. в любом случае инструкции устареют через неделю, поэтому просто найдите гайд по установке на официальном сайте. Далее устанавливаем ProjectQ, гайд по установке приведен в документации. На данный момент все свелось к установке пакета ProjectQ через pip, одной командой: python -m pip install –user projectq
Ставим кубит в суперпозицию
Создаем файл quantumNumberGenerator.py и берем пример генератора бинарного числа из документации ProjectQ, просто добавляем в него цикл на 32 шага, собираем бинарную строку и переводим в 32-битное число:
importprojectq.setups.ibmfromprojectq.opsimport H, Measure
fromprojectqimport MainEngine
fromprojectq.backendsimport IBMBackend
binaryString =""
eng = MainEngine()
for i inrange(1, 33):
qubit = eng.allocate_qubit()
H | qubit
Measure | qubit
eng.flush()
binaryString = binaryString +str(int(qubit))
print("Step "+str(i))
number =int(binaryString, 2)
print("\n--- Quantum 32-Bit Number Generator by demensdeum@gmail.com (2017) ---\n")
print("Binary: "+ binaryString)
print("Number: "+str(number))
print("\n---")
Запускаем и получаем число из квантового симулятора с помощью команды python quantumNumberGenerator.py
Незнаю как вы, но я получил вывод и число 3974719468:
--- Quantum 32-Bit Number Generator by demensdeum@gmail.com (2017) ---
Binary: 11101100111010010110011111101100
Number: 3974719468
---
Хорошо, теперь мы запустим наш генератор на реальном квантовом процессоре IBM.
Хакаем IBM
Проходим регистрацию на сайте IBM Quantum Experience, подтверждаем email, в итоге должен остаться email и пароль для доступа.
Далее включаем айбиэмовский движок, меняем строку eng = MainEngine() -> eng = MainEngine(IBMBackend()) В теории после этого вы запускаете код снова и теперь он работает на реальном квантовом процессоре, используя один кубит. Однако после запуска вам придется 32 раза набрать свой email и пароль при каждой аллокации реального кубита. Обойти это можно прописав свой email и пароль прямо в библиотеки ProjectQ.
Заходим в папку где лежит фреймворк ProjectQ, ищем файл с помощью grep по строке IBM QE user (e-mail). В итоге я исправил строки в файле projectq/backends/_ibm/_ibm_http_client.py:
email= input_fun('IBM QE user (e-mail) > ') -> email="quantumPsycho@aport.ru"password= getpass.getpass(prompt='IBM QE password > ') -> password="ilovequbitsandicannotlie"
Напишите свой email и password со-но.
После этого IBM будет отправлять результаты работы с кубитом онлайн прямо в ваш скрипт, процесс генерации занимает около 20 секунд.
Возможно в дальнейшем я доберусь до работы квантового регистра, и возможно будет туториал, но это не обязательно.
Да прибудет с вами запутанность.
Today I released Bad Robots game with experimental WebGL Renderer based on ThreeJS.
This is first OpenGL (WebGL) based game on Flame Steel Engine.
You can play it here: http://demensdeum.com/games/BadRobotsGL/
Несколько лет назад я прочитал о начале проекта WebAssembly (wasm), идея разработчиков звучала примерно так – разработать байт-код для запуска приложений на разных платформах, архитектурах, акцент делается на запуске приложений в браузере.
Желание выкинуть медленный и непредсказуемый javascript, у меня созрело давно. Уже вчера я собрал и запустил свою тестовую игрушку на WebAssembly.
Здесь я опишу как мне это удалось.
Компиляция WebAssembly с помощью Emscripten
Установка Emscripten описана в прошлой заметке. Допустим у вас уже есть проект который корректно собирается из C++ в javascript, для сборки в wasm вам нужно добавить ключи:
-s WASM=1 -s ""BINARYEN_METHOD='native-wasm'""
Можете также попробовать другие ключи сборки описанные в официальной документации, я выбрал native-wasm как самый производительный вариант.
Включение WebAssembly
На данный момент идет процесс активной разработки, поэтому в стабильных версиях браузеров поддержки последней версии wasm нет. Для запуска wasm кода я использовал браузер Firefox Nightly для Ubuntu. Для включения wasm, нужно зайти в about:config и включить его:
Также заявлена поддержка в других браузерах (Chrome).
WebAssembly в действии
Проверить как работает WebAssembly вы можете открыв страницу игры Tanks движка Unity. Есть подозрение что там используется fallback на javascript, т.к. работает даже в обычном браузере.
Также можете попробовать запустить тестовую версию моей игры Bad Robots для wasm.
Если ваш браузер показывает черный экран и ошибку “Exception thrown, see JavaScript console” и в отладочной консоли текст “uncaught exception: no binaryen method succeeded. consider enabling more options, like interpreting, if you want that: https://github.com/kripken/emscripten/wiki/WebAssembly#binaryen-methods“, тогда устанавливайте лучший браузер Firefox Nightly и включайте WebAssembly по инструкции выше.
Всем удачной компиляции.
We use cookies on our website. By clicking “Accept”, you consent to the use of ALL the cookies. Мы используем куки на сайте. Нажимая "ПРИНЯТЬ" вы соглашаетесь с этим.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.