@typegpu/three 0.9.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Software Mansion <swmansion.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+<div align="center">
+
+# @typegpu/three
+
+🚧 **Under Construction** 🚧
+
+</div>
+
+A helper library for using TypeGPU with Three.js.
+
+```ts
+import * as TSL from 'three/tsl';
+import * as t3 from '@typegpu/three';
+import { fract } from 'typegpu/std';
+
+const material1 = new THREE.MeshBasicNodeMaterial();
+const pattern = TSL.texture(detailMap, TSL.uv().mul(10));
+// `fromTSL` can be used to access any TSL node from a TypeGPU function
+const patternAccess = t3.fromTSL(pattern, d.vec4f);
+material1.colorNode = t3.toTSL(() => {
+  'use gpu';
+  return patternAccess.$;
+});
+
+const material2 = new THREE.MeshBasicNodeMaterial();
+material2.colorNode = t3.toTSL(() => {
+  'use gpu';
+  // Many builtin TSL nodes are already reexported as `accessors`
+  const uv = t3.uv().$;
+
+  if (uv.x < 0.5) {
+    return d.vec4f(fract(uv.mul(4)), 0, 1);
+  }
+
+  return d.vec4f(1, 0, 0, 1);
+});
+```

package/index.cjs

@@ -0,0 +1,283 @@
+'use strict';
+
+const TSL = require('three/tsl');
+const tgpu = require('typegpu');
+const d = require('typegpu/data');
+const THREE = require('three/webgpu');
+const WGSLNodeBuilder = require('three/src/renderers/webgpu/nodes/WGSLNodeBuilder.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const TSL__namespace = /*#__PURE__*/_interopNamespaceCompat(TSL);
+const tgpu__default = /*#__PURE__*/_interopDefaultCompat(tgpu);
+const d__namespace = /*#__PURE__*/_interopNamespaceCompat(d);
+const THREE__namespace = /*#__PURE__*/_interopNamespaceCompat(THREE);
+const WGSLNodeBuilder__default = /*#__PURE__*/_interopDefaultCompat(WGSLNodeBuilder);
+
+class StageData {
+  stage;
+  names;
+  namespace;
+  codeGeneratedThusFar;
+  constructor(stage) {
+    this.stage = stage;
+    this.names = /* @__PURE__ */ new WeakMap();
+    this.namespace = tgpu__default["~unstable"].namespace();
+    this.codeGeneratedThusFar = "";
+    this.namespace.on("name", (event) => {
+      if (tgpu.isVariable(event.target)) {
+        this.names.set(event.target, event.name);
+      }
+    });
+  }
+}
+class BuilderData {
+  stageDataMap;
+  constructor() {
+    this.stageDataMap = /* @__PURE__ */ new Map();
+  }
+  getStageData(stage) {
+    let stageData = this.stageDataMap.get(stage);
+    if (!stageData) {
+      stageData = new StageData(stage);
+      this.stageDataMap.set(stage, stageData);
+    }
+    return stageData;
+  }
+}
+const builderDataMap = /* @__PURE__ */ new WeakMap();
+let currentlyGeneratingFnNodeCtx;
+function forceExplicitVoidReturn(codeIn) {
+  if (codeIn.includes("->")) {
+    return codeIn;
+  }
+  const closingParen = codeIn.indexOf(")");
+  if (closingParen === -1) {
+    throw new Error("Invalid code: missing closing parenthesis");
+  }
+  return codeIn.substring(0, closingParen + 1) + "-> void" + codeIn.substring(closingParen + 1);
+}
+class TgpuFnNode extends THREE__namespace.Node {
+  #impl;
+  constructor(impl) {
+    super("typegpu-fn-node");
+    this.#impl = impl;
+    this.global = true;
+  }
+  static get type() {
+    return "TgpuFnNode";
+  }
+  getNodeType(builder) {
+    return this.#getNodeFunction(builder).type;
+  }
+  #getNodeFunction(builder) {
+    const nodeData = builder.getDataFromNode(this);
+    let builderData = builderDataMap.get(builder);
+    if (!builderData) {
+      builderData = new BuilderData();
+      builderDataMap.set(builder, builderData);
+    }
+    const stageData = builderData.getStageData(builder.shaderStage);
+    if (!nodeData.custom) {
+      if (currentlyGeneratingFnNodeCtx !== void 0) {
+        console.warn("[@typegpu/three] Nested function generation detected");
+      }
+      const ctx = {
+        builder,
+        stageData,
+        dependencies: []
+      };
+      currentlyGeneratingFnNodeCtx = ctx;
+      let resolved;
+      try {
+        resolved = tgpu__default.resolve({
+          names: stageData.namespace,
+          template: "___ID___ fnName",
+          externals: { fnName: this.#impl }
+        });
+      } finally {
+        currentlyGeneratingFnNodeCtx = void 0;
+      }
+      const [code = "", functionId] = resolved.split("___ID___").map(
+        (s) => s.trim()
+      );
+      stageData.codeGeneratedThusFar += code;
+      let lastFnStart = stageData.codeGeneratedThusFar.indexOf(
+        `
+fn ${functionId}`
+      );
+      if (lastFnStart === -1) {
+        lastFnStart = 0;
+      }
+      const fnCode = stageData.codeGeneratedThusFar.slice(lastFnStart).trim();
+      nodeData.custom = {
+        functionId: functionId ?? "",
+        nodeFunction: builder.parser.parseFunction(
+          // TODO: Upstream a fix to Three.js that accepts functions with no return type
+          forceExplicitVoidReturn(fnCode)
+        ),
+        // Including code that was resolved before the function as another node
+        // that this node depends on
+        priorCode: TSL__namespace.code(code),
+        dependencies: ctx.dependencies
+      };
+    }
+    return nodeData.custom.nodeFunction;
+  }
+  generate(builder, output) {
+    this.#getNodeFunction(builder);
+    const nodeData = builder.getDataFromNode(this);
+    const builderData = builderDataMap.get(builder);
+    const stageData = builderData.getStageData(builder.shaderStage);
+    for (const dep of nodeData.custom.dependencies) {
+      dep.node.build(builder);
+    }
+    nodeData.custom.priorCode.build(builder);
+    for (const dep of nodeData.custom.dependencies) {
+      if (!dep.var) {
+        continue;
+      }
+      const varName = stageData.names.get(dep.var);
+      const varValue = dep.node.build(builder);
+      builder.addLineFlowCode(`${varName} = ${varValue};
+`, this);
+    }
+    if (output === "property") {
+      return nodeData.custom.functionId;
+    }
+    return `${nodeData.custom.functionId}()`;
+  }
+}
+function toTSL(fn) {
+  return TSL__namespace.nodeObject(new TgpuFnNode(fn));
+}
+class TSLAccessor {
+  #dataType;
+  var;
+  node;
+  constructor(node, dataType) {
+    this.node = node;
+    this.#dataType = dataType;
+    if (
+      // @ts-expect-error: The properties exist on the node
+      !node.isStorageBufferNode && !node.isUniformNode || node.isTextureNode
+    ) {
+      this.var = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu__default.privateVar(dataType), "var"));
+    }
+  }
+  get $() {
+    const ctx = currentlyGeneratingFnNodeCtx;
+    if (!ctx) {
+      throw new Error("Can only access TSL nodes on the GPU.");
+    }
+    ctx.dependencies.push(this);
+    if (this.var) {
+      return this.var.$;
+    }
+    return tgpu__default["~unstable"].rawCodeSnippet(
+      this.node.build(ctx.builder),
+      this.#dataType
+    ).$;
+  }
+}
+const typeMap = {
+  "f": "f32",
+  "h": "f16",
+  "i": "i32",
+  "u": "u32",
+  "b": "bool"
+};
+function convertTypeToExplicit(type) {
+  if (type.startsWith("vec") && type.indexOf("<") === -1) {
+    const itemCount = type.charAt(3);
+    const itemType = typeMap[type.charAt(4)];
+    return `vec${itemCount}<${itemType}>`;
+  }
+  if (type.startsWith("mat") && type.indexOf("<") === -1) {
+    const itemCount = type.charAt(3);
+    const itemType = typeMap[type.charAt(6)];
+    return `mat${itemCount}x${itemCount}<${itemType}>`;
+  }
+  return type;
+}
+let sharedBuilder;
+const fromTSL = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu__default["~unstable"].comptime((node, type) => {
+  const tgpuType = d__namespace.isData(type) ? type : type(0);
+  const wgslTypeFromTgpu = convertTypeToExplicit(
+    `${d__namespace.isWgslArray(tgpuType) ? tgpuType.elementType : tgpuType}`
+  );
+  if (!sharedBuilder) {
+    sharedBuilder = new WGSLNodeBuilder__default();
+  }
+  const nodeType = node.getNodeType(sharedBuilder);
+  if (nodeType) {
+    const wgslTypeFromTSL = sharedBuilder.getType(nodeType);
+    if (wgslTypeFromTSL !== wgslTypeFromTgpu) {
+      const vec4warn = wgslTypeFromTSL.startsWith("vec4") ? " Sometimes three.js promotes elements in arrays to align to 16 bytes." : "";
+      console.warn(
+        `Suspected type mismatch between TSL type '${wgslTypeFromTSL}' (originally '${nodeType}') and TypeGPU type '${wgslTypeFromTgpu}'.${vec4warn}`
+      );
+    }
+  }
+  return new TSLAccessor(node, tgpuType);
+}), "fromTSL"));
+
+const uv = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu__default["~unstable"].comptime(
+  (index) => fromTSL(TSL__namespace.uv(index), d__namespace.vec2f)
+), "uv"));
+const time = fromTSL(TSL__namespace.time, d__namespace.f32);
+const instanceIndex = fromTSL(TSL__namespace.instanceIndex, d__namespace.u32);
+const vertexIndex = fromTSL(TSL__namespace.vertexIndex, d__namespace.u32);
+
+const wgslTypeToGlslType = {
+  u32: "uint",
+  i32: "int",
+  f32: "float",
+  vec2u: "uvec2",
+  vec2i: "ivec2",
+  vec2f: "vec2",
+  vec3u: "uvec3",
+  vec3i: "ivec3",
+  vec3f: "vec3",
+  vec4u: "uvec4",
+  vec4i: "ivec4",
+  vec4f: "vec4"
+};
+
+function uniform(value, dataType) {
+  let glslType = wgslTypeToGlslType[dataType.type];
+  if (value.isNode) {
+    glslType = void 0;
+  }
+  return fromTSL(TSL.uniform(value, glslType), dataType);
+}
+function uniformArray(values, elementType) {
+  return fromTSL(TSL.uniformArray(values), d__namespace.arrayOf(elementType));
+}
+
+function instancedArray(count, elementType) {
+  const glslType = wgslTypeToGlslType[elementType.type];
+  return fromTSL(TSL.instancedArray(count, glslType), d__namespace.arrayOf(elementType));
+}
+
+exports.fromTSL = fromTSL;
+exports.instanceIndex = instanceIndex;
+exports.instancedArray = instancedArray;
+exports.time = time;
+exports.toTSL = toTSL;
+exports.uniform = uniform;
+exports.uniformArray = uniformArray;
+exports.uv = uv;
+exports.vertexIndex = vertexIndex;

