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

Вернуться   Форум программистов > разработка игр, графический дизайн и моделирование > Gamedev - cоздание игр: Unity, OpenGL, DirectX
Регистрация

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

Ответ
 
Опции темы
Старый 16.06.2017, 14:17   #1
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию Небольшие примеры на WebGL

Предлагаю выкладывать в этой теме свои небольшие примеры на WebGL. Лучший способ чему-то научиться - это много практиковаться, создавая примеры.

Какими браузерами поддерживается WebGL, можно посмотреть здесь:
Краткое описание, что такое WebGL, и ссылки на спецификации: https://www.khronos.org/webgl/

Туториал на русском по WebGL 1.0
Туториал на английском по WebGL 2.0

Книга на русском по WebGL 1.0: WebGL. Программирование трехмерной графики

Исходники к книге: examples.zip

Исходники к книге на JSFiddle:

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/

Chapter 03. Drawing and Transforming Triangles
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/
ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/
ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/
ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/
ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/
ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/
ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/
ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/
ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/
ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/

Chapter 04. More Transformations and Basic Animation
ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/
ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/
ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/
ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/
ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/
ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/

Chapter 05. Using Colors and Texture Images
ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/
ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/
ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/
ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/
ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/
ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/
ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/
ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/
ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/

Chapter 07. Toward the 3D World
ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/
ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/
ch07/LookAtRotatedTriangles_modelViewMat rix: https://jsfiddle.net/8Observer8/e5t6gj1w/
ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/
ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/
ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/
ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/
ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/
ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/
ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/
ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/
ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/
ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/
ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/
ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/
ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/

Chapter 08. Lighting Objects
ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/
ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Chapter 10. Advanced Techniques
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/
ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/

Gifts
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/

Appendix
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/

Последний раз редактировалось Serge_Bliznykov; 20.11.2017 в 13:05.
8Observer8 вне форума   Ответить с цитированием
Старый 16.06.2017, 14:36   #2
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Если кто-то захочет портировать ещё какие-нибудь игры Антона Те на WebGL + TypeScript (или JavaScript), то вот оригинальные исходники его игр и архив с EXE:


Мой порт игры "Змейка" на TypeScript и WebGL 1.0:
Вложение 88592

Порт сделан из исходников скаченных под этим видео Антона Te (C++, OpenGL, FreeGLUT): Writing Snake game in 10 minutes


Snake2DPortInTSFromAntonTeTutorial.png
Snake2D.rar

Последний раз редактировалось Serge_Bliznykov; 20.11.2017 в 13:07.
8Observer8 вне форума   Ответить с цитированием
Старый 02.07.2017, 00:16   #3
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Портировал игру Bitballoon в 3D на WebGL 1.0 и язык TypeScript:
Изображения
Тип файла: png Bitballoon3D.png (52.9 Кб, 1 просмотров)
Тип файла: png BitballoonModels1.png (31.7 Кб, 64 просмотров)
Тип файла: png BitballoonModels2.png (40.3 Кб, 0 просмотров)

Последний раз редактировалось 8Observer8; 02.07.2017 в 13:36.
8Observer8 вне форума   Ответить с цитированием
Старый 17.11.2017, 18:01   #4
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Минимальная программа на JavaScript и WebGL 1.0, которая выводит красную точку размеров 10 пикселей в координате (0, 0, 0)

https://jsfiddle.net/8Observer8/8kduku4r/2/

SortestProgram.png

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid black;"></canvas>

    <script>
        var VSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
            '    gl_PointSize = 10.0;\n' +
            '}\n';

        var FSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
            '}\n';

        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl');
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, VSHADER_SOURCE);
            gl.compileShader(vShader);
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, FSHADER_SOURCE);
            gl.compileShader(fShader);
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>


Последний раз редактировалось 8Observer8; 17.11.2017 в 18:11.
8Observer8 вне форума   Ответить с цитированием
Старый 18.11.2017, 12:18   #5
Black Fregat
Программист
Участник клуба
 
Аватар для Black Fregat
 
Регистрация: 23.06.2009
Сообщений: 923
Репутация: 667
По умолчанию

Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?
Black Fregat вне форума   Ответить с цитированием
Старый 18.11.2017, 12:25   #6
alexzk
Участник клуба
 
Регистрация: 12.04.2017
Сообщений: 889
Репутация: 172
По умолчанию

Цитата:
Сообщение от Black Fregat Посмотреть сообщение
Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?
Больше года точно.

Но это все равно фигня, сравнить достаточно сколько бинарник потребляет памяти и вкладка броузера.
alexzk вне форума   Ответить с цитированием
Старый 18.11.2017, 13:31   #7
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Цитата:
Сообщение от Black Fregat Посмотреть сообщение
Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?
Да, без дополнительных. Скопируте мой код выше с выводом точки, сохраните его в файл index.html и запустите. WebGL позволяет использовать видео карту для отрисовки графики в браузере с помощью шейдеров. Версия WebGL 1.0 базируется на OpenGL ES 2.0, а версия WebGL 2.0 базируется на OpenGL 3.0. Релиз WebGL 1.0 был в марте 2011 года и поддерживается всеми браузерами, в том числе и мобильными, по-моему, с 2013 или с 2014 года, то есть 4 года. Уже новый стандарт WebGL 2.0 включён по умолчанию с 27 января 2016 года в Firefox 51 и Chrome 56

