Форум программистов, компьютерный форум, киберфорум
OpenGL
Форум программистов и сисадминов Киберфорум > Форум программистов > Программирование мультимедиа > Программирование графики > OpenGL
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
2 из 2 « 1 2
 
Рейтинг 4.72/25: Рейтинг темы: голосов - 25, средняя оценка - 4.72
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456

WebGL пример сетки точек 100 на 100 с окрасом

27.12.2020, 16:37. Показов 5670. Ответов 33
Метки js, webgl (Все метки)
Студворк — интернет-сервис помощи студентам
Кто может показать пример вывести сетку точек 100 на 100 через два for с окрасом на webgl html5 JS?
Скорей всего там внутри GLSL.
Читаю Мацуда webGL там автор книги не догадался до такого очевидного примера.

Он запустил drawArrays чтобы нарисовать всего одну точку...одну Карл!
JavaScript
1
2

  // Draw a point
  gl.drawArrays(gl.POINTS, 0, 1);
И окрас по каналам через пару синусиод так
JavaScript
1
2
3

Colors[VertNum][0] = 0.5f+0.4f*sin(15.1f*x+1.6f);
Colors[VertNum][1] = 0.5f+0.4f*sin(13.1f*x+0.4f);
Colors[VertNum][2] = 0.5f+0.45f*sin(14.2f*x-1.5f);
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 27.12.2020, 16:37
Ответы с готовыми решениями:

Подсчитать количество точек, которые находятся в кругу радиусом R с центром в начале координат. Координаты точек заданы массивами X (100), Y (100)
Подсчитать количество точек, которые находятся в кругу радиусом R с центром в начале координат. Координаты точек заданы массивами X (100),...

Размерность массива – 100, диапазон значений [-100,100]. Найти ту непрерывную последовательность положительных чисел, су
Размерность массива – 100, диапазон значений . Найти ту непрерывную последовательность положительных чисел, сумма элементов в которой...

Указатели. Найти количество элементов массива, которые больше 100, меньше 100, равны 100
Разработать функцию,которая находит количество элементов массива,которые больше 100,меньше 100, равно 100 Не могу вывести...

33
9991 / 2963 / 497
Регистрация: 05.10.2013
Сообщений: 8,138
Записей в блоге: 243
28.12.2020, 01:39
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Есть книги с описанием конкретного IDE где есть описание настройки и отладка?
Может и есть такие книги, но я по документации разбирался (она для редактора VSCode): https://code.visualstudio.com/... /debugging

Цитата Сообщение от Excalibur921 Посмотреть сообщение
Скачал sublime там ничего нет, все нужно искать и ставить раздельно.
Потому что Sublime, VSCode, Atom и т.д. - это всё легковесные редакторы кода. Они расширяются с помощью плагинов. Если нужна большая IDE для веб-разработки, то нужно смотреть в сторону: Eclipse, Netbeans, Visual Studio и т.д. В IDE уже всё есть и установленный локальный сервер, и отладка и т.д.
0
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
28.12.2020, 13:32  [ТС]
8Observer8, Глянул все ваши примеры webgl.
Странно у меня работает только webgl 1.0 коды.
Вот тут точки по кругу
Небольшие примеры на WebGL

строки 48-57
А если нужно выводить от 100 этажной формулы пару млн. точек при 60 FPS постоянно меняя координаты? Не писать же такое на джаваскрипте.

JavaScript
1
2
3
4
5
6
7
8
9
10

            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);
            }
Какой-то странный код. Вызов команды чтения массива но рисует всего одну точку.
JavaScript
1

gl.drawArrays(gl.POINTS, 0, 1);
По идее нужно заполнить массив внутри вершинного шейдера для скорости например 1000 точек.
Затем одной командой нарисовать
JavaScript
1

gl.drawArrays(gl.POINTS, 0, 1000);
Нарисовать 10 точек и 10 отрезков требует переключения шейдеров?
0
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 03:29  [ТС]
Cетку выводит а окрас нет.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>array draw</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid 

