Главная страницаКатегория javascriptШейдеры для Веба

Шейдеры для Веба

Name: Шейдеры для Веба
Price: 12.5 USD
Rating: 5 (20 reviews)

Shaders for the Web

superhi.com

★5 (всего оценок - 20)

Продолжительность

16 ч 3 мин

Категория

JavaScript

Количество уроков

168 Видео

Дата добавления

7 янв. 2022 г., 00:46

Язык

Английский

Дата обновления

29 апр. 2026 г., 13:43

Курс «Шейдеры для Веба» — это практическое погружение в мир графики, работающей прямо в браузере. Здесь вы узнаете, как использовать GLSL и создавать визуальные эффекты, которые делают современные сайты более выразительными, интерактивными и технологичными.

Что вы получите от изучения веб‑шейдеров

Разработка шейдеров — одна из самых востребованных дисциплин в современном вебе. Она объединяет математику, программирование и дизайн, позволяя создавать динамичные визуальные эффекты, реагирующие на действия пользователя.

Почему шейдеры важны в веб‑разработке

Шейдеры позволяют выводить графику, которая работает на GPU. Это означает высокую производительность и возможность создавать визуальные эффекты, аналогичные тем, что используются в играх и интерактивных инсталляциях.

Плавные анимации без просадок FPS
Создание интерактивных фонов и 3D‑элементов
Совместимость с современными фреймворками для графики

Основные темы курса

Материал курса полностью ориентирован на практику. Вы шаг за шагом создадите свои собственные шейдеры, научитесь оптимизировать их и интегрировать в веб‑проекты.

GLSL и основные типы шейдеров

Вы изучите синтаксис GLSL и поймете, как работают два главных типа шейдеров:

Вершинные шейдеры — управление формой объектов
Фрагментные шейдеры — создание цвета, текстуры и эффектов

Инструменты и библиотеки для работы в вебе

Курс подробно рассматривает практическую интеграцию кода:

GlslCanvas для быстрого прототипирования
Three.js для 3D‑сцен и сложных визуализаций
Связка шейдеров с событиями JavaScript: мышь, прокрутка, движение

Практические навыки, которые вы освоите

После окончания курса вы сможете уверенно работать с WebGL‑графикой и создавать собственные визуальные эффекты для сайтов и интерактивных проектов.

Работа с математикой и процедурными эффектами

Быстрая математика для визуальных эффектов
Использование процедурного шума
Создание случайных и динамически меняющихся паттернов

Применение результатов в реальных проектах

Шейдеры легко интегрируются в веб-сайты, лендинги, арт‑проекты и интерфейсы с высокой визуальной сложностью. Вы сможете создавать уникальные эффекты, которые выделят ваши проекты среди конкурентов.

Кому подойдет этот курс

Веб‑разработчикам, которые хотят расширить компетенции
Дизайнерам и digital‑художникам
Frontend‑разработчикам, работающим с анимациями и интерактивами
Тем, кто интересуется компьютерной графикой и визуальными эффектами

Итог