Цитата:
Сообщение от alexzk Посмотреть сообщение
Но это все равно фигня, сравнить достаточно сколько бинарник потребляет памяти и вкладка броузера.
Сейчас WebGL очень популярен, например, на сайтах интернет магазинов: покупатель может шкафчик покрутить, дверки пооткрывать. Как вы думаете, когда обычный человек пользуется браузером, то экономит на количестве открытых вкладок? Это вы знаете сколько открытая вкладка потребляет, поэтому, наверное, стараетесь держать открытой только одну вкладку.
8Observer8 вне форума   Ответить с цитированием
Старый 18.11.2017, 16:10   #8
alexzk
Участник клуба
 
Регистрация: 12.04.2017
Сообщений: 889
Репутация: 172
По умолчанию

Цитата:
Сообщение от 8Observer8 Посмотреть сообщение
Да, без дополнительных. Скопируте мой код выше с выводом точки, сохраните его в файл index.html и запустите. WebGL позволяет использовать видео карту для отрисовки графики в браузере с помощью шейдеров. Версия WebGL 1.0 базируется на OpenGL ES 2.0, а версия WebGL 2.0 базируется на OpenGL 3.0. Релиз WebGL 1.0 был в марте 2011 года и поддерживается всеми браузерами, в том числе и мобильными, по-моему, с 2013 или с 2014 года, то есть 4 года. Уже новый стандарт WebGL 2.0 включён по умолчанию с 27 января 2016 года в Firefox 51 и Chrome 56


Сейчас WebGL очень популярен, например, на сайтах интернет магазинов: покупатель может шкафчик покрутить, дверки пооткрывать. Как вы думаете, когда обычный человек пользуется браузером, то экономит на количестве открытых вкладок? Это вы знаете сколько открытая вкладка потребляет, поэтому, наверное, стараетесь держать открытой только одну вкладку.
Ну не 1, но 5-6 меня уже напрягают...обычно 2 висят неделями, там где мне нужно постоянно читать/отвечать (типа суппорт), еще 1-2 в пределах недели чета важное, типа нашел доку по чем-то, пока не пере-понадобится. Ну и 2-3 рабочих текущих. Текущие стараюсь сразу закрывать нафиг. От 10 всего у меня уже паника.
Более того, у меня всего 8Гб, так вот, если при таких моих запросах, при хроме открытом сделать make -j 8, скажем на Qt, то сначала минут 15 даже мыш не ездит, потом вылазить "chrome:messenger.js не отвечает", если убить хром (есть в линукс способы и для такого), то сразу все расстармаживается.
И вообще, заколебал веб. Недавно в оффлайн отделе веб магазина заказал вещь лично, мобильного нет, дал домашний номер. Так и не привезли. В оффлайн магазин! Без смс! Да что за бред.
Совсем сума "молодые и умные" посходили.

Последний раз редактировалось alexzk; 18.11.2017 в 16:13.
alexzk вне форума   Ответить с цитированием
Старый 18.11.2017, 18:05   #9
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Пример, как передать в вершинный шейдер данные из программы на JavaScript через attribute-переменную. Передаётся координата точки (-0.7, 0.2)

https://jsfiddle.net/8Observer8/oLq23Lac/

02_pass-coords-to-vertex-shader.png

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pass point coords to vertex shader</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas>

    <script>
        var VSHADER_SOURCE =
            "attribute vec2 a_Position;" +
            "\n" +
            "void main()\n" +
            "{\n" +
            "    gl_Position = vec4(a_Position, 0.0, 1.0);" +
            "    gl_PointSize = 10.0;\n" +
            "}\n";

        var FSHADER_SOURCE =
            "void main()\n" +
            "{\n" +
            "    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
            "}\n";

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, VSHADER_SOURCE);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, FSHADER_SOURCE);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");
            gl.vertexAttrib2f(a_Position, -0.7, 0.2);

            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>

8Observer8 вне форума   Ответить с цитированием
Старый 18.11.2017, 20:01   #10
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

Пример рисования точек в цикле по кругу по формулам:
Цитата:
x = radius * cos(angle)
y = radius * sin(angle)
https://jsfiddle.net/8Observer8/k3o8yz4q/

003_point_array_in_circle.png

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Points in a circle</title>
</head>

<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas>

    <script>
        var VSHADER_SOURCE =
            "attribute vec2 a_Position;\n" +
            "\n" +
            "void main()\n" +
            "{\n" +
            "    gl_Position = vec4(a_Position, 0.0, 1.0);\n" +
            "    gl_PointSize = 4.0;\n" +
            "}\n";

        var FSHADER_SOURCE =
            "void main()\n" +
            "{\n" +
            "    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n" +
            "}\n";

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, VSHADER_SOURCE);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, FSHADER_SOURCE);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");

            var radius = 0.7;
            for (var angle = 0; angle < 360; angle += 10)
            {
                var x = radius * Math.cos(angle * Math.PI / 180);
                var y = radius * Math.sin(angle * Math.PI / 180);

                gl.vertexAttrib2f(a_Position, x, y);

                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }
        main();
    </script>
</body>

</html>

8Observer8 вне форума   Ответить с цитированием
Ответ

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
WebGL developer Ojoteam Фриланс 0 19.05.2017 13:37
Ищу моделера для браузерной WebGL игры Kempston Gamedev - cоздание игр: Unity, OpenGL, DirectX 0 31.03.2016 22:23
Пример использования Gera WebGL 3D Library rekodDeveloper JavaScript, Ajax 5 02.06.2015 17:05
Вопрос по Webgl Halk_blr Помощь студентам 0 23.02.2014 23:19
WebGl, использование Three.js оптимизировать и подправить код dem66 JavaScript, Ajax 0 23.06.2012 20:14


20:26.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru