Форум программистов, компьютерный форум, киберфорум
Наши страницы
OpenGL
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.60/15: Рейтинг темы: голосов - 15, средняя оценка - 4.60
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
1

Небольшие примеры на WebGL

19.11.2017, 16:43. Просмотров 2965. Ответов 70

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

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

Книга на русском по 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_modelViewMatrix: 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/


Туториал на русском по WebGL 1.0
Туториал на английском по WebGL 2.0
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.11.2017, 16:43
Ответы с готовыми решениями:

Литература WebGL
подкиньте пожалуйста ссылочек на литературу, можно и платную, можно и...

Не отрисовывается фигура в Webgl
Здравствуйте. Начинаю осваивать webgl. Начал с изучения этих уроков. Прочитал и...

Не правильное вращение пирамиды WebGL
Привет. Не могу понять из-за чего пирамида так странно поварачивается. Если...

WebGL - глубина отрисовки объектов
Прошу помочь тех кто сталкивался или знает как решить проблему: Суть: есть...

Нужно сделать цветочек на Webgl
Помогите сделать цветочек простой на webgl. Может кто делал уже.

70
Igor3D
1227 / 594 / 74
Регистрация: 01.10.2012
Сообщений: 2,844
10.01.2018, 11:16 61
Да, занятно, спасибо

Но вот.. (чисто мое мнение) подход какой-то.. ну "мелкотравчатый", что ли.. Типа выскочил, нахрюкал points/lines, абы как раскрасил - и все, убежал. А по-взрослому? Т.е. полноценная полигонная модель с нормалями и UV, ну и желательно adaptive resolution. И вот у меня почему-то впечатление что жаба-скрыпт (и его поклонники) этим заниматься не будут. Вот пошуршать десятком строк, пустить пыль в глаза, ткнуть в нос exe-шкой - то да. А работать - неееее. Ну что поделаешь, технология такая. Или я ошибаюсь?
1
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
10.01.2018, 11:50  [ТС] 62
Цитата Сообщение от Igor3D Посмотреть сообщение
Ну что поделаешь, технология такая. Или я ошибаюсь?
Эти программы на JS/WebGL переписываются в один в один на C++/OpenGL. Поэтому эта технология - это на 100% OpenGL. Поэтому ответ: "да, C++/OpenGL - это технология такая". Просто их преимущество, что они запускаются прямо в браузере на любой платформе, где есть браузер (любая ОС, планшет/сматрфон), не нужно ничего компилировать под разные платформы, скачивать EXE (иметь проблемы с библиотеками) и т.д.

Добавлено через 8 минут
Нет никакой разницы между текстом программы на WebGL/JS и OpenGL/C++. Шейдеры вообще один в один, даже ничего менять не нужно.

