Skip to content

Instantly share code, notes, and snippets.

View CodyJasonBennett's full-sized avatar

Cody Bennett CodyJasonBennett

698 followers · 0 following
View GitHub Profile
@CodyJasonBennett
CodyJasonBennett / worker.ts
Created May 28, 2025 07:09
WebGL2 OffscreenCanvas in a Worker
function createWorker(fn: Function): Worker {
const blob = new Blob([`(${fn})()`], { type: 'application/javascript' })
const uri = URL.createObjectURL(blob)
return new Worker(uri)
}
const worker = createWorker(() => {
function clientWaitAsync(
gl: WebGL2RenderingContext,
sync: WebGLSync,
@CodyJasonBennett
CodyJasonBennett / index.jsx
Last active March 7, 2023 07:12
react-dom with `style:hover="..."`
// https://twitter.com/Cody_J_Bennett/status/1633002580635799553
import * as React from 'react'
import Reconciler from 'react-reconciler'
import { DefaultEventPriority, ConcurrentRoot } from 'react-reconciler/constants.js'
function toString(styles) {
if (typeof styles === 'string') return styles
else if (styles === null || typeof styles !== 'object') return
let string = ''
@CodyJasonBennett
CodyJasonBennett / demo url
Created February 28, 2023 23:55
webgl fullscreen triangle
data:text/html,%3Cstyle%3E*%7Bmargin%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3Boverflow%3Ahidden%3B%7D%3C%2Fstyle%3E%3Cscript%20type%3Dmodule%3Econst%20n%3Ddocument.body.appendChild(document.createElement(%22canvas%22))%2Ce%3Dn.getContext(%22webgl2%22)%2Cc%3De.createShader(e.VERTEX_SHADER)%3Be.shaderSource(c%2C%22%23version%20300%20es%5Cnout%20vec2%20a%3Bconst%20vec2%20b%5B3%5D%3Dvec2%5B%5D(vec2(-1)%2Cvec2(3%2C-1)%2Cvec2(-1%2C3))%3Bconst%20vec2%20c%5B3%5D%3Dvec2%5B%5D(vec2(0)%2Cvec2(2%2C0)%2Cvec2(0%2C2))%3Bvoid%20main()%7Bgl_Position%3Dvec4(b%5Bgl_VertexID%5D%2C0%2C1)%3Ba%3Dc%5Bgl_VertexID%5D%3B%7D%22)%3Be.compileShader(c)%3Bconst%20r%3De.createShader(e.FRAGMENT_SHADER)%3Be.shaderSource(r%2C%22%23version%20300%20es%5Cnprecision%20lowp%20float%3Buniform%20float%20d%3Bin%20vec2%20a%3Bout%20vec4%20e%3Bvoid%20main()%7Be%3Dvec4(.3%2C.2%2C.5%2C1)%3Be.rgb%2B%3D.5%2B.3*cos(a.xyx%2Bd)%3B%7D%22)%3Be.compileShader(r)%3Bconst%20o%3De.createProgram()%3Be.attachShader(o%2Cc)%3Be.attachShader(o%2Cr)%3Be.linkProgram(o)%3Be.us
@CodyJasonBennett
CodyJasonBennett / index.js
Last active January 22, 2023 01:32
Proxy-wrap constructor side-effects
class CameraControls {
foo = { bar: true }
constructor(...args) {
console.log('impl construct', [...args])
}
dispose() {
console.log('impl disposed', this)
}
}
@CodyJasonBennett
CodyJasonBennett / cpu-3d.js
Last active December 15, 2022 13:01
Worley Noise Generation
import * as THREE from 'three'
import vertexShader from './shaders/vertex-shader.glsl'
import fragmentShader from './shaders/generator-shader.glsl'
export class WorleyNoiseAtlas extends THREE.Data3DTexture {
constructor(renderer) {
const camera = new THREE.OrthographicCamera()
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([-1, -1, 3, -1, -1, 3]), 2))
@CodyJasonBennett
CodyJasonBennett / index.html
Last active October 24, 2022 22:55
Holoplay WebXR FBO repro
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<style>
body {
margin: 0;
}
@CodyJasonBennett
CodyJasonBennett / polyfill.js
Created September 19, 2022 10:03
three WebGPU matrix polyfill test
function polyfills() {
THREE.Camera.prototype.clippingSpace = 'webgl'
THREE.PerspectiveCamera.prototype.updateProjectionMatrix = function() {
const near = this.near;
let top = near * Math.tan( THREE.MathUtils.DEG2RAD * 0.5 * this.fov ) / this.zoom;
let height = 2 * top;
let width = this.aspect * height;
@CodyJasonBennett
CodyJasonBennett / index.jsx
Last active September 21, 2022 13:20
R3F cross-container context
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import { render } from 'react-nil'
function traverseFiber(fiber, ascending, selector) {
if (selector(fiber) === true) return fiber
let child = ascending ? fiber.return : fiber.child
while (child) {
const match = traverseFiber(child, ascending, selector)
@CodyJasonBennett
CodyJasonBennett / index.js
Last active September 13, 2022 09:55
signals-react fix
import {
useRef,
useMemo,
// @ts-ignore-next-line
// eslint-disable-next-line @typescript-eslint/no-unused-vars
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as internals,
} from 'react'
import React from 'react'
import { signal, computed, batch, effect, Signal } from '@preact/signals-core'
@CodyJasonBennett
CodyJasonBennett / vite.config.ts
Last active August 13, 2022 17:35
vite - glslx webgl2
import * as vite from 'vite'
import * as path from 'path'
import * as fs from 'fs'
// @ts-ignore
import glslx from 'glslx'
export default vite.defineConfig(({ command }) => ({
build: {
target: 'esnext',
polyfillModulePreload: false,