Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 2.

Перевод примеров из книги WPG на C# OpenGL 3.1 и TypeScript

Запись от 8Observer8 размещена 22.06.2019 в 17:08
Обновил(-а) 8Observer8 04.07.2019 в 21:26

Для практики и упражнений в WebGL и OpenGL решил переводить примеры из книги WebGL. Программирование трехмерной графики на TypeScript и C# OpenGL 3.1. По мере продвижения буду делать коммиты на GitHub: https://github.com/8Observer8/webgl-programming-guide-ports

Краткое описание, что делают примеры

ch02/HelloCanvas - создаёт холст и закрашивает его выбранным цветом. В данном случае, закрашивает чёрным цветом.

Примеры на TypeScript в песочнице на JSFiddle

Постепенно будет формироваться список примеров в песочнице на TypeScript, где можно увидеть код и посмотреть результат сразу по одному клику:

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: https://next.plnkr.co/edit/SPaDtGlLZ1ZlgRhd?preview

Chapter 07. Toward the 3D World
ch07/ColoredCube: https://next.plnkr.co/edit/88OzrQSw4z64CF0C?preview

Примеры на JavaScript в песочнице на JSFiddle

Это список всех примеров книги, которые я перенёс на JSFiddle, они на JavaScript:

Кликните здесь для просмотра всего текста
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/
Размещено в Без категории
Просмотров 320 Комментарии 20
Всего комментариев 20
Комментарии
  1. Старый комментарий
    Чего-то примеры не работают
    Запись от ТабуретY размещена 23.06.2019 в 00:39 ТабуретY вне форума
  2. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Чего-то примеры не работают
    Какую ошибку выдаёт?
    Запись от 8Observer8 размещена 23.06.2019 в 01:14 8Observer8 вне форума
  3. Старый комментарий
    Аватар для 8Observer8
    При запуске первого примера (HelloGLControl) на C# WinForms на форме должен появиться холст GLControl закрашенный чёрным цветом.
    Запись от 8Observer8 размещена 23.06.2019 в 01:22 8Observer8 вне форума
  4. Старый комментарий
    Цитата:
    Сообщение от 8Observer8 Просмотреть комментарий
    При запуске первого примера (HelloGLControl) на C# WinForms на форме должен появиться холст GLControl закрашенный чёрным цветом.
    Все примеры выводят только это
    Запись от ТабуретY размещена 23.06.2019 в 02:11 ТабуретY вне форума
  5. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Все примеры выводят только это
    Потому что это самый первый пример. Он только лишь закрашивает холст выбранным цветом, в данном случае, чёрным цветом.
    Запись от 8Observer8 размещена 23.06.2019 в 08:11 8Observer8 вне форума
  6. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Чего-то примеры не работают
    В песочнице был не тот пример. Сейчас поправил. Спасибо!

    ch02/HelloCanvas: https://next.plnkr.co/edit/SPaDtGlLZ1ZlgRhd?preview
    Запись от 8Observer8 размещена 23.06.2019 в 09:20 8Observer8 вне форума
  7. Старый комментарий
    Аватар для XLAT
    такой вопрос:
    в песочнице интерактивность(разумеется, предусмотренная кодом сырца) присутствует?
    все эти кубики можно покрутить мышкой или клавой?
    Запись от XLAT размещена 24.06.2019 в 00:25 XLAT вне форума
    Обновил(-а) XLAT 24.06.2019 в 00:28
  8. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от XLAT Просмотреть комментарий
    такой вопрос:
    в песочнице интерактивность(разумеется, предусмотренная кодом сырца) присутствует?
    все эти кубики можно покрутить мышкой или клавой?
    Да, можно предусмотреть интерактивность в песочнице и мышкой и клавой. Если взять оригинальные примеры на JavaScript из книги, которые я перенёс в JSFiddle, то:

    Мышка: https://jsfiddle.net/8Observer8/1f5hLmff/

    Клава:
    https://jsfiddle.net/8Observer8/ygvk7odv/
    https://jsfiddle.net/8Observer8/zdw1f2st/
    (нужно кликнуть на холсте один раз, чтобы сделать окно активным)
    Запись от 8Observer8 размещена 24.06.2019 в 01:51 8Observer8 вне форума
  9. Старый комментарий
    Аватар для 8Observer8
    Есть такая графическая, называется Babylon.js. Она написана на TypeScript и является обёрткой над чистым WebGL. Я перенёс первый учебный пример с сайта Babylon.js в песочницу на TypeScript. В самой библиотеке уже реализована возможность вращения мышкой: https://next.plnkr.co/edit/YMWU5JxZ4R5b7NOSy2o4?preview

    Библиотека Babylon.js имеет много полезных реализованных вещей, но чистый WebGL может быть более гибок. Я считаю, что в каких-то случаях лучше библиотеку взять, в каких-то - чистый WebGL. Я ещё Pixi.js изучаю на TypeScript, но эта графическая библиотека позволяет рисовать только в 2D и тоже является обёрткой над чистым WebGL.
    Запись от 8Observer8 размещена 24.06.2019 в 02:01 8Observer8 вне форума
  10. Старый комментарий
    Примеры до HelloTriangle ничего не выводят
    Запись от ТабуретY размещена 24.06.2019 в 07:20 ТабуретY вне форума
  11. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Примеры до HelloTriangle ничего не выводят
    Вот этот пример:

    ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/

    Сначала ничего не выводит, но если кликать по холсту, то будут выводиться точки.
    Запись от 8Observer8 размещена 24.06.2019 в 10:20 8Observer8 вне форума
  12. Старый комментарий
    Аватар для 8Observer8
    Вот эти приложения должны выводить одну точку размером 10x10 пикселей:

    ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/
    ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/

    Тут должно выводиться три точки:

    ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/
    Запись от 8Observer8 размещена 24.06.2019 в 10:22 8Observer8 вне форума
  13. Старый комментарий
    Цитата:
    Сообщение от 8Observer8 Просмотреть комментарий
    Да, можно предусмотреть интерактивность в песочнице и мышкой и клавой. Если взять оригинальные примеры на JavaScript из книги, которые я перенёс в JSFiddle, то:

    Мышка: https://jsfiddle.net/8Observer8/1f5hLmff/

    Клава:
    https://jsfiddle.net/8Observer8/ygvk7odv/
    https://jsfiddle.net/8Observer8/zdw1f2st/
    (нужно кликнуть на холсте один раз, чтобы сделать окно активным)
    Супер! мне оно тоже надо ))) только доработать под себя )))
    Запись от NadinKaa размещена 24.06.2019 в 14:06 NadinKaa вне форума
  14. Старый комментарий
    Аватар для XLAT
    Цитата:
    спасибо!
    Запись от XLAT размещена 24.06.2019 в 14:35 XLAT вне форума
  15. Старый комментарий
    Проверил, на моем компе не работают примеры с gl.POINTS, на соседнем все работает, но у меня радеон, а там GeForce
    Запись от ТабуретY размещена 24.06.2019 в 20:54 ТабуретY вне форума
  16. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Проверил, на моем компе не работают примеры с gl.POINTS, на соседнем все работает, но у меня радеон, а там GeForce
    Попробуйте, поддерживается ли у вас WebGL в браузере: https://get.webgl.org/ Должен выводиться вращающийся куб.
    Запись от 8Observer8 размещена 24.06.2019 в 21:24 8Observer8 вне форума
  17. Старый комментарий
    Цитата:
    Сообщение от 8Observer8 Просмотреть комментарий
    Попробуйте, поддерживается ли у вас WebGL в браузере: https://get.webgl.org/ Должен выводиться вращающийся куб.
    Куб выводится и все примеры работают, кроме тех где точки рисуются
    Запись от ТабуретY размещена 24.06.2019 в 21:29 ТабуретY вне форума
  18. Старый комментарий
    Аватар для 8Observer8
    Цитата:
    Сообщение от ТабуретY Просмотреть комментарий
    Куб выводится и все примеры работают, кроме тех где точки рисуются
    Будем иметь ввиду, что такое бывает. Может когда-то удастся выяснить, почему так происходит. Спасибо. Точки можно рисовать квадратами (из двух треугольников), либо кругами из треугольников.
    Запись от 8Observer8 размещена 24.06.2019 в 22:48 8Observer8 вне форума
  19. Старый комментарий
    Аватар для 8Observer8
    Переписал "Colored Cube" из главы 7 на OpenGL 3.1 WinForms и TypeScript: https://next.plnkr.co/edit/88OzrQSw4z64CF0C?preview
    Запись от 8Observer8 размещена 04.07.2019 в 21:18 8Observer8 вне форума
  20. Старый комментарий
    Установил драйвер с сайта AMD и примеры с точкой заработали, до этого использовал драйвера которые устанавливаются с Win10
    Запись от ТабуретY размещена 14.07.2019 в 01:38 ТабуретY вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru