Visualized normals coordinates with a very simple shader.

Normals Visualized

andrewray

lightPosition_1767314007501_51866

lightColor_1767314007501_51866

specular

Phong Light

scale_1767314006035_50644

texture_1767314006035_50644

radius_1767314006035_50644

spread_1767314006035_50644

speed_1767314006035_50644

Multicolored dots in a grid or random arrangement (tweak the spread parameter), based on sampling an image. Based on the GPU gems chapter https://a248.e.akamai.net/f/248/10/10/http.developer.nvidia.com/GPUGems/gpugems_ch20.html

Something is wrong here, not sure what.

Polkadots Randomized

waveWidth_1767314005818_50402

waveHeight_1767314005818_50402

image

speed_1767314005818_50402

contrast_1767314005818_50402

color

Simple ocean

shininess

pointLightColor_1767314005799_50374

pointLightPosition_1767314005799_50374

pointLightDistance_1767314005799_50374

pointLightDecay_1767314005799_50374

wrapRGB_1767314005799_50374

Early experiment extracting the raw Three point light from the phong material type.

Three.js Point Light

Procedural Marble

resolution

speed_1767314004943_49541

baseRadius_1767314004943_49541

backgroundColor_1767314004943_49541

brightnessVariation_1767314004943_49541

colorVariation_1767314004943_49541

variation_1767314004943_49541

Imported from https://www.shadertoy.com/view/MljSzW and made configurable.

Fluid Circles

teeth_1767314004482_49038

speed_1767314004482_49038

innerDiameter_1767314004482_49038

toothHeight_1767314004482_49038

Based on http://glslsandbox.com/e#27870.0

Interlocking Gears

speed_1767314004425_48951

brightness

noiseImage_1767314004425_48951

distortion_1767314004425_48951

An animated image based noise pattern. Inspired by https://www.shadertoy.com/view/ldlXRS

Water Fog

iChannel2_1767314003931_48482

iChannel3_1767314003931_48482

iChannel0_1767314003931_48482

iChannel1_1767314003931_48482

mouse_1767314003931_48482

Imported from https://www.shadertoy.com/view/XsjGRd

Kepler 256o By Otavio

width_1767314004830_49400

radius_1767314004830_49400

fadePerecent_1767314004830_49400

antialias_1767314004830_49400

Loading Spinner

amplitude_1767314005837_50427

speed_1767314005837_50427

frequency_1767314005837_50427

highlightIntensity_1767314005837_50427

highlightColor_1767314005837_50427

lowerBound_1767314005837_50427

wavetexture_1767314005837_50427

Based on Wiggly Improved http://shaderfrog.com/app/view/142 this tapers the effect to the top half of the object.

Ripple

Imported from https://www.shadertoy.com/view/lsy3Rh

Test Universe

speed_1767314003438_48059

backgroundColor_1767314003438_48059

flowSpeed_1767314003438_48059

Transparent Tiling Caustic

texture1_1767314006460_50998

texture2_1767314006460_50998

multiplier_1767314006460_50998

Horizontal 2 Color Graident

colorStrength_1767314003073_47678

Include this shader to get Three.js vertex colors passed to your shader from the attribute "color."

Three.js Vertex Colors

With this shader, you can scale the box in any direction, and the UVs will update

UVs Based on Scale

lightPosition_1767314002063_46647

lightColor_1767314002063_46647

More for demonstration purposes than anything, this light is a simple dot product calculatin of the normal and the light position

Dot product effect

uvScale_1767314002222_46805

uvOffset_1767314002222_46805

colorFront1_1767314002222_46805

colorFront2_1767314002222_46805

colorRight1_1767314002222_46805

colorRight2_1767314002222_46805

colorTop1_1767314002222_46805

colorTop2_1767314002222_46805

Applies a gradient to each cardinal direction, X, Y, and Z. Uses world space (see the vertex shader) to calculate where the gradient is. Similar to how monument valley shading works.

World-Based Gradients

lightPosition_1767314003114_47707

lightColor_1767314003114_47707

Basic Texture

Transparent Vertical Color Gradient

Fractal Zoom

colorX_1767314002081_46660