#aaaafa"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
 
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 4.0;
            }`;
 
        var fragmentShaderSource =
            `void main()
            {             
                // float x = gl_FragCoord.x;
                // float r = 0.5+0.45*sin(0.02*x+1.0);
                // float g = 0.5+0.45*sin(0.02*x+2.0);
                // float b = 0.5+0.45*sin(0.02*x+3.0);
                // gl_FragColor = vec4(r, g, b, 1.0);
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;
 
        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            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");
 
  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
 
            var pointsNumX=10;
            var pointsNumY=10;
    
            var dx=1.8/pointsNumX;
            var dy=1.8/pointsNumY;
 
            for(var x1=-0.9;x1<0.9;x1+=dx)
            {
                for(var y1=-0.9;y1<0.9;y1+=dy)
                {
                    gl.vertexAttrib2f(a_Position, x1, y1);
                    gl.drawArrays(gl.POINTS, 0, 1);                
                }
            }
 
 
 
        }
        main();
    </script>
</body>
 
</html>
Есть уроки как сделать чтобы html запускался в VS code?
Запускал glsl-convas там нет вертексных шейдеров. Все черти какой код, сделано только для фрагментного.
0
Модератор
Эксперт Java
 Аватар для alecss131
2902 / 1407 / 413
Регистрация: 11.08.2017
Сообщений: 4,512
Записей в блоге: 2
30.12.2020, 11:22
Цитата Сообщение от Excalibur921 Посмотреть сообщение
По идее нужно заполнить массив внутри вершинного шейдера для скорости например 1000 точек.
Затем одной командой нарисовать
Может стоит изучить графический конвеер и не писать ересь? Конвеер по сути везде одинаковый (по крайней мере очень похожий), что opengl, что vulkan, что directx, про metal не знаю.
В двух словах вершинный шейдер не умеет генерировать новую геометрию, он только обрабатывает то что было послано на видеокарту из процессора, а фрагментный шейдер пишет только в экранный буфер, а читает из текстуры в относительных координатах (uv координаты от 0 до 1). Не буду говорить про запись в текстуры и буферы, так как не знаю с какой версии такое появилось, но чаще всего пишут вне конвеера (а буферы и текстуры такое и есть) только в вычислительном шейдере
Создавать новую геометрия можно только в шейдерах тесселяции и геометрическом и то в ограниченных пределах. Вот пример генерации новой геометрии, причем в нем вершинный шейдер всего напросто затычка пропускающая данные через себя без изменений.
0
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 13:13  [ТС]
Цитата Сообщение от alecss131 Посмотреть сообщение
вершинный шейдер не умеет генерировать новую геометрию
И никак не обойти это? Я хотел передавать пару параметров через юниформ а уже видеокартой генерировать пару млн. точек. Может это уже будет вычислительный шейдер, а его вроде как у меня нет =(.
Тогда по сути ничем не отличается от glut. А работает по идее медленней т.к. это ведь джава скрипт код заполняет?
Цитата Сообщение от Excalibur921 Посмотреть сообщение
for(var x1=-0.9;x1<0.9;x1+=dx)
{
for(var y1=-0.9;y1<0.9;y1+=dy)
{
gl.vertexAttrib2f(a_Position, x1, y1);
gl.drawArrays(gl.POINTS, 0, 1);
}
}
И даже если сделать буфер всеравно буфер то меняется каждый фрейм и будет заполняться через джава скрипт

Это так тупо, заполнять на джаваскрипте буфер который рисует шейдер… как прикрутить скотчем велосипед к формуле 1….что-то тут сильно неправильно.
Цитата Сообщение от alecss131 Посмотреть сообщение
шейдерах тесселяции и геометрическом
Ниразу не упомянули у них в книгах, есть только нелепые полсотни примеров типа нарисуй точку, поверни треугольник…мда. В одной книге вообще забили на вертексные шейдеры играя только с фрагментными.
0
 Аватар для zayats80888
6354 / 3525 / 1428
Регистрация: 07.02.2019
Сообщений: 9,008
30.12.2020, 15:55
Лучший ответ Сообщение было отмечено Excalibur921 как решение

Решение

Цитата Сообщение от Excalibur921 Посмотреть сообщение
Cетку выводит а окрас нет.
GLSL_ES_Specification_1.00.pdf
Кликните здесь для просмотра всего текста
внимательно читаем $4.5
Кликните здесь для просмотра всего текста
в частности $4.5.3
Кликните здесь для просмотра всего текста
в частности последний абзац
Кликните здесь для просмотра всего текста
в идеале проштудировать всю спецификацию, если хотите программировать, а не гадать на кофейной гуще

Где обработка ошибок?

---

Цитата Сообщение от Excalibur921 Посмотреть сообщение
И никак не обойти это? Я хотел передавать пару параметров через юниформ а уже видеокартой генерировать пару млн. точек.
Для этого понадобится поддержка GLSL_ES_3.0( т.е. WebGL2.0 ), тогда рисование выглядело бы так:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

...
 
var pointsNumX=10;
var pointsNumY=10;
var dx=1.8/pointsNumX;
var dy=1.8/pointsNumY;
var startX = -0.9;
var startY = -0.9;
 
gl.vertexAttrib4f(a_Params, dx, dy, startX, startY);
gl.drawArraysInstanced(gl.POINTS, 0, pointsNumX, pointsNumY);
 
...
А шейдеры так, например:
glSlang
1
2
3
4
5
6
7
8

#version 300 es
in vec4 a_Params;
void main()
{
    vec2 position = a_Params.xy * vec2(gl_VertexID, gl_InstanceID) + a_Params.zw;
    gl_Position = vec4(position, 0.0, 1.0);
    gl_PointSize = 4.0;
}
glSlang
1
2
3
4
5
6

#version 300 es
out mediump vec4 color;
void main()
{
    color = vec4(1.0, 0.0, 0.0, 1.0);
}
1
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 16:18  [ТС]
Цитата Сообщение от zayats80888 Посмотреть сообщение
Для этого понадобится поддержка GLSL_ES_3.0( т.е. WebGL2.0 )
Нет. Коды для WebGL2.0 не пашут хз почему. Скорей всего нужно использовать WebGL 1.0 но дернуть там пару команд из GL 3.1.
Вот этот прикол от glewinfo, там смесь что есть чего нет.
glVertexAttrib4f: OK
GL_VERSION_3_1: MISSING
glDrawArraysInstanced: OK
glDrawElementsInstanced: OK
glPrimitiveRestartIndex: MISSING
glTexBuffer: MISSING
Скачал Visual Studio Code, поставил плагины.

Так она игнорит подсветку синтаксиса все из-за этих скобок, а без них не пашет }`;

Вот такой троллинг от скачивания пары плагинов для GLSL и Webgl плагина и VS Code .

Запускаю glsl convas плагин, так там гении нарисовали окно для шейдеров на пол экрана. Которое непрерывно выполняется переливаясь радугой…такой бред. Вертексных шейдеров там вообще нет. Похоже на них там просто забили как бесполезный мусор =). Этот плагин для игры чисто с фрагментными шейдерами.
При запуске дебага кода html выпадает некий выбор и что выбирать?

Выбираю Chrome preview ошибка

-рис
Похоже нужно установить браузер хром…но тут случился жестоки баг…
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Теперь ставлю более старый хром а из-за мусора в реестре от этой поделки пишет “уже установлен”
Похоже то что я хочу у меня не поддерживает, это вроде тесселяция называется а ее нет glewinfo.
GL_AMD_vertex_shader_tessellator: MISSING
---------------------------------
glTessellationFactorAMD: MISSING
glTessellationModeAMD: MISSING
GL_ARB_tessellation_shader: MISSING
GL_NV_tessellation_program5: MISSING
Я так понял настоящий список шейдеров это толи их всего 2 толи есть не в каждой видеокарте и реализации и версии шейдеров и драйверов еще и геометрический толи это просто спец команды используют и назвали это геометрический шейдер…не понятки.

Я так понял примерно так правильно. Нарисовать кривую Безье по 3 точкам.
Джаваскрипт заполняет массив из 3 вершин в 3д.
Вершинный шейдер принимает 3 вершины через 3 юниформ vec3 переменных.
Геометрический шейдер по формуле создает 1000 вершин на кривой.
Фрагментный рисует все 1000 ломанной gl_line_strip.
Не могу найти пример кривая безье по 3 точкам шейдер.

А еще этого геметрического шейдера нигде не взять. Это типа тайного знания OpenGL. В трех книгах по webgl не встречал о нем.

Авторы книг такие типа:
Ага… есть вершинный, геометрический…хм.. что это? *Многомиллионные вложения в разработку аппаратного разбиения поверхностей и кривых по формулам фундаментально улудшающие качество картинки?* Та кому это надо, пропустим. Итак “все шейдеры состоят только из вертексных и фрагментных, запоминайте.”

В нескольких книгах тупо делают одно
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Это так тупо, заполнять на джаваскрипте буфер который рисует шейдер… как прикрутить скотчем велосипед к формуле 1….что-то тут сильно неправильно.
Что-то неладное поняли вот тут в коде написав слегка красным шрифтом...
Цитата Сообщение от Опан Посмотреть сообщение
Программное рисование кругового узора и других замысловатых математических рисунков.
Честно говоря там 50 уроков а толку от них так:
Название: ScreenShot01026.jpg Просмотров: 122 Размер: 16.5 Кб
1
 Аватар для zayats80888
6354 / 3525 / 1428
Регистрация: 07.02.2019
Сообщений: 9,008
30.12.2020, 16:37
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Нет. Коды для WebGL2.0 не пашут хз почему. Скорей всего нужно использовать WebGL 1.0 но дернуть там пару команд из GL 3.1. Вот этот прикол от glewinfo, там смесь что есть чего нет
Нет, glewInfo - это про OpenGL, т.е. можно вручную дёрнуть поддерживаемые функции, но опять же, есть ограничение по версии glsl. WebGL - это отдельный API, там вручную функции не загружаются, если нет полной поддержки - значит нет и точка. И да, я в курсе, что у вас это не поддерживается, я просто пример скинул(на случай, если вы решите разориться на 100 деревянных и обновить видеокарту с поддержкой OpenGL3.3, хотя бы). Шейдер тесселяции - это вообще из OpenGL4.
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Так она игнорит подсветку синтаксиса все из-за этих скобок, а без них не пашет }`;
Щас бы в коде на другом языке определять, чо там за код и на каком языке в строковом литерале и подсвечивать...
0
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 17:01  [ТС]
Ну так они сделали. Я причем? В книге Мацуды вообще мрак скобки в каждой строке и плюски добавлены. А еще мутные 3 библиотеки на джаваскрипте с боку припеку.Нет стандарта html страницы задать все что нужно один раз и не трогать стандарт. Не могу найти внятного пояснения какой же IDE брать чтоб вся эта … работала и был дебаг.
Также сами производители железа тупанули что нет сообщения об ошибке на стадии компиляции внутри html.