Просто для сравнения функция для создания шейдерной программы на JS и C++. Правда, один в один?

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
GLuint createShaderProgram(const GLchar *vShaderSource, const GLchar *fShaderSource)
{
    GLuint vShader = createShader(vShaderSource, GL_VERTEX_SHADER);
    GLuint fShader = createShader(fShaderSource, GL_FRAGMENT_SHADER);
 
    GLuint program = glCreateProgram();
    glAttachShader(program, vShader);
    glAttachShader(program, fShader);
    glLinkProgram(program);
    glUseProgram(program);
 
    return program;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function createShaderProgram(vShaderSource, fShaderSource)
{
    var vShader = createShader(vShaderSource, gl.VERTEX_SHADER);
    var fShader = createShader(fShaderSource, gl.FRAGMENT_SHADER);
 
    var program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    gl.linkProgram(program);
    gl.useProgram(program);
 
    return program;
}
1
Опан
Юзер с абсолютным слухом
577 / 388 / 158
Регистрация: 17.12.2010
Сообщений: 1,163
10.01.2018, 17:56 63
Анимированная стереокартинка.
Хочу предложить код рисования пары изображений, предназначенных для просмотра соответственно левым и правым глазом. Когда нет прибора стереоскопа и ширина изображений превышает расстояние между глазами, на обычном мониторе стереокартинки можно просматривать на перекосяк - левым глазом то изображение, что размещено правее, а правым - то, что левее. Следующая реализация рисования объёмного узора с использованием библиотеки three.js предусматривает этот вариант. По сути, нарисованный объект статический, а анимация заключается в повороте его под разными углами:
PHPHTML
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
<!DOCTYPE html>
<head>
<title>Анимированная стереокартинка</title>
<meta charset="utf-8">
</head>
<body>
<div id="container_r" style="position:absolute;left:0px;top:0px;width:512px;height:512px"></div>
<div id="container_l" style="position:absolute;left:512px;top:0px;width:512px;height:512px"></div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container_l = document.getElementById( 'container_l' );
var container_r = document.getElementById( 'container_r' );
var camera_l = new THREE.PerspectiveCamera( 50, 1, 5, 3500 );
camera_l.position.x = -150;
var camera_r = new THREE.PerspectiveCamera( 50, 1, 5, 3500 );
camera_r.position.x = 150;
camera_l.position.z = camera_r.position.z = 2750;
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );
scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
var particles = 125.6;
var geometry = new THREE.BufferGeometry();
var positions = [], colors = [];
var n = 2500, n2 = n / 2; // particles spread in the cube
var sdvig = 0;
for ( var i = 0; i < particles; i += 0.0005 ) {
    var x = n2 * Math.sin(i) * Math.sin((i + sdvig )* 8);
    var y = n2 * Math.cos(i) * Math.sin((i + sdvig )* 8);
    var z = 190 * (Math.sin(i * 8) + Math.sin(i * 16));
    n2 -= 0.0025;
    sdvig -= 0.0000025;
    positions.push( x, y, z );
    var vx = ( x / n2 ) + 0.5;
    var vy = ( y / n2 ) + 0.5;
    var vz = ( z / n2 ) + 0.5;
    colors.push( vx, vy, vz );
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial( { size: 10, vertexColors: THREE.VertexColors } );
var points = new THREE.Points( geometry, material );
scene.add( points );
var renderer_l = new THREE.WebGLRenderer( { antialias: false } );
renderer_l.setPixelRatio( window.devicePixelRatio );
var renderer_r = new THREE.WebGLRenderer( { antialias: false } );
renderer_r.setPixelRatio( window.devicePixelRatio );        
renderer_l.setSize( 512, 512 );
renderer_r.setSize( 512, 512 );
container_l.appendChild( renderer_l.domElement );
container_r.appendChild( renderer_r.domElement );
function animate() {
    requestAnimationFrame( animate ); // убрав эту строку, можно выключить анимацию
    renderer_l.render( scene, camera_l );
    renderer_r.render( scene, camera_r );
    points.rotation.x += 0.015;
    points.rotation.y += 0.02;
}
animate();
</script>
</body>
</html>
2
Миниатюры
Небольшие примеры на WebGL  
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
10.01.2018, 19:20  [ТС] 64
Опан, я попозже создам тему "Проекты на Three.js и Babylon.js". Всё-таки в этой теме лучше выкладывать примеры на низкоуровневом API, только на WebGL, а не на графических движках. Тема здесь: чистый WebGL.
0
Опан
Юзер с абсолютным слухом
577 / 388 / 158
Регистрация: 17.12.2010
Сообщений: 1,163
10.01.2018, 20:31 65
Дайте, пожалуйста, пример без движков рисования точки или цикла точек на 3-д холсте. Я сам пытался гуглить, что-то не получается.
1
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
11.01.2018, 00:41  [ТС] 66
Цитата Сообщение от Опан Посмотреть сообщение
Следующая реализация рисования объёмного узора с использованием библиотеки three.js предусматривает этот вариант.
Я создал специальную тему для Three.js: Проекты на Three.js и Babylon.js

Цитата Сообщение от Опан Посмотреть сообщение
Дайте, пожалуйста, пример без движков рисования точки или цикла точек на 3-д холсте. Я сам пытался гуглить, что-то не получается.
Хорошо, напишу.
0
Igor3D
1227 / 594 / 74
Регистрация: 01.10.2012
Сообщений: 2,844
12.01.2018, 10:25 67
Цитата Сообщение от 8Observer8 Посмотреть сообщение
Нет никакой разницы между текстом программы на WebGL/JS и OpenGL/C++. Шейдеры вообще один в один, даже ничего менять не нужно.
А "не на чистом"? Пример

Вот помнится Вы показывали что-то на Babylon, подробности не помню, но смысл такой: вызвали метод (включили опцию) - вот уже и тень появилась, и цвет диффузы и.т.п. Это нормальный, правильный подход, все это программирование на GLSL - удовольствие небольшое, на мой взгляд это вообще тупиковая ветка эволюции.

Хорошо, и вот теперь по каким-то причинам (всегда найдутся) захотелось какой-то объект шейдить самому. И что делать? Писать "с нуля" свой шейдер? Но так я потеряю все все что назначается движком (источники света, тени, текстуры, установки материала). А если "не с нуля" - то как "интегрироваться" в рендер движка?

Как движки решают эту проблему? И есть ли хоть какие-то средства в чистом WebGL ?
0
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
12.01.2018, 10:44  [ТС] 68
Цитата Сообщение от Igor3D Посмотреть сообщение
И есть ли хоть какие-то средства в чистом WebGL ?
WebGL 1.0 - это полный аналог спецификации OpenGL ES 2.0. Буквы ES расшифровываются, как "embedded systems", то есть это немного урезанный шейдерный OpenGL 2.0 для мобильных. Если вы знакомы с шейдерным OpenGL 2.0, то вы сами можете ответить на вопрос: "есть ли хоть какие-то средства в чистом OpenGL 2.0"
1
Витек1221
2 / 2 / 1
Регистрация: 20.12.2016
Сообщений: 100
14.02.2018, 21:30 69
от души
1
Igor3D
1227 / 594 / 74
Регистрация: 01.10.2012
Сообщений: 2,844
16.02.2018, 13:16 70
Добрый день, Ваня

Тут хотелось бы помучить background (см тему "Простая подложка"), но с моим инструментарием (Qt) выходит большая возня, да и поделиться/показать достигнутое будет непросто. Могу ли я использовать Вашу песочницу? Подойдет любой пример где абы что отрендерено шейдерами и можно поворачивать камеру. Сила плюсов тут особо не нужна, в основном GLSL, с кодом на JS как-нибудь разберусь. Если да, то что лучше взять ?

С уважением
Игорь
0
8Observer8
2294 / 1460 / 236
Регистрация: 05.10.2013
Сообщений: 4,520
Записей в блоге: 56
12.08.2018, 11:43  [ТС] 71
Пример рисования треугольника на TypeScript и WebGL 1.0 в объектно-ориентированном стиле.

Для компилирования нужно ввести в консоли команду: tsc. Результат компиляции окажется в папке public.

Небольшие примеры на WebGL
0
12.08.2018, 11:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.08.2018, 11:43

Нужно сделать ёлку на Webgl
Помогите сделать елочку на webgl, может кто делал.

WebGl 2.0 Vertex Array Object (VAO)
Всем привет. Помогите пожалуйста разобраться с Vertex Array Object (VAO)....

WebGL, детализация текстуры при приближении
WebGL не совсем OpenGL, но мне бы просто идею узнать. А может кто и с threejs...


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

Или воспользуйтесь поиском по форуму:
71
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru