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

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