Цитата Сообщение от zayats80888 Посмотреть сообщение
вручную функции не загружаются, если нет полной поддержки - значит нет и точка
А вот это уже косяк разработчиков Webgl Стандартов. Сами же знают что ну вот практический случай половина GL 3.1 пашет другая нет. Я тут причем? Это прибахи создателей ноута.
Цитата Сообщение от zayats80888 Посмотреть сообщение
чо там за код и на каком языке в строковом литерале и подсвечивать
Ну так сами же штампуют уроки webgl. Эти скобки в одних кодах есть, в других другие, в третьих вообще нет. Троллинг от создателей Webgl и авторов книг. Какой смысл качать плагин который назвали WebGL который ничего не подсвечивает и не может? =\

Похоже плавно настает время насиловать glew glad =). А значит походу качать N гиг студии…
0
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 20:49  [ТС]
Без отладки это не программирование…
Нужно будет что-то с эти делать или идти в полноценные шейдеры.
Забыл дописать
precision mediump float;
теперь пашет.


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>array draw</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid 

#aaaafa"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
 
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 4.0;
            }`;
 
        var fragmentShaderSource =
            `void main()
            {    
        precision mediump float;         
                float x = gl_FragCoord.x;
                float r = 0.5+0.45*sin(0.02*x+1.0);
                float g = 0.5+0.45*sin(0.02*x+2.0);
                float b = 0.5+0.45*sin(0.02*x+3.0);
                gl_FragColor = vec4(r, g, b, 1.0);
                //gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;
 
        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            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");
 
  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
 
            var pointsNumX=10;
            var pointsNumY=10;
    
            var dx=1.8/pointsNumX;
            var dy=1.8/pointsNumY;
 
            for(var x1=-0.9;x1<0.9;x1+=dx)
            {
                for(var y1=-0.9;y1<0.9;y1+=dy)
                {
                    gl.vertexAttrib2f(a_Position, x1, y1);
                    gl.drawArrays(gl.POINTS, 0, 1);                
                }
            }
        }
        main();
    </script>
