Форум программистов, компьютерный форум, киберфорум
Наши страницы
OpenGL
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 2, средняя оценка - 5.00
8Observer8
2040 / 1333 / 217
Регистрация: 05.10.2013
Сообщений: 4,229
Записей в блоге: 56
#1

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

19.11.2017, 16:43. Просмотров 2585. Ответов 69
Метки нет (Все метки)

Предлагаю выкладывать в этой теме свои небольшие примеры на 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 (OpenGL):

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

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

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

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

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

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

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

Но вот.. (чисто мое мнение) подход какой-то.. ну "мелкотравчатый", что ли.. Типа выскочил, нахрюкал points/lines, абы как раскрасил - и все, убежал. А по-взрослому? Т.е. полноценная полигонная модель с нормалями и UV, ну и желательно adaptive resolution. И вот у меня почему-то впечатление что жаба-скрыпт (и его поклонники) этим заниматься не будут. Вот пошуршать десятком строк, пустить пыль в глаза, ткнуть в нос exe-шкой - то да. А работать - неееее. Ну что поделаешь, технология такая. Или я ошибаюсь?
1
8Observer8
2040 / 1333 / 217
Регистрация: 05.10.2013
Сообщений: 4,229
Записей в блоге: 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
Опан
Юзер с абсолютным слухом
559 / 370 / 152
Регистрация: 17.12.2010
Сообщений: 1,124
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
2040 / 1333 / 217
Регистрация: 05.10.2013
Сообщений: 4,229
Записей в блоге: 56
10.01.2018, 19:20  [ТС] #64
Опан, я попозже создам тему "Проекты на Three.js и Babylon.js". Всё-таки в этой теме лучше выкладывать примеры на низкоуровневом API, только на WebGL, а не на графических движках. Тема здесь: чистый WebGL.
0
Опан
Юзер с абсолютным слухом
559 / 370 / 152
Регистрация: 17.12.2010
Сообщений: 1,124
10.01.2018, 20:31 #65
Дайте, пожалуйста, пример без движков рисования точки или цикла точек на 3-д холсте. Я сам пытался гуглить, что-то не получается.
1
8Observer8
2040 / 1333 / 217
Регистрация: 05.10.2013
Сообщений: 4,229
Записей в блоге: 56
11.01.2018, 00:41  [ТС] #66
Цитата Сообщение от Опан Посмотреть сообщение
Следующая реализация рисования объёмного узора с использованием библиотеки three.js предусматривает этот вариант.
Я создал специальную тему для Three.js: http://www.cyberforum.ru/graphics-dev/thread2172222.html

Цитата Сообщение от Опан Посмотреть сообщение
Дайте, пожалуйста, пример без движков рисования точки или цикла точек на 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
2040 / 1333 / 217
Регистрация: 05.10.2013
Сообщений: 4,229
Записей в блоге: 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
Сообщений: 99
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
16.02.2018, 13:16
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.02.2018, 13:16
Привет! Вот еще темы с решениями:

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

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

Технология освещения и нормали. Не могу разобраться (WebGL)
Изучаю WebGL по книге &quot;WebGL программирование трехмерной графики&quot;, вот ссылка...

Из какого 3d редактора и как можно экспортировать анимацию в WebGL?
С WebGL дело имею первый раз потому заранее извиняюсь за глупый вопрос и...


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

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

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