Skip to content

Instantly share code, notes, and snippets.

View robksawyer's full-sized avatar
🎯
Focusing

Rob Sawyer robksawyer

🎯
Focusing
View GitHub Profile
@robksawyer
robksawyer / CustomSessionStorage
Created May 31, 2024 14:04
This is a custom session storage that is supposed to work with Supabase and the PostgreSQLSessionStorage module.
import { Session } from "@shopify/shopify-api/dist/auth/session";
import { PostgreSQLSessionStorage } from "@shopify/shopify-app-session-storage-postgresql";
import { createClient } from "@supabase/supabase-js";
// Supabase client setup
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY;
if (!supabaseUrl || !supabaseKey) {
throw new Error("Missing Supabase URL or key");
@robksawyer
robksawyer / convertRequest.ts
Last active June 2, 2024 06:07
Shopify's authentication and utility libraries are designed to work with native Node.js IncomingMessage and ServerResponse objects. Since Next.js uses its own request and response objects, these conversions are necessary to bridge the gap. By implementing these conversion functions, you can ensure that your Next.js application seamlessly integra…
import { IncomingMessage } from "http";
import { NextRequest } from "next/server";
import { Socket } from "net";
import { cookies } from "next/headers";
export async function convertNextRequestToIncomingMessage(
request: NextRequest
): Promise<IncomingMessage> {
if (!request || typeof request !== "object") {
throw new Error("Invalid request object");
@robksawyer
robksawyer / custom_shader_example.js
Created November 18, 2022 11:58 — forked from oskarbraten/custom_shader_example.js
A three.js custom shader example
"use strict";
class MyCustomMaterial extends THREE.ShaderMaterial {
// constructor takes appropriate parameters.
// Default values using object destructuring (ES6)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
constructor({
color = 0xffffff,
emissive = 0x000000,
@robksawyer
robksawyer / random.jsx
Created November 16, 2022 16:07
Here's a clever/clean way to randomly position geometry.
function Noodle() {
const { viewport, camera } = useThree()
const { nodes } = useGLTF('/worms-transformed.glb')
const [geometry] = useState(() => nodes[`noodle_${Math.ceil(Math.random() * 4)}`].geometry)
const [speed] = useState(() => 0.1 + Math.random() / 10)
const position = useMemo(() => {
const z = Math.random() * -30
const bounds = viewport.getCurrentViewport(camera, [0, 0, z])
return [THREE.MathUtils.randFloatSpread(bounds.width), THREE.MathUtils.randFloatSpread(bounds.height * 0.75), z]
}, [viewport])
@robksawyer
robksawyer / useFont.js
Created November 4, 2022 01:01
Simple helper to load a font with React Three Fiber
import { FontLoader } from 'three-stdlib';
import { useLoader } from '@react-three/fiber';
export const useFont = (src) => {
return useLoader(FontLoader, src);
}
@robksawyer
robksawyer / useIsoLayoutEffect.js
Last active September 13, 2022 04:48
A hook for checking the scroll speed with smooth scrollbar.
/**
* @file useIsoLayoutEffect.js
* Hook to suppress useLayoutEffect error on SSR.
*/
import { useLayoutEffect, useEffect } from 'react';
const useIsoLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
import * as THREE from 'three';
(function () {
'use strict';
var root = this;
var has_require = typeof require !== 'undefined';
// var THREE = root.THREE || (has_require && require('three'));
@robksawyer
robksawyer / UnrealBloomPass.js
Created August 24, 2022 15:26
Unreal Bloom Pass with transparency.
import {
AdditiveBlending,
Color,
LinearFilter,
MeshBasicMaterial,
RGBAFormat,
ShaderMaterial,
Texture,
UniformsUtils,
Vector2,
@robksawyer
robksawyer / soap-bubble-frag.glsl
Created August 17, 2022 17:04
Soap bubble shader from http://otosatram.com/bubble.html (Bubbles on still soap (Blu blu))
precision highp float;
precision highp int;
#define SHADER_NAME ShaderMaterial
#define GAMMA_FACTOR 2
#define DOUBLE_SIDED
#define NUM_CLIPPING_PLANES 0
uniform mat4 viewMatrix;
uniform vec3 cameraPosition;
#define TONE_MAPPING
#define saturate(a) clamp( a, 0.0, 1.0 )
@robksawyer
robksawyer / rotation-example-slerp.js
Last active August 15, 2022 11:16
An example of how to convert Euler to Quaternions and use slerp for rotation.
// Rotations
const step = 'q1';
const cameraRotations = {
q1: {
x: 0.75,
y: 0,
z: 0,
},
q2A: {
x: -0,