Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.06.2017, 13:17   #1
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию Небольшие примеры на 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 в 12:05.
8Observer8 вне форума Ответить с цитированием
Старый 16.06.2017, 13:36   #2
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Если кто-то захочет портировать ещё какие-нибудь игры Антона Те на 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 в 12:07.
8Observer8 вне форума Ответить с цитированием
Старый 01.07.2017, 23:16   #3
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

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

Минимальная программа на 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 в 17:11.
8Observer8 вне форума Ответить с цитированием
Старый 18.11.2017, 11:18   #5
Black Fregat
Программист
Участник клуба
 
Аватар для Black Fregat
 
Регистрация: 23.06.2009
Сообщений: 1,772
По умолчанию

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

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

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

Цитата:
Сообщение от 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, 15:10   #8
alexzk
Форумчанин
 
Регистрация: 12.04.2017
Сообщений: 889
По умолчанию

Цитата:
Сообщение от 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 в 15:13.
alexzk вне форума Ответить с цитированием
Старый 18.11.2017, 17:05   #9
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Пример, как передать в вершинный шейдер данные из программы на 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, 19:01   #10
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Пример рисования точек в цикле по кругу по формулам:
Цитата:
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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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