</body>
 
</html>
Значит в webgl 1.0 никак нельзя вызвать gl.drawArraysInstanced даже если доступен? А страница webgl 2.0 вылетает т.к не проходит проверку.
А в обычных шейдерах с glew на С++ в которых вылетают уроки из-за того что какраз и дергают версии команд шейдеров выше и это никак не блокирует код можно легко вызвать gl.drawArraysInstanced ?
0
 Аватар для zayats80888
6354 / 3525 / 1428
Регистрация: 07.02.2019
Сообщений: 9,008
30.12.2020, 22:40
Цитата Сообщение от Excalibur921 Посмотреть сообщение
А в обычных шейдерах с glew на С++ в которых вылетают уроки из-за того что какраз и дергают версии команд шейдеров выше и это никак не блокирует код можно легко вызвать gl.drawArraysInstanced ?
То что у вас доступен DrawArraysInstanced - это часть расширения GL_ARB_draw_instanced(я просто показал, как проще, в вашем случае от этого толку ноль). Однако параметры шейдера gl_VertexID и gl_InstanceID в вашей версии glsl не доступны. Так что это поведение нужно будет эмулировать "универсальным буфером с индексами".

Добавлено через 1 час 28 минут
Цитата Сообщение от Excalibur921 Посмотреть сообщение
Я так понял примерно так правильно. Нарисовать кривую Безье по 3 точкам.
Джаваскрипт заполняет массив из 3 вершин в 3д.
Вершинный шейдер принимает 3 вершины через 3 юниформ vec3 переменных.
Геометрический шейдер по формуле создает 1000 вершин на кривой.
Фрагментный рисует все 1000 ломанной gl_line_strip.
Не могу найти пример кривая безье по 3 точкам шейдер.
Вот состряпал, без VertexID, в место этого универсальный буфер с параметрами t на 256 точек (всего 256 байт )
bezier
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>array draw</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="400" height="400" style="border: 1px solid 

