Transparent Vertical Color Gradient

andrewray

resolution

color

Fractal Zoom

colorX_1767314002081_46660

colorZ_1767314002081_46660

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.

Shader Side Test

image

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

shininess

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

Search Shaders