glre 0.38.0 → 0.40.0

package/src/addons/color/space/rgb2cmyk.ts

@@ -0,0 +1,13 @@
+import { Fn, Vec3, Vec4, float, vec4, step } from '../../../node'
+import { mmin3 } from '../../math/mmin'
+
+export const rgb2cmyk = Fn(([rgb]: [Vec3]): Vec4 => {
+        const k = mmin3(float(1).sub(rgb)).toVar()
+        const invK = float(1).sub(k).toVar()
+        const cmy = float(1).sub(rgb).sub(k).div(invK).mul(step(0, invK)).toVar()
+        return vec4(cmy, k).saturate()
+}).setLayout({
+        name: 'rgb2cmyk',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})

package/src/addons/color/space/rgb2hcv.ts

@@ -0,0 +1,29 @@
+import { Fn, Vec3, Vec4, float, vec3, vec4, select } from '../../../node'
+
+const HCV_EPSILON = float('1e-10').constant()
+
+export const rgb2hcv = Fn(([rgb]: [Vec3]): Vec3 => {
+        const P_true = vec4(rgb.b, rgb.g, -1, float(2).div(3)).toVar()
+        const P_false = vec4(rgb.g, rgb.b, 0, float(-1).div(3)).toVar()
+        const P_final = select(P_true, P_false, rgb.g.lessThan(rgb.b)).toVar()
+
+        const Q_true = vec4(P_final.x, P_final.y, P_final.w, rgb.r).toVar()
+        const Q_false = vec4(rgb.r, P_final.y, P_final.z, P_final.x).toVar()
+        const Q_final = select(Q_true, Q_false, rgb.r.lessThan(P_final.x)).toVar()
+
+        const C = Q_final.x.sub(Q_final.w.min(Q_final.y)).toVar()
+        const H = Q_final.w.sub(Q_final.y).div(float(6).mul(C).add(HCV_EPSILON)).add(Q_final.z).abs().toVar()
+        return vec3(H, C, Q_final.x)
+}).setLayout({
+        name: 'rgb2hcv',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2hcvVec4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        return vec4(rgb2hcv(rgb.xyz), rgb.w)
+}).setLayout({
+        name: 'rgb2hcvVec4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2hsl.ts

@@ -0,0 +1,23 @@
+import { Fn, Vec3, Vec4, float, vec3, vec4 } from '../../../node'
+import { rgb2hcv } from './rgb2hcv'
+
+const HSL_EPSILON = float('1e-10')
+
+export const rgb2hsl = Fn(([rgb]: [Vec3]): Vec3 => {
+        const HCV = rgb2hcv(rgb).toVar()
+        const L = HCV.z.sub(HCV.y.div(2)).toVar()
+        const S = HCV.y.div(float(1).sub(L.mul(2).sub(1).abs()).add(HSL_EPSILON)).toVar()
+        return vec3(HCV.x, S, L)
+}).setLayout({
+        name: 'rgb2hsl',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2hslVec4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        return vec4(rgb2hsl(rgb.xyz), rgb.w)
+}).setLayout({
+        name: 'rgb2hslVec4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2hsv.ts

@@ -0,0 +1,36 @@
+import { Fn, Vec3, Vec4, float, vec3, vec4, select } from '../../../node'
+
+const HCV_EPSILON = float('1e-10')
+
+export const rgb2hsv = Fn(([c]: [Vec3]): Vec3 => {
+        const K = vec4(0, float(-1).div(3), float(2).div(3), -1).toVar()
+        const P_true = vec4(c.b, c.g, K.w, K.z).toVar()
+        const P_false = vec4(c.g, c.b, K.x, K.y).toVar()
+        const P = select(P_true, P_false, c.g.lessThan(c.b)).toVar()
+
+        const Q_true = vec4(P.x, P.y, P.w, c.r).toVar()
+        const Q_false = vec4(c.r, P.y, P.z, P.x).toVar()
+        const Q = select(Q_true, Q_false, c.r.lessThan(P.x)).toVar()
+
+        const d = Q.x.sub(Q.w.min(Q.y)).toVar()
+        const H = Q.z
+                .add(Q.w.sub(Q.y).div(float(6).mul(d).add(HCV_EPSILON)))
+                .abs()
+                .toVar()
+        const S = d.div(Q.x.add(HCV_EPSILON)).toVar()
+        const V = Q.x.toVar()
+
+        return vec3(H, S, V)
+}).setLayout({
+        name: 'rgb2hsv',
+        type: 'vec3',
+        inputs: [{ name: 'c', type: 'vec3' }],
+})
+
+export const rgb2hsvVec4 = Fn(([c]: [Vec4]): Vec4 => {
+        return vec4(rgb2hsv(c.xyz), c.w)
+}).setLayout({
+        name: 'rgb2hsvVec4',
+        type: 'vec4',
+        inputs: [{ name: 'c', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2hue.ts

@@ -0,0 +1,29 @@
+import { Fn, Vec3, Vec4, Float, float, vec4, select } from '../../../node'
+
+const HUE_EPSILON = float('1e-10')
+
+export const rgb2hue = Fn(([c]: [Vec3]): Float => {
+        const K = vec4(0, float(-1).div(3), float(2).div(3), -1).toVar()
+        const P_true = vec4(c.b, c.g, K.w, K.z).toVar()
+        const P_false = vec4(c.g, c.b, K.x, K.y).toVar()
+        const P = select(P_true, P_false, c.g.lessThan(c.b)).toVar()
+
+        const Q_true = vec4(P.x, P.y, P.w, c.r).toVar()
+        const Q_false = vec4(c.r, P.y, P.z, P.x).toVar()
+        const Q = select(Q_true, Q_false, c.r.lessThan(P.x)).toVar()
+
+        const d = Q.x.sub(Q.w.min(Q.y)).toVar()
+        return Q.z.add(Q.w.sub(Q.y).div(float(6).mul(d).add(HUE_EPSILON))).abs()
+}).setLayout({
+        name: 'rgb2hue',
+        type: 'float',
+        inputs: [{ name: 'c', type: 'vec3' }],
+})
+
+export const rgb2hueVec4 = Fn(([c]: [Vec4]): Float => {
+        return rgb2hue(c.xyz)
+}).setLayout({
+        name: 'rgb2hueVec4',
+        type: 'float',
+        inputs: [{ name: 'c', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2lab.ts

@@ -0,0 +1,19 @@
+import { Fn, Vec3, Vec4, vec4 } from '../../../node'
+import { rgb2xyz } from './rgb2xyz'
+import { xyz2lab } from './xyz2lab'
+
+export const rgb2lab = Fn(([rgb]: [Vec3]): Vec3 => {
+        return xyz2lab(rgb2xyz(rgb))
+}).setLayout({
+        name: 'rgb2lab',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2labVec4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        return vec4(rgb2lab(rgb.xyz), rgb.w)
+}).setLayout({
+        name: 'rgb2labVec4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2lch.ts

@@ -0,0 +1,22 @@
+import { Fn, Vec3, Vec4, vec4 } from '../../../node'
+import { rgb2lab } from './rgb2lab'
+import { lab2lch } from './lab2lch'
+
+export const rgb2lch3 = Fn(([rgb]: [Vec3]): Vec3 => {
+        return lab2lch(rgb2lab(rgb))
+}).setLayout({
+        name: 'rgb2lch3',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2lch4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        const lch = rgb2lch3(rgb.xyz)
+        return vec4(lch, rgb.w)
+}).setLayout({
+        name: 'rgb2lch4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})
+
+export const rgb2lch = rgb2lch3

package/src/addons/color/space/rgb2oklab.ts

@@ -0,0 +1,45 @@
+import { Fn, mat3, vec3, vec4, Vec3, Vec4 } from '../../../node'
+
+const RGB2OKLAB_A = mat3(
+        0.2104542553,
+        1.9779984951,
+        0.0259040371,
+        0.793617785,
+        -2.428592205,
+        0.7827717662,
+        -0.0040720468,
+        0.4505937099,
+        -0.808675766
+)
+
+const RGB2OKLAB_B = mat3(
+        0.4122214708,
+        0.2119034982,
+        0.0883024619,
+        0.5363325363,
+        0.6806995451,
+        0.2817188376,
+        0.0514459929,
+        0.1073969566,
+        0.6299787005
+)
+
+export const rgb2oklab3 = Fn(([rgb]: [Vec3]): Vec3 => {
+        const lms = RGB2OKLAB_B.mul(rgb)
+        return RGB2OKLAB_A.mul(lms.sign().mul(lms.abs().pow(vec3(0.3333333333333))))
+}).setLayout({
+        name: 'rgb2oklab3',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2oklab4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        const oklab = rgb2oklab3(rgb.xyz)
+        return vec4(oklab, rgb.w)
+}).setLayout({
+        name: 'rgb2oklab4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})
+
+export const rgb2oklab = rgb2oklab3

package/src/addons/color/space/rgb2srgb.ts

@@ -0,0 +1,34 @@
+import { Fn, Float, Vec3, Vec4, float, vec3, vec4, select } from '../../../node'
+
+const SRGB_EPSILON = float('1e-10')
+
+export const rgb2srgbFloat = Fn(([c]: [Float]): Float => {
+        return select(c.mul(12.92), float(1.055).mul(c.pow(0.4166666666666667)).sub(0.055), c.lessThan(0.0031308))
+}).setLayout({
+        name: 'rgb2srgb',
+        type: 'float',
+        inputs: [{ name: 'c', type: 'float' }],
+})
+
+export const rgb2srgbVec3 = Fn(([rgb]: [Vec3]): Vec3 => {
+        return vec3(
+                rgb2srgbFloat(rgb.r.sub(SRGB_EPSILON)),
+                rgb2srgbFloat(rgb.g.sub(SRGB_EPSILON)),
+                rgb2srgbFloat(rgb.b.sub(SRGB_EPSILON))
+        ).saturate()
+}).setLayout({
+        name: 'rgb2srgbVec3',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2srgbVec4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        return vec4(rgb2srgbVec3(rgb.rgb), rgb.a)
+}).setLayout({
+        name: 'rgb2srgbVec4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})
+
+// Default export for convenience
+export const rgb2srgb = rgb2srgbVec3

package/src/addons/color/space/rgb2xyz.ts

@@ -0,0 +1,20 @@
+import { Fn, Vec3, Vec4, mat3, vec4 } from '../../../node'
+
+// CIE D65 white point transformation matrix
+const RGB2XYZ = mat3(0.4124564, 0.3575761, 0.1804375, 0.2126729, 0.7151522, 0.072175, 0.0193339, 0.119192, 0.9503041)
+
+export const rgb2xyz = Fn(([rgb]: [Vec3]): Vec3 => {
+        return RGB2XYZ.mul(rgb)
+}).setLayout({
+        name: 'rgb2xyz',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2xyzVec4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        return vec4(rgb2xyz(rgb.xyz), rgb.w)
+}).setLayout({
+        name: 'rgb2xyzVec4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})

package/src/addons/color/space/rgb2yiq.ts

@@ -0,0 +1,22 @@
+import { Fn, mat3, vec4, Vec3, Vec4 } from '../../../node'
+
+const RGB2YIQ = mat3(0.3, 0.59, 0.11, 0.599, -0.2773, -0.3217, 0.213, -0.5251, 0.3121)
+
+export const rgb2yiq3 = Fn(([rgb]: [Vec3]): Vec3 => {
+        return RGB2YIQ.mul(rgb)
+}).setLayout({
+        name: 'rgb2yiq3',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2yiq4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        const yiq = rgb2yiq3(rgb.xyz)
+        return vec4(yiq, rgb.w)
+}).setLayout({
+        name: 'rgb2yiq4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})
+
+export const rgb2yiq = rgb2yiq3

package/src/addons/color/space/rgb2yuv.ts

@@ -0,0 +1,32 @@
+import { Fn, mat3, vec4, Vec3, Vec4 } from '../../../node'
+
+const RGB2YUV_HDTV = mat3(0.2126, -0.09991, 0.615, 0.7152, -0.33609, -0.55861, 0.0722, 0.426, -0.05639)
+
+const RGB2YUV_SDTV = mat3(0.299, -0.14713, 0.615, 0.587, -0.28886, -0.51499, 0.114, 0.436, -0.10001)
+
+export const rgb2yuv3 = Fn(([rgb]: [Vec3]): Vec3 => {
+        return RGB2YUV_HDTV.mul(rgb)
+}).setLayout({
+        name: 'rgb2yuv3',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2yuv4 = Fn(([rgb]: [Vec4]): Vec4 => {
+        const yuv = rgb2yuv3(rgb.xyz)
+        return vec4(yuv, rgb.w)
+}).setLayout({
+        name: 'rgb2yuv4',
+        type: 'vec4',
+        inputs: [{ name: 'rgb', type: 'vec4' }],
+})
+
+export const rgb2yuvSDTV = Fn(([rgb]: [Vec3]): Vec3 => {
+        return RGB2YUV_SDTV.mul(rgb)
+}).setLayout({
+        name: 'rgb2yuvSDTV',
+        type: 'vec3',
+        inputs: [{ name: 'rgb', type: 'vec3' }],
+})
+
+export const rgb2yuv = rgb2yuv3

package/src/addons/color/space/srgb2rgb.ts

@@ -0,0 +1,34 @@
+import { Fn, Float, Vec3, Vec4, float, vec3, vec4, select } from '../../../node'
+
+const SRGB_EPSILON = float('1e-10')
+
+export const srgb2rgbFloat = Fn(([v]: [Float]): Float => {
+        return select(v.mul(0.0773993808), v.add(0.055).mul(0.947867298578199).pow(2.4), v.lessThan(0.04045))
+}).setLayout({
+        name: 'srgb2rgb',
+        type: 'float',
+        inputs: [{ name: 'v', type: 'float' }],
+})
+
+export const srgb2rgbVec3 = Fn(([srgb]: [Vec3]): Vec3 => {
+        return vec3(
+                srgb2rgbFloat(srgb.r.add(SRGB_EPSILON)),
+                srgb2rgbFloat(srgb.g.add(SRGB_EPSILON)),
+                srgb2rgbFloat(srgb.b.add(SRGB_EPSILON))
+        )
+}).setLayout({
+        name: 'srgb2rgbVec3',
+        type: 'vec3',
+        inputs: [{ name: 'srgb', type: 'vec3' }],
+})
+
+export const srgb2rgbVec4 = Fn(([srgb]: [Vec4]): Vec4 => {
+        return vec4(srgb2rgbVec3(srgb.rgb), srgb.a)
+}).setLayout({
+        name: 'srgb2rgbVec4',
+        type: 'vec4',
+        inputs: [{ name: 'srgb', type: 'vec4' }],
+})
+
+// Default export for convenience
+export const srgb2rgb = srgb2rgbVec3

package/src/addons/color/space/xyz2lab.ts

@@ -0,0 +1,27 @@
+import { Fn, Vec3, Vec4, float, vec3, vec4, step, mix } from '../../../node'
+
+export const xyz2lab = Fn(([xyz]: [Vec3]): Vec3 => {
+        const n = xyz.div(vec3(95.047, 100, 108.883)).toVar()
+        const c0 = n.pow(vec3(1 / 3)).toVar()
+        const c1 = n
+                .mul(7.787)
+                .add(16 / 116)
+                .toVar()
+        const v = mix(c0, c1, step(n, vec3(0.008856))).toVar()
+        const L = v.y.mul(116).sub(16).toVar()
+        const A = v.x.sub(v.y).mul(500).toVar()
+        const B = v.y.sub(v.z).mul(200).toVar()
+        return vec3(L, A, B)
+}).setLayout({
+        name: 'xyz2lab',
+        type: 'vec3',
+        inputs: [{ name: 'xyz', type: 'vec3' }],
+})
+
+export const xyz2labVec4 = Fn(([xyz]: [Vec4]): Vec4 => {
+        return vec4(xyz2lab(xyz.xyz), xyz.w)
+}).setLayout({
+        name: 'xyz2labVec4',
+        type: 'vec4',
+        inputs: [{ name: 'xyz', type: 'vec4' }],
+})

package/src/addons/color/space/xyz2rgb.ts

@@ -0,0 +1,30 @@
+import { Fn, Vec3, Vec4, mat3, vec4 } from '../../../node'
+
+// CIE D65 white point transformation matrix
+const XYZ2RGB = mat3(
+        3.2404542,
+        -1.5371385,
+        -0.4985314,
+        -0.969266,
+        1.8760108,
+        0.041556,
+        0.0556434,
+        -0.2040259,
+        1.0572252
+)
+
+export const xyz2rgb = Fn(([xyz]: [Vec3]): Vec3 => {
+        return XYZ2RGB.mul(xyz.mul(0.01))
+}).setLayout({
+        name: 'xyz2rgb',
+        type: 'vec3',
+        inputs: [{ name: 'xyz', type: 'vec3' }],
+})
+
+export const xyz2rgbVec4 = Fn(([xyz]: [Vec4]): Vec4 => {
+        return vec4(xyz2rgb(xyz.xyz), xyz.w)
+}).setLayout({
+        name: 'xyz2rgbVec4',
+        type: 'vec4',
+        inputs: [{ name: 'xyz', type: 'vec4' }],
+})

package/src/addons/color/space/yiq2rgb.ts

@@ -0,0 +1,22 @@
+import { Fn, mat3, vec4, Vec3, Vec4 } from '../../../node'
+
+const YIQ2RGB = mat3(1, 0.9469, 0.6235, 1, -0.2747, -0.6357, 1, -1.1085, 1.702)
+
+export const yiq2rgb3 = Fn(([yiq]: [Vec3]): Vec3 => {
+        return YIQ2RGB.mul(yiq)
+}).setLayout({
+        name: 'yiq2rgb3',
+        type: 'vec3',
+        inputs: [{ name: 'yiq', type: 'vec3' }],
+})
+
+export const yiq2rgb4 = Fn(([yiq]: [Vec4]): Vec4 => {
+        const rgb = yiq2rgb3(yiq.xyz)
+        return vec4(rgb, yiq.w)
+}).setLayout({
+        name: 'yiq2rgb4',
+        type: 'vec4',
+        inputs: [{ name: 'yiq', type: 'vec4' }],
+})
+
+export const yiq2rgb = yiq2rgb3

package/src/addons/color/space/yuv2rgb.ts

@@ -0,0 +1,32 @@
+import { Fn, mat3, vec4, Vec3, Vec4 } from '../../../node'
+
+const YUV2RGB_HDTV = mat3(1, 1, 1, 0, -0.21482, 2.12798, 1.28033, -0.38059, 0)
+
+const YUV2RGB_SDTV = mat3(1, 1, 1, 0, -0.39465, 2.03211, 1.13983, -0.5806, 0)
+
+export const yuv2rgb3 = Fn(([yuv]: [Vec3]): Vec3 => {
+        return YUV2RGB_HDTV.mul(yuv)
+}).setLayout({
+        name: 'yuv2rgb3',
+        type: 'vec3',
+        inputs: [{ name: 'yuv', type: 'vec3' }],
+})
+
+export const yuv2rgb4 = Fn(([yuv]: [Vec4]): Vec4 => {
+        const rgb = yuv2rgb3(yuv.xyz)
+        return vec4(rgb, yuv.w)
+}).setLayout({
+        name: 'yuv2rgb4',
+        type: 'vec4',
+        inputs: [{ name: 'yuv', type: 'vec4' }],
+})
+
+export const yuv2rgbSDTV = Fn(([yuv]: [Vec3]): Vec3 => {
+        return YUV2RGB_SDTV.mul(yuv)
+}).setLayout({
+        name: 'yuv2rgbSDTV',
+        type: 'vec3',
+        inputs: [{ name: 'yuv', type: 'vec3' }],
+})
+
+export const yuv2rgb = yuv2rgb3

package/src/addons/draw/arrows.ts

@@ -0,0 +1,75 @@
+import { Fn, Vec2, Float, float, vec2, floor, length, clamp, min, dot, cos, normalize, If } from '../../node'
+
+// Constants
+const ARROWS_TILE_SIZE = float(32)
+const ARROWS_HEAD_ANGLE = float(0.5)
+
+// Arrow tile center coordinate calculation
+export const arrowsTileCenterCoord = Fn(([pos]: [Vec2]): Vec2 => {
+        return floor(pos.div(ARROWS_TILE_SIZE)).add(0.5).mul(ARROWS_TILE_SIZE)
+}).setLayout({
+        name: 'arrowsTileCenterCoord',
+        type: 'vec2',
+        inputs: [{ name: 'pos', type: 'vec2' }],
+})
+
+// Arrows with resolution parameter
+export const arrowsWithResolution = Fn(([p, v, resolution]: [Vec2, Vec2, Vec2]): Float => {
+        const scaledP = p.mul(resolution).toVar()
+        scaledP.subAssign(arrowsTileCenterCoord(scaledP))
+        const mag_v = length(v).toVar()
+
+        const result = float(0).toVar()
+
+        If(mag_v.greaterThan(0), () => {
+                const dir_v = v.div(mag_v).toVar()
+                mag_v.assign(clamp(mag_v, 5, ARROWS_TILE_SIZE.div(2)))
+                const vScaled = dir_v.mul(mag_v).toVar()
+
+                // Simplified arrow implementation based on GLSL default style
+                const arrow = float(1)
+                        .add(
+                                min(
+                                        float(0),
+                                        dot(normalize(vScaled.sub(scaledP)), dir_v).sub(cos(ARROWS_HEAD_ANGLE.div(2)))
+                                )
+                                        .mul(2)
+                                        .mul(length(vScaled.sub(scaledP)))
+                                        .add(min(float(0), dot(scaledP, dir_v).add(1)))
+                                        .add(
+                                                min(
+                                                        float(0),
+                                                        cos(ARROWS_HEAD_ANGLE.div(2)).sub(
+                                                                dot(normalize(vScaled.mul(0.33).sub(scaledP)), dir_v)
+                                                        )
+                                                )
+                                                        .mul(mag_v)
+                                                        .mul(0.8)
+                                        )
+                        )
+                        .saturate()
+                result.assign(arrow)
+        })
+
+        return result
+}).setLayout({
+        name: 'arrowsWithResolution',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec2' },
+                { name: 'v', type: 'vec2' },
+                { name: 'resolution', type: 'vec2' },
+        ],
+})
+
+// Arrows with default resolution
+export const arrows = Fn(([p, v]: [Vec2, Vec2]): Float => {
+        return arrowsWithResolution(p, v, vec2(1))
+}).setLayout({
+        name: 'arrows',
+        type: 'float',
+        inputs: [
+                { name: 'p', type: 'vec2' },
+                { name: 'v', type: 'vec2' },
+        ],
+})

package/src/addons/draw/axis.ts

@@ -0,0 +1,57 @@
+import { Fn, Vec2, Vec3, Vec4, Mat4, Float, vec3, vec4, Loop, int } from '../../node'
+import { line } from './line'
+
+export const axis = Fn(([st, M, pos, thickness]: [Vec2, Mat4, Vec3, Float]): Vec4 => {
+        let result = vec4(0, 0, 0, 0).toVar()
+
+        // Transform center position
+        const center = M.mul(vec4(pos, 1)).toVar()
+        center.xy.assign(center.xy.div(center.w))
+        center.xy.assign(center.xy.div(2).add(0.5))
+
+        // Define axis colors (RGB for XYZ)
+        const axisColors = [
+                vec4(1, 0, 0, 1), // Red for X axis
+                vec4(0, 1, 0, 1), // Green for Y axis
+                vec4(0, 0, 1, 1), // Blue for Z axis
+        ]
+
+        const axisDirections = [
+                vec3(1, 0, 0), // X direction
+                vec3(0, 1, 0), // Y direction
+                vec3(0, 0, 1), // Z direction
+        ]
+
+        // Draw each axis
+        Loop(int(3), ({ i }) => {
+                const axisColor = (i.equal(int(0)) as any).select(
+                        axisColors[0],
+                        (i.equal(int(1)) as any).select(axisColors[1], axisColors[2])
+                )
+
+                const axisDir = (i.equal(int(0)) as any).select(
+                        axisDirections[0],
+                        (i.equal(int(1)) as any).select(axisDirections[1], axisDirections[2])
+                )
+
+                // Transform axis endpoint
+                const axisPoint = (M as any).mul(vec4((pos as any).add(axisDir as any), 1)).toVar()
+                axisPoint.xy.assign(axisPoint.xy.div(axisPoint.w))
+                axisPoint.xy.assign(axisPoint.xy.div(2).add(0.5))
+
+                // Draw line from center to axis endpoint
+                const axisLine = line(st, center.xy, axisPoint.xy, thickness)
+                result.addAssign((axisColor as any).mul(axisLine as any))
+        })
+
+        return result
+}).setLayout({
+        name: 'axis',
+        type: 'vec4',
+        inputs: [
+                { name: 'st', type: 'vec2' },
+                { name: 'M', type: 'mat4' },
+                { name: 'pos', type: 'vec3' },
+                { name: 'thickness', type: 'float' },
+        ],
+})