colorZ_1767314002081_46660

Shader Side Test

uvScale_1767313992931_37997

speed_1767313992931_37997

A texture map. Swap out any texture using the image uniform

Scrolling Texture

pieColor_1767313992554_37720

Pie Timer

HDRMultiplier_1767314005136_49701

Kr_1767314005136_49701

FresnelBias_1767314005136_49701

FresnelExp_1767314005136_49701

KWater_1767314005136_49701

DeepColor_1767314005136_49701

ShallowColor_1767314005136_49701

ReflTint_1767314005136_49701

normalMap

envMap

WaveAmp_1767314005136_49701

WaveFreq_1767314005136_49701

BumpScale_1767314005136_49701

TexReptX_1767314005136_49701

TexReptY_1767314005136_49701

BumpSpeedX_1767314005136_49701

BumpSpeedY_1767314005136_49701

Uses a combination of fresnel, normal mapping, environment mapping, and vertex animation to create a reflective ocean effect.

Ocean Shader

Uses time as the third parameter for the vec3 input, creating animation. Implemented from the source code of https://github.com/ashima/webgl-noise/blob/master/src/classicnoise2D.glsl

"Simplex" 3D Perlin Noise

multiplicationFactor_1767314007152_51585

threshold_1767314007152_51585

offset_1767314007152_51585

radius_1767314007152_51585

size_1767314007152_51585

thickness

BorderShader

u_texture_1767314007580_51930

expand_1767314007580_51930

radius_1767314007580_51930

windowSize_1767314007580_51930

lightPosition_1767314007580_51930

Texture Map

image1_1767314005683_50251

image2_1767314005683_50251

Image CrossFade

God Rays

lightPosition_1767314005972_50569

diffuseColor_1767314005972_50569

specularColor_1767314005972_50569

scaleBias_1767314005972_50569

❗BROKEN because three removed tangents code https://github.com/mrdoob/three.js/issues/7094

Adapted from http://www.chandlerprall.com/2011/08/parallax-shader-for-webgl-threejs/ A parallax map effect is similair to a normal or bump map effect. It displaces the individual pixel height of a surface, so that when you look at it at an angle, the high points will obscure the low points behind them, making it look three-dimensional. Note this shader is a WIP.

Parallax Mapping (Broken for now)

LightSource_1767313976316_23632

base_1767313976316_23632

ambientColor_1767313976316_23632

diffuseColor_1767313976316_23632

specularColor_1767313976316_23632

scaleBias_1767313976316_23632

Attempt at parallax but replaced tangent attr with normal attr since it's broken

Broken parallax

Based on the THREE.js shader https://github.com/mrdoob/three.js/blob/5c7e0df9b100ba40cdcaaf530196290e16c34858/examples/js/shaders/FresnelShader.js this modifies the refraction vector based on the color input channel.

Refraction With Aberration

iResolution_1767313976117_23454

iTimeDelta_1767313976117_23454

iFrame_1767313976117_23454

iMouse_1767313976117_23454

iChannel0_1767313976117_23454

iDate_1767313976117_23454

iSampleRate_1767313976117_23454

iTime_1767313976117_23454

Experiment in varying C every iteration of the mandelbrot test

Squishy Mandelbrot

offset_1767313976197_23530

colorInside_1767313976197_23530

colorOutside_1767313976197_23530

Mandelbrot

litOutlineThickness_1767314005157_49759

unlitOutlineThickness_1767314005157_49759

outlineColor_1767314005157_49759

lightPosit4ion_1767314005157_49759

This does not currently compose well due to a bug in the parser I'm investigating.

Based on this tutorial: https://en.wikibooks.org/wiki/GLSL_Programming/Unity/Toon_Shading works better on some primatives, worse on others.

Simple Outline Effect

A parallax configurable starfield with minimal twinkling.

Parallax Starfield

displacementMap

Water Displacement Map Example

start_1767314007702_52014

end_1767314007702_52014

alpha_1767314007702_52014

A glow effect based on the normals of the object

Glow Effect

uvScale_1767314007235_51664

lightPosition_1767314007235_51664

A normal map shader. No textures necessary!

Normal Map

All Three.js Shaders