frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Продвинутое креативное программивароние: WebGL и Shaders
Advanced Creative Coding: WebGL and Shaders
Продолжительность
4 ч 18 мин
Категория
WebGL
Количество уроков
43 Видео
Дата добавления
29 окт. 2019 г., 22:03
Язык
Английский
Дата выхода
28 окт. 2019 г., 21:56
Дата обновления
21 апр. 2020 г., 17:38
Участники курса узнают как создавать в реальном времени визуальные эффекты, интерактивный опыт и генеративные художественные проекты с использованием JavaScript, WebGL / GLSL и веб-платформы. В частности, этот семинар будет посвящен некоторым более сложным темам, таким как знакомство с трехмерной векторной математикой и более продвинутые эффекты шейдеров. Навыки, которые вы изучите здесь, могут быть применены во многих областях, включая AR / VR, разработку игр, интерактивные инсталляции, VJing, генеративный дизайн, медиа-арт и многое другое. Завершенные проекты могут отображаться в Интернете, на печатных носителях и в физических установках.
- Изучите основы 3D математики для игрового и графического программирования
- Научитесь писать vertex и fragment шейдеры для продвинутых эффектов
- Узнайте, как добавить 3D-рендеринг в ваш веб-проект
- Научитесь экспортировать ваши рендеры для веб-страниц, MP4, GIF и отпечатков высокого разрешения
- Изучите основы работы графического процессора и графического конвейера.
Посмотреть больше
Удален по просьбе правообладателя
-
Урок 1. 00:02:33Introduction
-
Урок 2. 00:04:23WebGL, GLSL & Three.js Overview
-
Урок 3. 00:13:15WebGL Examples
-
Урок 4. 00:08:50Course Code & Setup canvas-sketch
-
Урок 5. 00:10:22canvas-sketch Overview & Settings
-
Урок 6. 00:03:34Coordinate Systems
-
Урок 7. 00:07:48Geometry, Materials & Mesh
-
Урок 8. 00:03:41Position & Scene
-
Урок 9. 00:05:15Three.js Setup
-
Урок 10. 00:07:38Applying Images to Spheres
-
Урок 11. 00:02:17Grouping & Hierarchy
-
Урок 12. 00:04:41Lighting & Material Texture
-
Урок 13. 00:03:57Light & Grid Helper
-
Урок 14. 00:03:08Units & Scale
-
Урок 15. 00:01:43GPGPU for Computation
-
Урок 16. 00:01:20Light & Scene Wrap Up
-
Урок 17. 00:09:53Texture Mapping
-
Урок 18. 00:11:12Custom Geometry
-
Урок 19. 00:05:35Buffer Geometry
-
Урок 20. 00:02:36Shadertoy
-
Урок 21. 00:09:36Fragment Shaders
-
Урок 22. 00:05:34Vertex Shaders
-
Урок 23. 00:09:13Basic GLSL Fragment Shader
-
Урок 24. 00:08:11Custom Shader Setup
-
Урок 25. 00:04:23Custom Gradient Shader
-
Урок 26. 00:01:49Passing Data into Shaders
-
Урок 27. 00:07:07Texture Coordinates
-
Урок 28. 00:06:31Example Shader Inspiration
-
Урок 29. 00:09:22Circular Mask Pattern
-
Урок 30. 00:02:46Color Interpolation with mix
-
Урок 31. 00:02:23Translating Mask onto a Sphere
-
Урок 32. 00:04:04Mapping UV Coordinates on Shapes
-
Урок 33. 00:06:53Adding GLSL Noise
-
Урок 34. 00:07:43GLSL Noise
-
Урок 35. 00:05:40Icosahedron Geometry
-
Урок 36. 00:07:17Drawing Circles onto an Icosahedron
-
Урок 37. 00:13:08Using a Shader as a Texture
-
Урок 38. 00:09:38Rim Lighting
-
Урок 39. 00:04:13Antialiasing with GLSL
-
Урок 40. 00:07:07Exporting Animations in canvas-sketch
-
Урок 41. 00:01:40Custom Attributes Demo
-
Урок 42. 00:08:23Q&A
-
Урок 43. 00:01:46Wrapping Up
Автор - frontendmasters
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
Построение сложных 3D-моделей с помощью WebGL
Build Complex 3D models with WebGL
Мы рассмотрим per-vertex coloring, расширенное использование vertex arrays, дополнительные режимы рисования для построения 3D-моделей, перспективы, текстуры и освещения. Этот курс предполагает предварительные знания в WebGL.
Three.js и WebGL 3D Курс (VR, OpenGL)
Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)
Узнайте, как легко создавать 3D-приложения и игры для веб-браузеров. Как создавать интерактивные 3D фишки, такие как веб-приложение и игры. В этом курсе мы используем поэтапный процесс создания, чтобы показать все: от настройки до создания интерактивных 3D-миров.
frontendmasters
27 окт. 2018 г., 08:11
Креативное программирование в Canvas и WebGL
Creative Coding in Canvas & WebGL
Научитесь использовать Canvas и WebGL в этом семинаре JavaScript по креативному программированию! Пользуясь обширным ландшафтом графического программирования в Интернете, учащиеся узнают об генеративном искусстве, интерактивной анимации, 3D-графике с помощью ThreeJS и пользовательских шейдерах в GLSL. В этом воркшопе представлены некоторые фундаментальные концепции творческой работы по разработке, включая приложения VR / AR, игры, художественные
awwwards.com
11 мар. 2021 г., 17:29
Обогатите свою историю с помощью 3D: Потрясающий опыт с WebGL
Enrich your story with 3D: Creating stunning WebGL experiences
У каждого бренда своя индивидуальность, свои характеристики и цветовые схемы ... Узнайте, как играть с ними, чтобы создавать захватывающие и интерактивные впечатления, рассказывающие их историю. Узнайте, как шаг за шагом создавать потрясающие возможности 3D WebGL и преодолевать трудности, с которыми вы можете столкнуться.
awwwards.com
18 авг. 2021 г., 16:26
Создание простого веб-сайта-портфолио с помощью WebGL и Barba.js
Creating a simple portfolio website with WebGL and Barba.js
Ничто не может сравниться с плавным пользовательским интерфейсом. Вот почему мы любим WebGL, потому что мы можем создавать сумасшедшие эффекты с потрясающей производительностью. Но если вы объедините это с плавной анимацией, когда пользователь перемещается между страницами, вы получите отличный веб-сайт. Это именно то, что мы собираемся создать в этом курсе.