Узнайте, как создавать шейдеры OpenGL с помощью языка программирования GLSL, и получите представление о том, как ведущие веб-сайты используют графику с аппаратной поддержкой.
Познакомьтесь с одной из самых передовых частей Интернета прямо сейчас: шейдерами OpenGL. Ведущие веб-сайты используют их в своем веб-дизайне, но большинство сайтов не используют их из-за отсутствия понимания того, как их использовать.
В этом курсе мы покажем вам, как создавать шейдеры с нуля, используя язык программирования GLSL, а также все, что вам нужно знать о формах, вершинах и фрагментах, а затем как применять их к 2D- и 3D-проектам в Вебе.
Что такое шейдер и как писать код GLSL
Что такое формы, вершинные и фрагментные шейдеры
Как применить код GLSL в Интернете с помощью GlslCanvas и Three.js
Как связать веб-события, такие как движение мыши и прокрутку к нашему коду шейдера с помощью Javascript
Быстрые математические методы для создания потрясающей графики
Как использовать процедурный шум и случайность для создания изменчивой графики
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Урок 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
Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Продвинутое креативное программивароние: WebGL и Shaders
Advanced Creative Coding: WebGL and Shaders
Участники курса узнают как создавать в реальном времени визуальные эффекты, интерактивный опыт и генеративные художественные проекты с использованием JavaScript, WebGL / GLSL и веб-платформы. В частности, этот семинар будет посвящен некоторым более сложным темам, таким как знакомство с трехмерной векторной математикой и более продвинутые эффекты шейдеров. Навыки, которые вы изучите здесь, могут быть применены во многих областях, включая AR / VR,
Three.js Путешествие - Полное руководство по Three.js
Three.js Journey - The ultimate Three.js course
Вы когда-нибудь хотели создавать потрясающие 3D-сайты? Если вы новичок или более продвинутый разработчик, Three.js Journey - единственный курс, который вам нужен для изучения WebGL с Three.js.
Этот курс создан для разработчиков, которые хотят научиться создавать впечатляющие визуальные эффекты. От управляющих функций и моделей освещения до реалистичной травы уровня AAA и процедурных ландшафтов, построенных исключительно на математике - вы не просто научитесь делать красивые шейдеры, но и получите инструменты для дальнейшего самостоятельного роста в этой области.