All authors
Claude Skills by nicksonthc
github.com/nicksonthc26 skills0 installs81 views
- Threejs Blender Glb PipelineBuilds a reference-image-driven asset pipeline from headless Blender to GLB for a three.js scene — an asset contract (units, axes, grounding, required mesh/material names, budgets, attachment numbers), one parallel subagent per asset group writing craft_<slug>.py generators, preview renders compared against the reference, measured-bounding-box placement in the web scene, Draco compression, and a scored asset quality pass. Use when the user has a reference picture and wants a 3D scene from it,...Votes: 0GitHub stars: 2
- Threejs Boat Buoyancy SteeringFloats a boat (or any buoyant prop) on three.js water with Gerstner waves generated from one JS table that feeds both the GLSL vertex shader and a CPU waveHeight(), four-probe heave/pitch/roll damped springs, an arc-length drift lane that bends round rocks, click-to-steer W/A/S/D rowing with momentum and drag, an autopilot that pursues the lane back, and a chase camera that keeps the orbit. Use when the user wants a drifting or steerable boat, buoyancy, objects bobbing on waves, Gerstner wave...Votes: 0GitHub stars: 2
- Threejs Camera Guided TourBuilds a hands-free guided camera tour for a three.js scene — keyframes as data, a time-parametrised Catmull-Rom (Hermite) path with continuous velocity, one camera-owner flag, the tour driving time of day and a day→night blend, staged creatures crossing the frame, handwritten captions, portrait-phone lens widening, instant hand-back on drag/scroll/tap/Esc, and a seek() hook for screenshots and video capture. Use when adding a tour mode, cinematic flythrough, attract mode, camera path animati...Votes: 0GitHub stars: 2
- Threejs Cinematic Loading ScreenBuilds a cinematic loading gate for a three.js scene — a painted CSS dawn (layered gradients, drifting blurred mist bands, optional conic god rays, SVG feTurbulence grain, vignette), a 2D-canvas layer of falling petals and glowing motes, a handwritten title that animates in, a gold progress line with stage captions, then "tap anywhere to enter" whose tap is the browser gesture that unlocks audio; uses a still captured from the live scene as the backdrop that cross-fades into the real render, ...Votes: 0GitHub stars: 2
- Threejs Day Cycle LightingAnimates the sun in a three.js scene from sunrise to sunset through a single applySun(az, el) writer — azimuth sweep, elevation arc, warm-to-gold light colour, horizon falloff, warming sky dome and fog, re-aimed god rays and every sun-driven shader uniform — plus a cinematic "sun follows the lens" mode that keeps the sun beside the camera heading for backlit shots with boosted god rays and forward scattering. Use when adding a day/night cycle, time-of-day slider, sunrise/sunset, moving sun, b...Votes: 0GitHub stars: 2
- Threejs Fish School BoidsBuilds a school of swimming fish (koi) in three.js — one neutral Blender mesh with animation weights in COLOR_0, per-fish variety patterns (kohaku, sanke, showa, ogon, tancho, asagi, kigoi, ghost) painted in the fragment shader, vertex-shader swimming with a travelling tail wave, turn bend, flapping/tucking pectorals and fin flutter mirrored in the shadow depth material, and calm boids traffic with patrol homes, look-ahead shallows and obstacle avoidance, clamped steering, surface "kisses" th...Votes: 0GitHub stars: 2
- Threejs Ghibli Night ModeTurns an existing three.js day scene into a Studio Ghibli-style night behind a ☾ toggle — indigo-to-teal painted sky, a storybook moon with maria, halo and rim, twinkling stars, Milky Way, hero stars and an in-shader shooting star, moonlit water with a reflection floor and silver glints, bioluminescent fish, purple-filled shadows, a cool grade and night exposure — all as one applyNight(k) cross-fade over the day state, with an eased moonrise. Use when adding night mode, moon, stars, moonlit w...Votes: 0GitHub stars: 2
- Threejs Ghibli Sky CloudsBuilds a Studio Ghibli–style painterly sky for a three.js scene — an inverted sky-dome ShaderMaterial with a zenith/mid/horizon gradient, a hand-painted horizon haze that melts into the fog colour, a soft painted sun halo (no photoreal disc), and fluffy cumulus clouds made of instanced icosphere puffs with three-tone toon shading, wispy torn limbs, core occlusion and Henyey–Greenstein silver linings. Use when the user asks for an anime/Ghibli sky, painterly clouds, cumulus, sky gradient, sun ...Votes: 0GitHub stars: 2
- Threejs Ghibli Toon ShadingAdds Studio Ghibli–style anime shading to existing three.js MeshStandardMaterial/MeshPhysicalMaterial objects via one onBeforeCompile patch helper — banded toon diffuse that keeps soft PCF shadows and GGX specular (RE_Direct wrapper), warm never-grey shadow fill, spherical "puff" normals for foliage clumps (k-means clusterCenter for baked GLB leaves), backlit subsurface glow, rim light, painterly leaf flecks, warm grained bark, and world-space wind with matching customDepthMaterial so dappled...Votes: 0GitHub stars: 2
- Threejs Headless Visual VerificationVerifies a three.js / WebGL scene visually and numerically without fighting the browser — headless Playwright on real Chrome with GPU flags, stopping the animation loop and stepping frame(t) deterministically, reading the canvas with toDataURL in the same evaluate, a shot-list capture script, synthetic PointerEvents for hover/click, and a checklist of the traps (hidden-tab rAF throttling, stale cached index.html, shader-compile stalls, blank canvases, syntax errors that stop the page at 0%). ...Votes: 0GitHub stars: 2
- Threejs Hud Objective MarkersAdds game-style objective markers and a minimal HUD to a three.js scene — glass badges pinned to the screen edge with a chevron and live distance when a hero is off-screen or behind the camera, floating labels when far but visible, hysteresis so they never flicker, click-or-key fly-to on an arc that climbs with distance, a follow/watch camera that survives loops with a mist-cut overlay, and a translucent icon dock with CSS tooltips plus a corner wordmark. Use when adding waypoints, off-screen...Votes: 0GitHub stars: 2
- Threejs Night Lights LanternsAdds warm night light and life to a three.js scene — floating paper lanterns drawn from one InstancedMesh and a canvas text atlas (aCell), fireflies and moths as single Points draw calls, glowing lotus and lily pads, low river mist, a hurricane oil lamp with an additive flame, paper chōchin lanterns, a boat-bow lantern with a brushed word that hangs plumb and swings as a damped pendulum, and the "one real point light follows the nearest source" pattern with lights pre-created at intensity 0. ...Votes: 0GitHub stars: 2
- Threejs Object InteractionMakes a three.js object hoverable and clickable (canvas-rect raycast, additive pulsing hover ring, click-vs-drag filter) and plays a one-shot cinematic on click — the camera glides into a first-person view, an openable copy of the object (e.g. a book) lifts and opens, text writes itself onto CanvasTexture pages in handwriting, pages come from JSON and turn with a real hinged page flip, Esc reverses it all; optionally lets visitors write their own pages kept in localStorage. Use when adding cl...Votes: 0GitHub stars: 2
- Threejs Open World StreamingExtends a small three.js scene into a long, streamed world (hundreds of metres along a river, road or valley) — one signed-distance function for water/land, a curvilinear chunked terrain strip with seamless normals, a camera-following snapped water grid, a shadow frustum that follows the view, landmark pads, a pooled set of crafted GLB trees re-seated near the camera, deterministic seeded scatter and distance culling. Use when the user asks to "extend the world", "make the river longer", add ...Votes: 0GitHub stars: 2
- Threejs Postprocessing Anime GradeSets up a Ghibli/anime post-processing chain for three.js EffectComposer — RenderPass → half-res GTAO (with additive/transparent objects hidden from it) → UnrealBloom with a linear-HDR threshold → optional underwater pass → split-tone colour grade (gold/peach highlights, teal shadows, saturation, warmth, vignette) → OutputPass → SMAA last. Covers bloom threshold maths before ACES, white-albedo toning, dark-speck and dark-sheet artefacts, and night grade variants. Use when the user asks for bl...Votes: 0GitHub stars: 2
- Threejs Procedural VegetationBuilds and scatters storybook (Ghibli-scale) vegetation in three.js at scale with InstancedMesh — crafted GLB trees with leaf-card normals and shadow groups, a sakura made from a shader swap, procedural bamboo groves, leaf-card shrubs (mound/upright/arching habits, hydrangea mopheads), folded-blade meadow grass in tussocks, wildflowers with shader-only eye rings and clumps, painterly blob trees with shader-cut leafy rims, reeds/lilies/lotus, ferns, falling sakura petals and flooded rice paddi...Votes: 0GitHub stars: 2
- Threejs Shell Fur RenderingGrows real-time fur on a character in three.js with shell rendering — one watertight sculpted body mesh whose COLOR_0 RGBA carries painted albedo and per-vertex fur length, drawn again as a single InstancedMesh of shells indexed by gl_InstanceID, pushed along the normal with gravity droop and wind, strands cut from jittered 3D rest-space cells that taper to the tip, coat darkened toward the skin, distance-based shell LOD, no shell shadows. Use when a creature, plush toy, mascot or animal need...Votes: 0GitHub stars: 2
- Threejs Skeletonless Character AnimationMakes a three.js character feel alive without a skeleton or rig — a shared vertex-shader pose function (upper-body twist and nod, lidless blinks, pupil swivel, ear flicks, breathing) run by every posed material including shell fur and shadow depth materials; a "mind" of critically damped springs where eyes lead, head follows and body turns last; animal blink timing, looking around and glancing at points of interest; dangling legs; a held leaf/umbrella that bends as a cantilever in wind, appar...Votes: 0GitHub stars: 2
- Threejs Stylized Rock MaterialCreates painterly river-worn Ghibli rocks for three.js — Blender SDF/soft-min faceted stones with colour, crevices, worn edges and moss painted into COLOR_0 (moss in the alpha), plus a web shader that adds scale-correct granite grain, a derivative bump without a bumpMap, a wet band that follows the live waterline/tide, rain wetness and per-instance variation. Also covers reusing the rock shader on stone props (lanterns, cliffs) and seating fences on slopes by shearing. Use when the user asks ...Votes: 0GitHub stars: 2
- Threejs Webaudio Generative SoundtrackComposes and synthesises an original soundtrack live with the Web Audio API for a three.js / WebGL scene — a gentle 3/4 waltz from [midi, beats] arrays played by a triangle+sine piano with filter envelopes, a detuned-saw string pad and an FM music box, through a generated convolution reverb and compressor, scheduled with a look-ahead timer; plus ambience (brown-noise river through an LFO band-pass, random FM birdsong), a storm thunder rumble, fade in/out, a music toggle, gesture-gated start a...Votes: 0GitHub stars: 2
- Threejs Webgl Performance ProfilingProfiles and speeds up a heavy three.js WebGL scene with multi-pass rendering (refraction/reflection pre-passes, GTAO, bloom, shadows, thousands of instances) — honest GPU timing with gl.finish and a default-framebuffer readPixels, per-pass on/off toggles, triangles-per-mesh reports, shader-compile hitch warm-up, one shared shadow render per frame, render layers, distance culling and LOD, no-recompile light fading, program-cache keys, adaptive resolution and GLB compression. Use when the user...Votes: 0GitHub stars: 2
- Threejs Webgl Rain EffectAdds clear / rain / thunderstorm weather to a three.js scene driven by one eased wetness value — GPU rain streaks in a camera-following box slanted by wind, rain rings on the water, lightning with Poisson strikes, multi-pulse flashes and delayed Web Audio thunder, denser colder fog, slate/ink storm sky, darker clouds, dimmed sun/moon/stars/god rays, wind gusts and wet (darker, glossier) materials — using a base×factors pattern so nothing compounds. Use when adding rain, storm, lightning, thun...Votes: 0GitHub stars: 2
- Threejs Webgl Realistic WaterBuilds physically lit, painterly-realistic river/lake/pond water in three.js WebGL — depth-aware screen-space refraction, Beer–Lambert absorption and in-scatter, planar reflection with Schlick Fresnel, shadowed GGX sun glints, mipmapped slope-map ripples, ripple-ring sources, soft waterlines, chromatic caustics on submerged surfaces and a Voronoi pebble riverbed. Use when a three.js / React Three Fiber scene has flat, transparent or milky water, when the user asks for realistic water, refract...Votes: 0GitHub stars: 2
- Threejs Webgl Underwater EffectLets the three.js orbit camera dive below a water surface and renders a convincing underwater view — Snell's window (the world above inside the 48.6° critical cone), total internal reflection outside it, teal underwater fog, light shafts along the refracted sun, a camera-tiled bubble cloud, a wobble/cyan-grade/vignette post pass, an over-under lens (half the frame above the water, half below, joined along the live waterline with a meniscus) while the camera crosses the surface, and a shader w...Votes: 0GitHub stars: 2
- Threejs Webgl Wake SimulationMakes a boat split the water with a physically dispersive Kelvin wake in three.js WebGL — a ping-pong half-float GPU height-field simulation using the iWave kernel over a world-locked window that follows the hull, hull-footprint forcing, streaky foam, relief shading that reads on clear shallow water, and a hull-attached analytic bow wave; also documents the simpler analytic Kelvin-wedge decal and why it looks wrong. Use when the user wants a boat wake, Kelvin V, bow wave, foam trail, interact...Votes: 0GitHub stars: 2
- Threejs Webgl Waterfall EffectBuilds a stylised-realistic waterfall in three.js WebGL that pours off a heightfield cliff's true lip into a carved plunge basin — layered parabolic sheets (glassy at the lip, aerated and streaky below, tearing into spray), side threads, a wet ledged rock face, rising spray billboards with a 42° rainbow, ballistic droplets, rings and froth on the pool, and boulders at the foot. Use when the user wants a waterfall, cascade, spring, plunge pool, spray/mist with a rainbow, or water falling off t...Votes: 0GitHub stars: 2