Небольшие примеры на WebGL - Gamedev - cоздание игр: Unity, OpenGL, DirectX

8Observer8 · 16.06.2017, 14:17

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

Какими браузерами поддерживается WebGL, можно посмотреть здесь:

WebGL 1.0: https://caniuse.com/#feat=webgl
WebGL 2.0: https://caniuse.com/#feat=webgl2

8Observer8 · 16.06.2017, 14:36

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

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

Играть в браузере
Скачать исходники архивом: Вложение 88593
Исходники на github

Вложение 88592

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

Snake2DPortInTSFromAntonTeTutorial.png
Snake2D.rar

8Observer8 · 02.07.2017, 00:16

Портировал игру Bitballoon в 3D на WebGL 1.0 и язык TypeScript:

8Observer8 · 17.11.2017, 18:01

Минимальная программа на 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>

Black Fregat · 18.11.2017, 12:18

Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?

alexzk · 18.11.2017, 12:25

Цитата:

Сообщение от Black Fregat

Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?

Больше года точно.

Но это все равно фигня, сравнить достаточно сколько бинарник потребляет памяти и вкладка броузера.

8Observer8 · 18.11.2017, 13:31

Цитата:

Сообщение от 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 очень популярен, например, на сайтах интернет магазинов: покупатель может шкафчик покрутить, дверки пооткрывать. Как вы думаете, когда обычный человек пользуется браузером, то экономит на количестве открытых вкладок? Это вы знаете сколько открытая вкладка потребляет, поэтому, наверное, стараетесь держать открытой только одну вкладку.

alexzk · 18.11.2017, 16:10

Цитата:

Сообщение от 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 не отвечает", если убить хром (есть в линукс способы и для такого), то сразу все расстармаживается.
И вообще, заколебал веб. Недавно в оффлайн отделе веб магазина заказал вещь лично, мобильного нет, дал домашний номер. Так и не привезли. В оффлайн магазин! Без смс! Да что за бред.
Совсем сума "молодые и умные" посходили.

8Observer8 · 18.11.2017, 18:05

Пример, как передать в вершинный шейдер данные из программы на 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

Пример рисования точек в цикле по кругу по формулам:

Цитата:

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>

16.06.2017, 14:17	#1
8Observer8 Профессионал Регистрация: 02.01.2011 Сообщений: 3,238 Репутация: 915	Небольшие примеры на WebGL Предлагаю выкладывать в этой теме свои небольшие примеры на WebGL. Лучший способ чему-то научиться - это много практиковаться, создавая примеры. Какими браузерами поддерживается WebGL, можно посмотреть здесь: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 Краткое описание, что такое 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.

16.06.2017, 14:36	#2
8Observer8 Профессионал Регистрация: 02.01.2011 Сообщений: 3,238 Репутация: 915	Если кто-то захочет портировать ещё какие-нибудь игры Антона Те на WebGL + TypeScript (или JavaScript), то вот оригинальные исходники его игр и архив с EXE: asteroids.zip breakout.zip checkers.zip minesweeper.zip snake.zip tetris.zip Всё в одном архиве.zip AntonTeGames(exe).zip Мой порт игры "Змейка" на TypeScript и WebGL 1.0: Играть в браузере Скачать исходники архивом: Вложение 88593 Исходники на github Вложение 88592 Порт сделан из исходников скаченных под этим видео Антона Te (C++, OpenGL, FreeGLUT): Writing Snake game in 10 minutes Snake2DPortInTSFromAntonTeTutorial.png Snake2D.rar Последний раз редактировалось Serge_Bliznykov; 20.11.2017 в 13:07.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
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

18.11.2017, 12:18	#5
Black Fregat Программист Профессионал Регистрация: 23.06.2009 Сообщений: 1,287 Репутация: 888	Я, простите, не совсем понял - GL теперь встроен прямо в JavaScript? Без всяких дополнительных телодвижений? И давно?

Опции темы
Версия для печати Отправить по электронной почте