andrewray

xScale_1767314007539_51892

yScale_1767314007539_51892

speed_1767314007539_51892

dotColor_1767314007539_51892

Animated wave noise

petalResoloution_1767314007519_51882

Animated flower petals

lightPosition_1767314007456_51834

lightColor_1767314007456_51834

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

Simple Light

color

Change the uniform color and use this shader as a combination input to add color to your combination.

Color Multiplier

speed_1767314006712_51221

brightness

Rose Fractal

resolution

domainX_1767314006596_51110

domainY_1767314006596_51110

An actual function domain graph. You can see what it plots in the top function, however this is compilation output of an input function. See https://github.com/forestbelton/react-domain-coloring for the complete project.

Function Domain Graph

speed_1767314006520_51046

Disco Dots

reflectionSampler_1767314007415_51808

mirrorReflection_1767314007415_51808

An effect using a cube camera to drive the reflection. Shader Frog automatically creates a Three.js CubeCamera to pass in as a uniform to a samplerCube

Reflection Cube Camera

reflectionSampler_1767314006417_50969

mirrorReflection_1767314006417_50969

refractionRatio_1767314006417_50969

Refraction Cube Camera

speed_1767314006813_51301

Caustic Perlin

Visualized UV coordinates with a very simple shader.

UV Coordinates

Visualized normals coordinates with a very simple shader.

Normals Visualized

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

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

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

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

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

andrewray's Bio

andrewray's Shaders (869)