#aaaafa"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute float a_ID;
            attribute vec3 a_Color;
            attribute vec2 a_P0;
            attribute vec2 a_P1;
            attribute vec2 a_P2;
 
            varying mediump vec3 v_Color;
            
            vec2 quadraticBezier(float t, vec2 p0, vec2 p1, vec2 p2)
            {
              float inv_t = 1.0 - t;
              return inv_t * inv_t * p0 + 2.0 * inv_t * t * p1 + t * t * p2;
            }
 
            void main()
            {
              v_Color = a_Color;
              vec2 position = quadraticBezier(a_ID, a_P0, a_P1, a_P2);
              gl_Position = vec4(position, 0.0, 1.0);
            }`;
 
        var fragmentShaderSource =
            `varying mediump vec3 v_Color;
 
            void main()
            {    
                gl_FragColor = vec4(v_Color, 1.0);
            }`;
 
        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);
 
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
 
            // attributes
            var a_ID = gl.getAttribLocation(program, "a_ID");
            var a_Color = gl.getAttribLocation(program, "a_Color");
            var a_P0 = gl.getAttribLocation(program, "a_P0");
            var a_P1 = gl.getAttribLocation(program, "a_P1");
            var a_P2 = gl.getAttribLocation(program, "a_P2");
 
            // normalized fixed point 8-bit buffer [0.0..1.0]
            var arr = new Uint8ClampedArray(256);
            // "yota" [0..255]
            for (let i = 0; i < 256; i++) arr[i] = i;
            // creating vertex buffer
            var buf = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buf);
            gl.bufferData(gl.ARRAY_BUFFER, arr, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(a_ID);
            gl.vertexAttribPointer(a_ID, 1, gl.UNSIGNED_BYTE, true, 0, 0);
 
            // Specify the color for clearing 
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
            // Clear 
            gl.clear(gl.COLOR_BUFFER_BIT);
 
            // first curve color
            gl.vertexAttrib3f(a_Color, 1.0, 0.0, 0.0);
            // first curve control points
            gl.vertexAttrib2f(a_P0, -0.5, -0.5);
            gl.vertexAttrib2f(a_P1, 0.0, 0.0);
            gl.vertexAttrib2f(a_P2, 0.8, -0.8);
            // draw first curve
            gl.drawArrays(gl.LINE_STRIP, 0, arr.length);
 
            // second curve color
            gl.vertexAttrib3f(a_Color, 0.0, 1.0, 0.0);
            // second curve control points
            gl.vertexAttrib2f(a_P0, -0.8, 0.75);
            gl.vertexAttrib2f(a_P1, 0.3, 0.21);
            gl.vertexAttrib2f(a_P2, -0.5, -0.5);
            // draw second curve
            gl.drawArrays(gl.LINE_STRIP, 0, arr.length);
        }
        main();
    </script>
</body>
 
</html>


Цитата Сообщение от Excalibur921 Посмотреть сообщение
Похоже плавно настает время насиловать glew glad =). А значит походу качать N гиг студии…
А нафига? У вас уже VSCode есть, нужно только компилятор скачать(от той же студии 2019 или MinGW) и плагин поставить.
1
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
30.12.2020, 23:44  [ТС]
Цитата Сообщение от zayats80888 Посмотреть сообщение
уже VSCode есть, нужно только компилятор скачать(от той же студии 2019 или MinGW) и плагин поставить.
И sublime text 3 скачал…толку от них всех.
Еще ни одного кода не запущено там на отладку. Не могу найти ниодной внятной инструкции как настроить все это именно под webgl. Это в VS 2008 express я делал коды 100500 раз с дебагом в консоль а в этих еще ниразу, они как светофор выглядят после черно-белой студии. Наверно нужно смотреть где в реестре читает инстал google chrome мусор мешающий поставить не вылетающую версию старей. Там я так понял вроде как дебаг и есть. А стоит набрать HTML в VS Code там плагинов доступных как мусора штук 100 хз какой качать и как юзать. Ничего просто так не пашет из коробки. Даже новая IDE VS Code у них там баг нет связи с сервером, качал старей версию а не свежак.

Добавлено через 30 минут
А можно еще слайдеры добавить? Управлять точками кривой. Тут создавал тему но пусто.
Простой слайдер html5 и javascript
я так понял webgl GUI штатный от HTML CSS3 там их море+настройки но все медленные. Может быть их отрисовка дольше основной проги webgl? Какой самый простой GUI принято? Никто не написал в той теме.
Сейчас продумываю алгоритм самодельного простого слайдера.на всякий случай.
Еще неплохо бы таймер чтобы опорные точки двигались по окружности простейшая анимация.
https://developer.mozilla.org/... ationFrame
И почему в книгах не описан вывод FPS? Это же главный критерий скорости кода.

А как сделать свертку растра суперсемплинг? Я так понял типа gl_FragCoord.x+1 gl_FragCoord.x+2 и т.д. или есть некий готовый итератор?
0
 Аватар для zayats80888
6354 / 3525 / 1428
Регистрация: 07.02.2019
Сообщений: 9,008
30.12.2020, 23:53
Лучший ответ Сообщение было отмечено Antikl как решение

Решение

Цитата Сообщение от Excalibur921 Посмотреть сообщение
А можно еще слайдеры добавить?
Это точно не ко мне, я и так в этих скриптах испачкался, фу, хватит
Цитата Сообщение от Excalibur921 Посмотреть сообщение
А как сделать свертку растра суперсемплинг? Я так понял типа gl_FragCoord.x+1 gl_FragCoord.x+2 и т.д. или есть некий готовый итератор?
У GL есть встроенный multisampling, нужен соответствующий контекст(но можно и вручную, рендеринг в текстуру -> рендеринг на экран с ручной выборкой, детектированием рёбер и т.д. )
3
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
03.01.2021, 15:04  [ТС]
В книге мацуды есть неработающий пример сглаженных точек там баг в коде в папке examples. Пофиксил но рисует примитивно.
Название: ScreenShot01353.jpg Просмотров: 63 Размер: 34.3 Кб
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>array draw</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid 

#aaaafa"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
 
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;
 
        var fragmentShaderSource =
            `void main()
            {    
        precision mediump float;
float d = distance(gl_PointCoord, vec2(0.5, 0.5));         
if(d < 0.5) 
{                
        float x = gl_FragCoord.x;
                float r = 0.5+0.45*sin(0.02*x+1.0);
                float g = 0.5+0.45*sin(0.02*x+2.0);
                float b = 0.5+0.45*sin(0.02*x+3.0);
                gl_FragColor = vec4(r, g, b, 1.0);
}
else 
{
discard;
}; 
 
            }`;
 
 
 
 
 
        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            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");
 
  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
 
            var pointsNumX=10;
            var pointsNumY=10;
    
            var dx=1.8/pointsNumX;
            var dy=1.8/pointsNumY;
 
            for(var x1=-0.9;x1<0.9;x1+=dx)
            {
                for(var y1=-0.9;y1<0.9;y1+=dy)
                {
                    gl.vertexAttrib2f(a_Position, x1, y1);
                    gl.drawArrays(gl.POINTS, 0, 1);                
                }
            }
        }
        main();
    </script>
</body>
 
</html>
Простой отброс пикселей по порогу кинули в главу
"Глава 10.Продвинутые приемы. Создание круглой точки"
Но ведь настоящий метод это через GL_ARB_point_sprite. А где берут текстуру сглаженной точки? Вот почему в книге нет примера на первых уроках спрайт точки GL_ARB_point_sprite? Не могу найти ни одного примера.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 03.01.2021, 15:04

Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется круг и увеличивается, достигая 100 в диаметре
Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется окружность и увеличивается, достигая 100 в диаметре, и т.д.

Построить горизонтальную стрелку, направленную из точки (100, 100) в точку (150, 100)
Стрелка состоит из отрезка прямой и равностороннего треугольника – острия. Сторона треугольника, пересекающая отрезок, образует с ним...

Построить вертикальную стрелку, направленную из точки (100, 100) в точку (100, 50)
Стрелка состоит из отрезка прямой и равностороннего треугольника-острия. Сторона треугольника, пересекающая отрезок, образует с ним прямой...

Пример 5. Командой char stroka[100]; объявляется символьный массив из 100 элементов, а командой cin >> stroka; с клавиат
int main() { setlocale(LC_ALL, &quot;Russian&quot;); char stroka; cout &lt;&lt; &quot;Введите любую строку текста: &quot;; cin &gt;&gt; stroka; cout &lt;&lt;...

Как найти нужное значение из формулы: 8.39=100/2.6+100/X-100
Здравствуйте люди. Помогите, если можете найти число &quot;х&quot; из формулы: 8.39=100/2.6+100/X-100 Добавлено через 1 час 6 минут да уж....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
34
Ответ Создать тему
2 из 2 « 1 2
Новые блоги и статьи
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ"
Adler 06.10.2026
Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .
ИИ не может найти нужный язык в списке
Supersumestria 05.10.2026
Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO
zorxor 05.10.2026
Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .
Программный домашний кинотеатр
russiannick 27.09.2026
Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр.
Jin X 06.09.2026
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru