Shaders {Tools}

Done before

• Pixel Spirit Deck (spoiler)
  • http://thebookofshaders.com/edit.php?log=170813200631
• shading in Blender
  • no visible result yet, probably not being applied since a typo added doesn't generate an error
  • https://gist.github.com/Utopiah/976f09ed36be542ffeb42d74e22a9a8b
• for textures and videos
  • https://gl-transitions.com/editor/windowblinds
  • could also do one with progressively large randomly distributed discs
• flat
  • http://glslsandbox.com/e#40535.2
  • and cf 2 others... also via GLSL Sandbox (preview?)
• on AFrame
  • basic Lambertian diffuse
    • https://pool-stream.glitch.me/
  • sound reactive
    • passing the volume as a uniform, cf mesh done for Apainter
    • https://wry-scooter.glitch.me/
  • random color with time http://output.jsbin.com/rexonu/
  • modifier sphere using vertex shader https://cooing-zebra.glitch.me/
  • wind in grass https://receptive-dish.glitch.me/
  • equivalent but on a mesh as obj file https://whimsical-collar.glitch.me/
    • had to go deeper down the group
  • more complete example https://equinox-rainstorm.glitch.me/
    • multiple shaders, passing values from vertex to fragment shader, passing values from the page (GUI) to a shader

Ideas

• half wireframe, half shaded
  • alt. half transparent mesh via fragment shader alpha vec4(color, alpha); linked to position.x
• low poly fragment shader
  • color each vertex using a color randomly picked within a spectrum
• GLSL sound reactive in VR explorer
  • controller to adjust values
    • consider VR-friendly version of blockly
  • presets to
    • apply sin() and other math operations
  • add common variables e.g. position
  • can be configured for VRing
    • having volume, beat, etc as input variables
    • versioning to keep a previous shader as background/overlay/backup

The Book of Shaders

• with its online editor http://editor.thebookofshaders.com
• done until chapter 10
• coordinates http://thebookofshaders.com/edit.php?log=160722162812
• useful functions http://www.iquilezles.org/www/articles/functions/functions.htm
• color wheel http://thebookofshaders.com/edit.php?log=160722172836
• square drawing http://thebookofshaders.com/edit.php?log=160722183341
• animated distance fields http://thebookofshaders.com/edit.php?log=160722191106

via Shader School

• inout/out for "returning" multiple values from a function
• glFragColor, glFragCoord
• no loops with variables
  • but can loop to upper bound then check inside the loop
• problems with pow()
• model view projection -> gl_Position = projection * view * model * vec4(position, 1);
  • https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection

See also after https://github.com/stackgl/webgl-workshop

To explore

• http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/
• https://2017.revision-party.net cf the 25min shader competition
• snail as math https://www.youtube.com/watch?v=XuSnLbB1j6E https://www.shadertoy.com/view/ld3Gz2
  • via Pierre
  • explanations https://www.youtube.com/watch?v=0ifChJ0nJfM
• Unity 9 of CS291 on Udacity, webGL
• Lesson 7 of Unity 2 of UCSDx CSE167x on EdX, OpenGL
• WebGL Reference Card, Khronos Group
• https://www.shadertoy.com (warning, crashes with forced webGL without hardware acceleration)
• gradient shader for Aframe skyGradient.js
• https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
• https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/
• https://egghead.io/lessons/javascript-apply-varying-colors-per-vertex-to-webgl-triangles
• http://www.sunandblackcat.com/tipFullView.php?l=eng&topicid=30
• https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/what-is-shading-light-matter-interaction
• https://aframe.io/docs/0.5.0/components/material.html#example-—-glsl-and-shaders
  • see also VirtualReality#AFrame

Note

My notes on Tools gather what I know or want to know. Consequently they are not and will never be complete references. For this, official manuals and online communities provide much better answers.