Освоив шейдеры, вы откроете для себя один из самых мощных инструментов современного веба. Благодаря этому курсу вы создадите собственные графические эффекты и научитесь уверенно работать с GLSL, WebGL и популярными библиотеками.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:12
Intro to Slow Breaths
Урок 2. 00:08:32
What exactly is a shader?
Урок 3. 00:09:38
How to mix colors
Урок 4. 00:04:06
Mixing gradients together
Урок 5. 00:06:36
Adding movement with the time uniform
Урок 6. 00:06:26
Putting in correct colors
Урок 7. 00:07:26
Adding a texture to our shader
Урок 8. 00:05:45
Sampling points using texture2D
Урок 9. 00:06:47
Using a displacement texture
Урок 10. 00:03:04
Cleaning up our shader, ready for the web!
Урок 11. 00:08:31
Setting up our website
Урок 12. 00:07:55
Adding GlslCanvas
Урок 13. 00:04:14
Adding our KodeLife code
Урок 14. 00:01:28
Welcome to Kaleidoscope!
Урок 15. 00:06:25
Sampling the texture
Урок 16. 00:04:57
Resampling texture points using radius and angle
Урок 17. 00:07:54
Altering the sample angle
Урок 18. 00:04:11
Cleaning up our code for GlslCanvas
Урок 19. 00:07:31
Setting up our website
Урок 20. 00:06:39
Adding a texture
Урок 21. 00:05:48
Stopping canvas pixelation
Урок 22. 00:02:21
Fixing canvas size on browser resize
Урок 23. 00:03:54
Adding mouse movement
Урок 24. 00:06:00
Changing the texture in a slideshow
Урок 25. 00:01:26
Welcome to Alice McCloud
Урок 26. 00:10:42
What are step and smoothstep?
Урок 27. 00:09:44
Randomness in GLSL
Урок 28. 00:08:14
From randomness to noise
Урок 29. 00:06:16
Fractional Brownian motion
Урок 30. 00:02:31
Moving our FBM pattern
Урок 31. 00:04:32
Using step and smoothstep to control the mix
Урок 32. 00:02:16
Adding grain using random
Урок 33. 00:03:44
Adding movement with time and rotation
Урок 34. 00:07:13
HSV to RGB
Урок 35. 00:02:36
Making our code ready for GlslCanvas
Урок 36. 00:07:40
Setting up our website
Урок 37. 00:06:25
Loading a fragment shader
Урок 38. 00:03:46
Sizing our canvas
Урок 39. 00:10:47
Adding mouse movement
Урок 40. 00:04:52
How to add a random seed uniform
Урок 41. 00:01:35
Welcome to Arabella
Урок 42. 00:04:41
Adding a texture
Урок 43. 00:08:30
How to keep the aspect ratio
Урок 44. 00:06:24
Keeping the aspect ratio anchored to the center
Урок 45. 00:05:36
Adding distortion
Урок 46. 00:03:27
Making a wave with distortion
Урок 47. 00:03:52
Distortion variations
Урок 48. 00:03:03
Making a safe area
Урок 49. 00:03:58
Grouping distortion into blocks
Урок 50. 00:04:03
Adding mouse movement
Урок 51. 00:10:12
Creating our website
Урок 52. 00:08:32
Setting up multiple canvases
Урок 53. 00:05:28
Adding our KodeLife code
Урок 54. 00:02:25
Adding a random seed
Урок 55. 00:01:17
Welcome to Neon Nights
Урок 56. 00:09:35
Adding color shift
Урок 57. 00:04:18
Adding a wave distortion pattern
Урок 58. 00:06:20
Sampling colors within bounds
Урок 59. 00:07:10
Sampling with gl_FragCoord
Урок 60. 00:02:13
Rotating our distortion
Урок 61. 00:01:51
Adding grain to our distortion
Урок 62. 00:02:23
Adding a strength uniform
Урок 63. 00:11:17
Creating our website
Урок 64. 00:04:06
Adding and styling a canvas tag
Урок 65. 00:05:44
Replacing images with canvas tags
Урок 66. 00:05:00
Loading our sandbox
Урок 67. 00:06:37
Adding our fragment shader
Урок 68. 00:04:45
Making the shader retina-friendly
Урок 69. 00:11:03
Changing the strength with IntersectionObserver
Урок 70. 00:02:10
Variations on the strength uniform
Урок 71. 00:02:47
Welcome to Hi Records
Урок 72. 00:10:34
Making a circle with step and smoothstep
Урок 73. 00:06:58
Mixing colors using steps
Урок 74. 00:06:56
Animating our gradient
Урок 75. 00:05:31
Adding record ridges
Урок 76. 00:02:30
Variations on outerDist
Урок 77. 00:03:16
Adding grain to our gradient
Урок 78. 00:05:20
Adding color palettes with arrays
Урок 79. 00:02:47
Adding a scroll uniform to pick palettes
Урок 80. 00:04:22
Blending color palettes
Урок 81. 00:08:58
How to pick from an array using WebGL
Урок 82. 00:03:21
Making the shader ready for the web
Урок 83. 00:13:08
Making our website
Урок 84. 00:06:15
Adding Javascript
Урок 85. 00:07:01
Adding scroll and color uniforms
Урок 86. 00:01:25
Welcome to The Art of Posing
Урок 87. 00:07:14
Resampling uv to start in the center
Урок 88. 00:02:13
Adding a distortion wave
Урок 89. 00:05:57
Adding noise and FBM to distortion
Урок 90. 00:05:29
Adding a strength and timeline uniform
Урок 91. 00:04:23
Adding a transition between textures
Урок 92. 00:04:13
Adding a wave-based transition
Урок 93. 00:08:05
Setting up multiple textures
Урок 94. 00:02:19
Getting ready for the web
Урок 95. 00:08:24
HTML and CSS setup
Урок 96. 00:12:05
Setting up a slideshow in Javascript
Урок 97. 00:07:57
Adding our canvas
Урок 98. 00:07:43
Updating our fragment for a list of projects
Урок 99. 00:07:10
Changing our GLSL code to fit the slideshow
Урок 100. 00:08:31
Adding the startIndex, endIndex and timeline uniforms
Урок 101. 00:01:12
Welcome to Jellyfish
Урок 102. 00:04:48
How to do 3D in KodeLife
Урок 103. 00:05:27
Setting up a scene in Three.js
Урок 104. 00:10:04
Setting a background and geometry
Урок 105. 00:06:52
Setting up a ShaderMaterial in Three.js
Урок 106. 00:07:07
Adding a vertex shader
Урок 107. 00:04:58
Adding a time uniform
Урок 108. 00:06:13
Adding a texture uniform
Урок 109. 00:07:46
Ambient lighting
Урок 110. 00:07:28
Diffuse lighting
Урок 111. 00:08:13
Specular lighting
Урок 112. 00:04:57
Adding multiple lights
Урок 113. 00:07:03
Texture cubes
Урок 114. 00:08:52
Rotating vertices in the vertex shader
Урок 115. 00:04:39
Making the jellyfish
Урок 116. 00:05:18
Adding a camera zoom on load
Урок 117. 00:04:57
Updating the renderer on window resize
Урок 118. 00:02:46
Variation: convex to concave
Урок 119. 00:06:28
Variation: bubble refraction
Урок 120. 00:06:13
Variation: Making a thin film interference bubble
Урок 121. 00:02:07
Using variations in the final project
Урок 122. 00:03:10
Welcome to Cryptoquartz
Урок 123. 00:07:57
HTML + CSS setup
Урок 124. 00:02:29
Adding a scene with Three.js
Урок 125. 00:04:53
Adding a sphere geometry
Урок 126. 00:05:46
Setting up vertex and fragment shaders
Урок 127. 00:04:06
Changing the vertex shaders
Урок 128. 00:03:42
Adding FBM to our vertices
Урок 129. 00:04:25
Adding time and seed uniforms
Урок 130. 00:10:55
Adding slider uniforms
Урок 131. 00:06:25
Adding color based on varyings
Урок 132. 00:07:03
Ambient and diffuse lighting
Урок 133. 00:05:56
Adding a struct
Урок 134. 00:04:01
Adding in sliders for lighting
Урок 135. 00:07:05
Adding in new normals with dFdx and dFdy
Урок 136. 00:07:32
Changing to HSV colors
Урок 137. 00:04:56
Mixing two colors
Урок 138. 00:05:04
Creating some noise
Урок 139. 00:06:54
Adding saturation, brightness and gradient mix uniforms
Урок 140. 00:03:34
Better blending with step and smoothstep
Урок 141. 00:06:27
Adding rotation with vertex shaders
Урок 142. 00:03:31
Window resizing
Урок 143. 00:07:43
Click to download as an image
Урок 144. 00:07:29
Adding mouse movement to the lighting
Урок 145. 00:02:09
Welcome to Cloth Studios
Урок 146. 00:11:55
HTML + CSS setup
Урок 147. 00:08:39
Adding a Javascript counter
Урок 148. 00:06:51
Updating content with a data structure
Урок 149. 00:06:06
Adding a theme with CSS variables and Javascript
Урок 150. 00:05:20
Adding a Three.js scene
Урок 151. 00:09:09
Adding multiple planes
Урок 152. 00:05:56
Rotating the camera position
Урок 153. 00:03:01
Adding in a texture
Урок 154. 00:08:54
Making a shader material
Урок 155. 00:09:28
Adding ambient and diffuse lighting to our material
Урок 156. 00:03:28
Updating the time for each material
Урок 157. 00:07:26
Adding wind to our vertex shader
Урок 158. 00:02:04
Visualizing wind by passing varyings
Урок 159. 00:05:23
Adding in tension points and gravity
Урок 160. 00:04:35
Updating our lighting
Урок 161. 00:06:28
Adding a mouse object
Урок 162. 00:08:17
Adding a raycaster to convert 2D to 3D points
Урок 163. 00:04:11
Adding a mouse interaction depression
Урок 164. 00:07:37
Adding a hover strength to mouse interaction
Урок 165. 00:02:22
Updating on window resize
Урок 166. 00:03:19
Adding a camera rotation on load
Урок 167. 00:03:55
CSS animations on load
Урок 168. 00:00:29
Thank you for taking our course!

Автор - superhi.com

superhi.com

Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!

+102

Комментарии

kawa
27 мая 2022 г., 11:50
Great shaders course! I like it!