dghez

#version 300 es

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 outColor;

dghez

{
  "env": {
    "browser": true,
    "node": true,
  },
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "extends": [
    "airbnb",

dghez

import React, { useEffect } from 'react'
import gsap from 'gsap'
import { useFrame } from '@react-three/fiber'

// sync gsap raf to r3f raf
gsap.ticker.remove(gsap.updateRoot)

export const GsapTicker = () => {
  const pg = React.useRef(0)
  gsap.ticker.remove(gsap.updateRoot)

dghez

this.geometry = new BufferGeometry()
const vertices = new Float32Array([
  -1.0, -1.0,
  3.0, -1.0,
  -1.0, 3.0,
])

const uvs = new Float32Array([0, 0, 2, 0, 0, 2])

this.geometry.setAttribute('uv', new BufferAttribute(uvs, 2))

dghez

// inspired by https://github.com/jamieowen/three-material-modifier
// Kudos jam3
// typescript, need to convert to js soon

import { UniformsUtils, IUniform } from 'three';

export type Shader = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  uniforms: { [uniform: string]: IUniform<any> };
  vertexShader: string;

dghez

import * as THREE from "three"

// credits for the box-projecting shader code go to codercat (https://codercat.tk)

const worldposReplace = /* glsl */`
#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
    vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );

    #ifdef BOX_PROJECTED_ENV_MAP
        vWorldPosition = worldPosition.xyz;

dghez

checkPerf() {
    // performance test based on cpu performance
    // higher score means worse performance
    // based on Baptiste Briel's work: http://awams.bbriel.me/27
    // Copied from: https://gist.github.com/martinlaxenaire/27cf27f043ec5ce423ce165e283fc19a
    let perf = 0;

    const start = (performance || Date).now();
    let array = [];
    for(let i = 0; i < 20000; i++) {

dghez

// An implementation of CSS `background-size: cover`
// using http://stackoverflow.com/a/6565988
vec2 s = uScreenSize; // Screen
vec2 i = uBGSize; // Image
float rs = s.x / s.y;
float ri = i.x / i.y;
vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
vec2 uv = vTexCoord * s / new + offset;
gl_FragColor = texture2D(uBGTex, uv);

dghez

import RN from 'random-number';

let rand = RN.generator();

let randInt = (min, max) => {
  return rand(min, max, true);
};

let randFloat = (min, max) => {
  return rand(min, max, false);

dghez

mat4 rotationMatrix(vec3 axis, float angle) {
    axis = normalize(axis);
    float s = sin(angle);
    float c = cos(angle);
    float oc = 1.0 - c;
    
    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
                oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
                oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
                0.0,                                0.0,                                0.0,                                1.0);