Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Shaders for the Web, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 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!