supahfunk

const Background = () => {
  const { viewport } = useThree()
  const scale = useMemo(() => ((40 + 15) / viewport.distance), [viewport])
  const [bgTexture] = useTexture(['./bg.png'])

  const shaderArgs = useMemo(() => ({
    uniforms: {
      uTexture: { value: bgTexture },
      uResolution: { value: { x: viewport.width, y: viewport.height } },
      uImageRegsolution: { value: { x: bgTexture.image.width, y: bgTexture.image.height } },

supahfunk

const vertexShader = /* glsl */`
  uniform float uTime;
  varying vec3 vPos;
  varying vec2 vUv;
  #define PI 3.14159265

  void main() {
    vec3 pos = position;
    vPos = pos;
    vUv = uv;

supahfunk

export const mapRange = (num, inMin, inMax, outMin, outMax) => {
  return (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin
}

export const newMapRange = (value, rangeA, rangeB, limit) => {
  if (limit == null) {
    limit = false; // eslint-disable-line
  }
  const [fromLow, fromHigh] = Array.from(rangeA)
  const [toLow, toHigh] = Array.from(rangeB)

supahfunk

vec3 rotateAxis(vec3 p, vec3 axis, float angle) {
  return mix(dot(axis, p)*axis, p, cos(angle)) + cross(axis,p)*sin(angle);
}

// pos = rotateAxis(pos, vec3(1., 0., 0.), PI * .5); // => Rotate X Axis 180deg

supahfunk

:root {
  --ease-in-quad:       cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart:      cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint:      cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo:       cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ:       cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic:     cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart:     cubic-bezier(0.165, 0.84, 0.44, 1);

supahfunk

/**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 * @author erich666 / http://erichaines.com
 */

// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).

supahfunk

{"lastUpload":"2021-04-16T19:22:17.345Z","extensionVersion":"v3.4.3"}

supahfunk

vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, -s, s, c);
	return m * v;
}

supahfunk

// bezier curve with 2 control points
// A is the starting point, B, C are the control points, D is the destination
// t from 0 ~ 1
vec3 bezier(vec3 A, vec3 B, vec3 C, vec3 D, float t) {
  vec3 E = mix(A, B, t);
  vec3 F = mix(B, C, t);
  vec3 G = mix(C, D, t);

  vec3 H = mix(E, F, t);
  vec3 I = mix(F, G, t);

supahfunk

vec3 align(vec3 pos, vec3 dir) {
    vec3 initDir = vec3(1.0, 0.0, 0.0);
    vec3 axis = cross(dir, initDir);
    float angle = acos(dot(dir, initDir));
    return rotate(pos, axis, angle);
}