package/index.d.cts

@@ -0,0 +1,54 @@
+import * as typegpu from 'typegpu';
+import { TgpuVar } from 'typegpu';
+import * as THREE from 'three/webgpu';
+import { UniformNode, UniformArrayNode, TypedArray, StorageBufferNode } from 'three/webgpu';
+import * as d from 'typegpu/data';
+import InputNode from 'three/src/nodes/core/InputNode.js';
+
+declare function toTSL(fn: () => unknown): THREE.TSL.NodeObject<THREE.Node>;
+declare class TSLAccessor<T extends d.AnyWgslData, TNode extends THREE.Node> {
+    #private;
+    readonly var: TgpuVar<'private', T> | undefined;
+    readonly node: THREE.TSL.NodeObject<TNode>;
+    constructor(node: THREE.TSL.NodeObject<TNode>, dataType: T);
+    get $(): d.InferGPU<T>;
+}
+declare const fromTSL: typegpu.TgpuComptime<(<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: (length: number) => T) => TSLAccessor<T, TNode>) & (<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: T) => TSLAccessor<T, TNode>)>;
+
+declare const uv: typegpu.TgpuComptime<(index?: number | undefined) => TSLAccessor<d.Vec2f, THREE.AttributeNode>>;
+declare const time: TSLAccessor<d.F32, THREE.Node>;
+declare const instanceIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+declare const vertexIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(uniform(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const attractorsLength = t3.uniform(attractorsPositions.array.length, d.u32);
+ * // Equivalent to:
+ * // const attractorsLength = t3.fromTSL(
+ * //   uniform(attractorsPositions.array.length, 'uint'),
+ * //   d.u32,
+ * // );
+ * ```
+ */
+declare function uniform<TValue, TDataType extends d.AnyWgslData>(value: TValue | InputNode<TValue>, dataType: TDataType): TSLAccessor<TDataType, UniformNode<TValue>>;
+declare function uniformArray<TDataType extends d.AnyWgslData>(values: unknown[], elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, UniformArrayNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(instancedArray(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const velocityBuffer = t3.instancedArray(count, d.vec3f);
+ * // Equivalent to:
+ * // const velocityBuffer = t3.fromTSL(
+ * //   instancedArray(count, 'vec3'),
+ * //   d.arrayOf(d.vec3f),
+ * // );
+ * ```
+ */
+declare function instancedArray<TDataType extends d.AnyWgslData>(count: number | TypedArray, elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, StorageBufferNode>;
+
+export { TSLAccessor, fromTSL, instanceIndex, instancedArray, time, toTSL, uniform, uniformArray, uv, vertexIndex };

package/index.d.mts

@@ -0,0 +1,54 @@
+import * as typegpu from 'typegpu';
+import { TgpuVar } from 'typegpu';
+import * as THREE from 'three/webgpu';
+import { UniformNode, UniformArrayNode, TypedArray, StorageBufferNode } from 'three/webgpu';
+import * as d from 'typegpu/data';
+import InputNode from 'three/src/nodes/core/InputNode.js';
+
+declare function toTSL(fn: () => unknown): THREE.TSL.NodeObject<THREE.Node>;
+declare class TSLAccessor<T extends d.AnyWgslData, TNode extends THREE.Node> {
+    #private;
+    readonly var: TgpuVar<'private', T> | undefined;
+    readonly node: THREE.TSL.NodeObject<TNode>;
+    constructor(node: THREE.TSL.NodeObject<TNode>, dataType: T);
+    get $(): d.InferGPU<T>;
+}
+declare const fromTSL: typegpu.TgpuComptime<(<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: (length: number) => T) => TSLAccessor<T, TNode>) & (<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: T) => TSLAccessor<T, TNode>)>;
+
+declare const uv: typegpu.TgpuComptime<(index?: number | undefined) => TSLAccessor<d.Vec2f, THREE.AttributeNode>>;
+declare const time: TSLAccessor<d.F32, THREE.Node>;
+declare const instanceIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+declare const vertexIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(uniform(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const attractorsLength = t3.uniform(attractorsPositions.array.length, d.u32);
+ * // Equivalent to:
+ * // const attractorsLength = t3.fromTSL(
+ * //   uniform(attractorsPositions.array.length, 'uint'),
+ * //   d.u32,
+ * // );
+ * ```
+ */
+declare function uniform<TValue, TDataType extends d.AnyWgslData>(value: TValue | InputNode<TValue>, dataType: TDataType): TSLAccessor<TDataType, UniformNode<TValue>>;
+declare function uniformArray<TDataType extends d.AnyWgslData>(values: unknown[], elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, UniformArrayNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(instancedArray(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const velocityBuffer = t3.instancedArray(count, d.vec3f);
+ * // Equivalent to:
+ * // const velocityBuffer = t3.fromTSL(
+ * //   instancedArray(count, 'vec3'),
+ * //   d.arrayOf(d.vec3f),
+ * // );
+ * ```
+ */
+declare function instancedArray<TDataType extends d.AnyWgslData>(count: number | TypedArray, elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, StorageBufferNode>;
+
+export { TSLAccessor, fromTSL, instanceIndex, instancedArray, time, toTSL, uniform, uniformArray, uv, vertexIndex };

package/index.d.ts

@@ -0,0 +1,54 @@
+import * as typegpu from 'typegpu';
+import { TgpuVar } from 'typegpu';
+import * as THREE from 'three/webgpu';
+import { UniformNode, UniformArrayNode, TypedArray, StorageBufferNode } from 'three/webgpu';
+import * as d from 'typegpu/data';
+import InputNode from 'three/src/nodes/core/InputNode.js';
+
+declare function toTSL(fn: () => unknown): THREE.TSL.NodeObject<THREE.Node>;
+declare class TSLAccessor<T extends d.AnyWgslData, TNode extends THREE.Node> {
+    #private;
+    readonly var: TgpuVar<'private', T> | undefined;
+    readonly node: THREE.TSL.NodeObject<TNode>;
+    constructor(node: THREE.TSL.NodeObject<TNode>, dataType: T);
+    get $(): d.InferGPU<T>;
+}
+declare const fromTSL: typegpu.TgpuComptime<(<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: (length: number) => T) => TSLAccessor<T, TNode>) & (<T extends d.AnyWgslData, TNode extends THREE.Node>(node: THREE.TSL.NodeObject<TNode>, type: T) => TSLAccessor<T, TNode>)>;
+
+declare const uv: typegpu.TgpuComptime<(index?: number | undefined) => TSLAccessor<d.Vec2f, THREE.AttributeNode>>;
+declare const time: TSLAccessor<d.F32, THREE.Node>;
+declare const instanceIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+declare const vertexIndex: TSLAccessor<d.U32, THREE.IndexNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(uniform(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const attractorsLength = t3.uniform(attractorsPositions.array.length, d.u32);
+ * // Equivalent to:
+ * // const attractorsLength = t3.fromTSL(
+ * //   uniform(attractorsPositions.array.length, 'uint'),
+ * //   d.u32,
+ * // );
+ * ```
+ */
+declare function uniform<TValue, TDataType extends d.AnyWgslData>(value: TValue | InputNode<TValue>, dataType: TDataType): TSLAccessor<TDataType, UniformNode<TValue>>;
+declare function uniformArray<TDataType extends d.AnyWgslData>(values: unknown[], elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, UniformArrayNode>;
+
+/**
+ * Shorthand for `t3.fromTSL(instancedArray(...), ...)`
+ *
+ * @example
+ * ```ts
+ * const velocityBuffer = t3.instancedArray(count, d.vec3f);
+ * // Equivalent to:
+ * // const velocityBuffer = t3.fromTSL(
+ * //   instancedArray(count, 'vec3'),
+ * //   d.arrayOf(d.vec3f),
+ * // );
+ * ```
+ */
+declare function instancedArray<TDataType extends d.AnyWgslData>(count: number | TypedArray, elementType: TDataType): TSLAccessor<d.WgslArray<TDataType>, StorageBufferNode>;
+
+export { TSLAccessor, fromTSL, instanceIndex, instancedArray, time, toTSL, uniform, uniformArray, uv, vertexIndex };

package/index.mjs

@@ -0,0 +1,254 @@
+import * as TSL from 'three/tsl';
+import { uniform as uniform$1, uniformArray as uniformArray$1, instancedArray as instancedArray$1 } from 'three/tsl';
+import tgpu, { isVariable } from 'typegpu';
+import * as d from 'typegpu/data';
+import * as THREE from 'three/webgpu';
+import WGSLNodeBuilder from 'three/src/renderers/webgpu/nodes/WGSLNodeBuilder.js';
+
+class StageData {
+  stage;
+  names;
+  namespace;
+  codeGeneratedThusFar;
+  constructor(stage) {
+    this.stage = stage;
+    this.names = /* @__PURE__ */ new WeakMap();
+    this.namespace = tgpu["~unstable"].namespace();
+    this.codeGeneratedThusFar = "";
+    this.namespace.on("name", (event) => {
+      if (isVariable(event.target)) {
+        this.names.set(event.target, event.name);
+      }
+    });
+  }
+}
+class BuilderData {
+  stageDataMap;
+  constructor() {
+    this.stageDataMap = /* @__PURE__ */ new Map();
+  }
+  getStageData(stage) {
+    let stageData = this.stageDataMap.get(stage);
+    if (!stageData) {
+      stageData = new StageData(stage);
+      this.stageDataMap.set(stage, stageData);
+    }
+    return stageData;
+  }
+}
+const builderDataMap = /* @__PURE__ */ new WeakMap();
+let currentlyGeneratingFnNodeCtx;
+function forceExplicitVoidReturn(codeIn) {
+  if (codeIn.includes("->")) {
+    return codeIn;
+  }
+  const closingParen = codeIn.indexOf(")");
+  if (closingParen === -1) {
+    throw new Error("Invalid code: missing closing parenthesis");
+  }
+  return codeIn.substring(0, closingParen + 1) + "-> void" + codeIn.substring(closingParen + 1);
+}
+class TgpuFnNode extends THREE.Node {
+  #impl;
+  constructor(impl) {
+    super("typegpu-fn-node");
+    this.#impl = impl;
+    this.global = true;
+  }
+  static get type() {
+    return "TgpuFnNode";
+  }
+  getNodeType(builder) {
+    return this.#getNodeFunction(builder).type;
+  }
+  #getNodeFunction(builder) {
+    const nodeData = builder.getDataFromNode(this);
+    let builderData = builderDataMap.get(builder);
+    if (!builderData) {
+      builderData = new BuilderData();
+      builderDataMap.set(builder, builderData);
+    }
+    const stageData = builderData.getStageData(builder.shaderStage);
+    if (!nodeData.custom) {
+      if (currentlyGeneratingFnNodeCtx !== void 0) {
+        console.warn("[@typegpu/three] Nested function generation detected");
+      }
+      const ctx = {
+        builder,
+        stageData,
+        dependencies: []
+      };
+      currentlyGeneratingFnNodeCtx = ctx;
+      let resolved;
+      try {
+        resolved = tgpu.resolve({
+          names: stageData.namespace,
+          template: "___ID___ fnName",
+          externals: { fnName: this.#impl }
+        });
+      } finally {
+        currentlyGeneratingFnNodeCtx = void 0;
+      }
+      const [code = "", functionId] = resolved.split("___ID___").map(
+        (s) => s.trim()
+      );
+      stageData.codeGeneratedThusFar += code;
+      let lastFnStart = stageData.codeGeneratedThusFar.indexOf(
+        `
+fn ${functionId}`
+      );
+      if (lastFnStart === -1) {
+        lastFnStart = 0;
+      }
+      const fnCode = stageData.codeGeneratedThusFar.slice(lastFnStart).trim();
+      nodeData.custom = {
+        functionId: functionId ?? "",
+        nodeFunction: builder.parser.parseFunction(
+          // TODO: Upstream a fix to Three.js that accepts functions with no return type
+          forceExplicitVoidReturn(fnCode)
+        ),
+        // Including code that was resolved before the function as another node
+        // that this node depends on
+        priorCode: TSL.code(code),
+        dependencies: ctx.dependencies
+      };
+    }
+    return nodeData.custom.nodeFunction;
+  }
+  generate(builder, output) {
+    this.#getNodeFunction(builder);
+    const nodeData = builder.getDataFromNode(this);
+    const builderData = builderDataMap.get(builder);
+    const stageData = builderData.getStageData(builder.shaderStage);
+    for (const dep of nodeData.custom.dependencies) {
+      dep.node.build(builder);
+    }
+    nodeData.custom.priorCode.build(builder);
+    for (const dep of nodeData.custom.dependencies) {
+      if (!dep.var) {
+        continue;
+      }
+      const varName = stageData.names.get(dep.var);
+      const varValue = dep.node.build(builder);
+      builder.addLineFlowCode(`${varName} = ${varValue};
+`, this);
+    }
+    if (output === "property") {
+      return nodeData.custom.functionId;
+    }
+    return `${nodeData.custom.functionId}()`;
+  }
+}
+function toTSL(fn) {
+  return TSL.nodeObject(new TgpuFnNode(fn));
+}
+class TSLAccessor {
+  #dataType;
+  var;
+  node;
+  constructor(node, dataType) {
+    this.node = node;
+    this.#dataType = dataType;
+    if (
+      // @ts-expect-error: The properties exist on the node
+      !node.isStorageBufferNode && !node.isUniformNode || node.isTextureNode
+    ) {
+      this.var = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu.privateVar(dataType), "var"));
+    }
+  }
+  get $() {
+    const ctx = currentlyGeneratingFnNodeCtx;
+    if (!ctx) {
+      throw new Error("Can only access TSL nodes on the GPU.");
+    }
+    ctx.dependencies.push(this);
+    if (this.var) {
+      return this.var.$;
+    }
+    return tgpu["~unstable"].rawCodeSnippet(
+      this.node.build(ctx.builder),
+      this.#dataType
+    ).$;
+  }
+}
+const typeMap = {
+  "f": "f32",
+  "h": "f16",
+  "i": "i32",
+  "u": "u32",
+  "b": "bool"
+};
+function convertTypeToExplicit(type) {
+  if (type.startsWith("vec") && type.indexOf("<") === -1) {
+    const itemCount = type.charAt(3);
+    const itemType = typeMap[type.charAt(4)];
+    return `vec${itemCount}<${itemType}>`;
+  }
+  if (type.startsWith("mat") && type.indexOf("<") === -1) {
+    const itemCount = type.charAt(3);
+    const itemType = typeMap[type.charAt(6)];
+    return `mat${itemCount}x${itemCount}<${itemType}>`;
+  }
+  return type;
+}
+let sharedBuilder;
+const fromTSL = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu["~unstable"].comptime((node, type) => {
+  const tgpuType = d.isData(type) ? type : type(0);
+  const wgslTypeFromTgpu = convertTypeToExplicit(
+    `${d.isWgslArray(tgpuType) ? tgpuType.elementType : tgpuType}`
+  );
+  if (!sharedBuilder) {
+    sharedBuilder = new WGSLNodeBuilder();
+  }
+  const nodeType = node.getNodeType(sharedBuilder);
+  if (nodeType) {
+    const wgslTypeFromTSL = sharedBuilder.getType(nodeType);
+    if (wgslTypeFromTSL !== wgslTypeFromTgpu) {
+      const vec4warn = wgslTypeFromTSL.startsWith("vec4") ? " Sometimes three.js promotes elements in arrays to align to 16 bytes." : "";
+      console.warn(
+        `Suspected type mismatch between TSL type '${wgslTypeFromTSL}' (originally '${nodeType}') and TypeGPU type '${wgslTypeFromTgpu}'.${vec4warn}`
+      );
+    }
+  }
+  return new TSLAccessor(node, tgpuType);
+}), "fromTSL"));
+
+const uv = ((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(tgpu["~unstable"].comptime(
+  (index) => fromTSL(TSL.uv(index), d.vec2f)
+), "uv"));
+const time = fromTSL(TSL.time, d.f32);
+const instanceIndex = fromTSL(TSL.instanceIndex, d.u32);
+const vertexIndex = fromTSL(TSL.vertexIndex, d.u32);
+
+const wgslTypeToGlslType = {
+  u32: "uint",
+  i32: "int",
+  f32: "float",
+  vec2u: "uvec2",
+  vec2i: "ivec2",
+  vec2f: "vec2",
+  vec3u: "uvec3",
+  vec3i: "ivec3",
+  vec3f: "vec3",
+  vec4u: "uvec4",
+  vec4i: "ivec4",
+  vec4f: "vec4"
+};
+
+function uniform(value, dataType) {
+  let glslType = wgslTypeToGlslType[dataType.type];
+  if (value.isNode) {
+    glslType = void 0;
+  }
+  return fromTSL(uniform$1(value, glslType), dataType);
+}
+function uniformArray(values, elementType) {
+  return fromTSL(uniformArray$1(values), d.arrayOf(elementType));
+}
+
+function instancedArray(count, elementType) {
+  const glslType = wgslTypeToGlslType[elementType.type];
+  return fromTSL(instancedArray$1(count, glslType), d.arrayOf(elementType));
+}
+
+export { fromTSL, instanceIndex, instancedArray, time, toTSL, uniform, uniformArray, uv, vertexIndex };

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@typegpu/three",
+  "type": "module",
+  "version": "0.9.0",
+  "description": "Utilities for integrating TypeGPU with Three.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "module": "./index.mjs",
+      "import": "./index.mjs",
+      "default": "./index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "license": "MIT",
+  "peerDependencies": {
+    "typegpu": "^0.9.0",
+    "three": ">0.126.0"
+  },
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "private": false,
+  "dependencies": {},
+  "scripts": {}
+}