bnbshader x raymarch template / Lionel Radisson

Lionel Radisson

Generative artist, sharing my journey in visual experiments.

Workspace

Published

raymarching loops

Edited

Dec 17, 2020

1 star

p = getRandomPalette()

palette = shuffle(p)

scale = scales.magma

ramp(scale)

sh = () => raymarch({

antiAliasing: 3,

eye: `vec3(-6.5, 0, 0) * (1.3 + sin(easeInOutCubic(u_time) * PI) * .75)`,

distMax: 50,

background: `vec3(${hexToRgb(scale(1)).join(',')})/255.`,

sceneSDF: `

#define PI ${Math.PI}

#define TAU ${Math.PI * 2}

#define rot(a) mat2(cos(a),sin(a),-sin(a),cos(a))

//#define NUM_COLORS ${palette.length}.

#define NUM_COLORS 256.

uniform sampler2D u_texture;

${iqSDF.sdBox()}

${glslSnippets.rotate3D()}

${glslSnippets.modularDist()}

${motionToolkit.linearstep()}

${motionToolkit.linearstepUpDown()}

${motionToolkit.easeInOutCubic()}

float glow = 0.;

vec2 sceneSDF(vec3 p) {

//p.xz *= rot(easeInOutCubic(u_time) * TAU);

p = abs(p) - .5;

if(p.x < p.z) p.xz = p.zx;

if(p.y < p.z) p.yz = p.zy;

if(p.x < p.y) p.xy = p.yx;

float s = 4.5;

vec3 off = p * .5;

for(int i=0;i<12;i++){

p=1.-abs(p-1.);

float k=-1.1*max(1.5/dot(p,p),1.5);

s*=abs(k);

p*=k;

p+=off;

//p.zx*=rot(-1.15);

p.zx*=rot(-1.15 - easeInOutCubic(1. - u_time) * TAU);

}

float a=2.5;

p-=clamp(p,-a,a);

return vec2(length(p)/s, modularDist(length(p) * .5, NUM_COLORS));

}`,

computeColor: `

vec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float d, float m) {

if(d >= 40.) return vec3(${hexToRgb(palette[0]).join(',')})/255.;

vec3 nor = calcNormal(pos);

vec3 ref = reflect(rd, nor); // reflected ray

// material

vec3 col = texture2D(u_texture, vec2(m / NUM_COLORS, .5)).rgb;

// lighting

float occ = calcAO(pos, nor); // ambient occlusion

vec3 lig = normalize(vec3(-0.4, 0.7, -0.6)); // sunlight

float amb = clamp(0.5 + 0.5 * nor.y, 0.0, 1.0); // ambient light

float dif = clamp(dot(nor, lig), 0.0, 1.0); // diffuse reflection from sunlight

// backlight

float bac = clamp(dot(nor, normalize(vec3(-lig.x, 0.0, -lig.z))), 0.0, 1.0) * clamp(1.0 - pos.y, 0.0, 1.0);

float dom = smoothstep(-0.1, 0.1, ref.y); // dome light

float fre = pow(clamp(1.0 + dot(nor, rd), 0.0, 1.0), 2.0); // fresnel

float spe = pow(clamp(dot(ref, lig), 0.0, 1.0), 16.0); // specular reflection

dif *= softshadow(pos, lig, 0.02, 2.5);

dom *= softshadow(pos, ref, 0.02, 2.5);

vec3 lin = vec3(0.0);

lin += 1.30 * dif * vec3(1.00, 0.80, 0.55);

lin += 2.00 * spe * vec3(1.00, 0.90, 0.70) * dif;

lin += 0.40 * amb * vec3(0.40, 0.60, 1.00) * occ;

lin += 0.50 * dom * vec3(0.40, 0.60, 1.00) * occ;

lin += 0.50 * bac * vec3(0.25, 0.25, 0.25) * occ;

lin += 0.25 * fre * vec3(1.00, 1.00, 1.00) * occ;

col = col * lin;

// mix in fog?

// col = mix(col, vec3(0.8, 0.9, 1.0), 1.0 - exp(-0.0002 * d * d * d));

col = mix(col, vec3(0.), 1.0 - exp(-0.003 * d * d * d));

// gamma

col = pow(col, vec3(0.4545));

return col;

}`,

effect: `

vec3 effect(vec3 c) {

c += glow * texture2D(u_texture, vec2(1.5 / NUM_COLORS, .5)).rgb;

return c;

}

logShader: true

})

iqSDF

motionToolkit

glslSnippets

import {shuffle} from '@makio135/utilities'

import {getRandomPalette, displayPalettes, scales, ramp, hexToRgb} from '@makio135/give-me-colors'

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more