Results for “webgpu”

Add a white, twinkling dotted trail that follows the mouse behind website content. The skill guides WebGPU rendering, which uses the graphics processor, with static backgrounds for unsupported devices and accessibility preferences.

• Add a mouse-following trail to a hero section
• Create an interactive contact section background
• Keep a static background on touch devices

Web 线上展览开发 (虚拟展厅) (Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆，覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。) Master OS — automated mastery of Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆，覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。: top builders' mental models, tool stack, current workflows, jargon, and where to keep up. Trigger this skill when the user works on Web 线上展览 / 虚拟展厅开发 (从业者/工程视角) — 用 web 技术开发线上展览、虚拟展厅、云展会、数字展馆，覆盖 3D 空间、全景漫游、WebXR、文博数字化、营销云展厅、3D 商品展示等形态。覆盖: (a) 技术栈 — 3D web(Three.js / React Three Fiber / Babylon.js / Google model-viewer / WebGL / WebGPU)、全景(Pannellum / Marzipano / Photo Sphere Viewer / krpano / 720云)、WebXR(WebXR Device API / A-Frame)、资产管线(glTF·GLB / Draco / Meshopt / KTX2 纹理压缩 / gltf-transform / LOD); (b) 自研 vs SaaS 平台选型(国内: 众趣 / 酷雷曼 / 比目鱼 / 会鸽 / 3DVista; 海外: Matterport / Kuula / Artsteps / Spatial); (c) 性能优化(大场景加载 / 模型轻量化 / draw call / 移动端 / 首屏 / 显存)——web 3D 第一性难题; (d) 策展与导览(动线设计 / 热点 hotspot / 语音讲解 / 交互); (e) 文博数字化(IIIF / 数字孪生 / 高清文物) 与 会展·电商商业化(营销云展厅 / 数据埋点 / 线索转化); (f) 部署(CDN / 流式加载 / 跨端兼容 / WebGL 降级)。学派分歧: 自研 Three.js vs SaaS 平台、真 3D 重场景 vs 720 全景轻量、WebGL vs WebGPU、文博考据派 vs 营销转化派、沉浸优先 vs 加载优先。不含: 线下展陈 / 展台搭建、原生 VR App(非 web)、通用 3D 游戏开发、纯 3D 建模教程。 problems and wants industry-grade thinking, tool selection, or workflow guidance. 触发词：「线上展览」「虚拟展厅」「web 线上展览」「云展厅」「数字展馆」

The English summary is being prepared. Showing the original description.

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

The English summary is being prepared. Showing the original description.

Add cursor-following water-ripple distortion to existing images using Shaders components. Preserve page content and layout while integrating lazy loading, accessible image fallbacks, and static display when WebGPU is unavailable or reduced motion is enabled.

• Adding cursor ripples to a hero image
• Adding interactive distortion to gallery images
• Replacing a cursor-driven spotlight reveal

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

The English summary is being prepared. Showing the original description.

Reference WebGPU APIs, TSL syntax, node materials, WGSL integration, compute shaders, and post-processing in Three.js. For complete particle canvases use threejs-particle-canvas; for GLSL shaders use rocaille-shader. Triggers on TSL shader, WebGPU renderer, node material, WGSL, GPU compute, WebGPU setup.

The English summary is being prepared. Showing the original description.

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, or GPU compute pipelines.

The English summary is being prepared. Showing the original description.

Build text, image, and audio features in JavaScript using machine learning models that run in browsers or server runtimes. Covers model selection, execution settings, caching, and memory cleanup without requiring a Python server.

• Add sentiment analysis to a JavaScript app
• Build image classification in a browser
• Implement audio transcription

Build JavaScript or TypeScript applications that run text, image, and audio models in browsers or server runtimes. Guides compatible model selection, GPU or CPU execution, caching, and memory cleanup without requiring a Python server.

• Add text classification or translation to a browser app
• Implement image classification and object detection
• Transcribe audio using JavaScript

Babylon.js is an open-source 3D engine for the browser that renders with WebGL or WebGPU and includes a scene graph, PBR materials, glTF loading, Havok physics, a GUI layer and WebXR. Use when a user asks to build a 3D scene, game, product configurator or VR/AR experience with Babylon.js, load a glTF/GLB model, add physics or in-scene UI, switch to WebGPU, or shrink a Babylon.js bundle.

The English summary is being prepared. Showing the original description.

Expert guide for modern WebGPU and WebGL 3D graphics in the browser using Three.js (WebGPURenderer + TSL), Babylon.js, PlayCanvas, React Three Fiber (R3F), and 3Dviz spatial reasoning — covers object craft across 3 scales, surface continuity at joins, physical interaction envelopes, grounded scientific visualization, KTX2/Meshopt optimization, and 3D visual anti-slop / Panduan ahli grafis 3D web, WebGPU modern, dan penalaran spasial 3Dviz.

The English summary is being prepared. Showing the original description.

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.

The English summary is being prepared. Showing the original description.

Add shafts of sunlight to Three.js or similar 3D scenes. Shape rays with roofs and foliage, align them with the sun, and tune rendering effects so foreground surfaces keep their contrast while processing costs remain measurable.

• Add sunbeams through a tree canopy
• Show sunlight passing through roof gaps
• Create golden-hour architectural scenes

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.

The English summary is being prepared. Showing the original description.

Ship a Bevy 0.20 app to the browser: wasm32 canvas Window, one of webgl2 or webgpu, and asset paths the page can serve. Use when the same ECS app must run in a browser. Keywords: Bevy, wasm, web, webgl2, webgpu, canvas, Window.

The English summary is being prepared. Showing the original description.

Three.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多，或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词："Three.js 优化"、"WebGPU"、"draw calls"、"内存泄漏"、"TSL"、"InstancedMesh"、"R3F 优化"等。不用于：通用 React 性能问题（用 vercel-react-best-practices）、WebGL/Three.js 入门教学、3D 美术资产的制作本身。

The English summary is being prepared. Showing the original description.

Patterns for running AI models locally in browsers using WebGPU, Transformers.js, WebLLM, and ONNX Runtime. Zero API costs, full privacy. Use when "on-device AI, browser AI, WebLLM, Transformers.js, WebGPU, edge inference, offline AI, client-side ML, ONNX web, " mentioned.

The English summary is being prepared. Showing the original description.

Build interactive live slide decks with Vite + React 19, TanStack Router, WebGPU shaders, Framer Motion orchestration, 1920x1080, access-gated SPA. 39 components (layout, interaction, graphics, chrome, navigation), direction-aware slide transitions, presenter mode with speaker notes and BroadcastChannel sync, Playwright PNG/PDF export, YAML-driven authoring, Cloudflare/Vercel/Netlify deploy. Triggers on: slide deck, presentation, pitch deck, investor deck, product demo, conference talk, live slides, WebGPU slides, interactive presentation, presenter mode, speaker notes, overwatch deck.

The English summary is being prepared. Showing the original description.

Pulp in the browser — the WAM v2 and WebCLAP adapters, the wasm runtime, the Skia/WebGL2 browser window host, and the WebGPU (emdawnwebgpu) GPU-audio lane. Covers what does and does not compile to wasm, the worklet-thread constraints (no std::thread, no fetch, no navigator.gpu), the non-realtime tick, memory growth, how to PROVE a GPU lane actually ran rather than silently falling back to CPU, and the silent-failure traps that make a wasm build "work" while producing no audio or no pixels.

The English summary is being prepared. Showing the original description.

Decide when and how to build UI in Apple's Liquid Glass design system (WWDC25; iOS/macOS 26+, refreshed in 27) on SwiftUI, UIKit, AppKit and the web. Covers the layer model (glass is for the floating navigation/control layer, never the content layer), regular vs clear variants and the 35% dimming rule, tint only for primary actions, concentric corner radii, morphing and interactive response, Reduce Transparency / Increase Contrast / Reduce Motion fallbacks, verified API names (glassEffect, GlassEffectContainer, glassEffectID, .glass/.glassProminent, UIGlassEffect, NSGlassEffectView, scroll edge effects, backgroundExtensionEffect, tab bar minimize), and three web routes (GPU post-process inside your WebGL/WebGPU pipeline, the ybouane/liquidglass library, CSS backdrop-filter + SVG displacement) with a contrast-on-glass checker and spec auditor. NOT for generic glassmorphism/vaporwave styling, visionOS window glass, app icon design in Icon Composer, or non-Apple design systems (Material 3, Fluent).

The English summary is being prepared. Showing the original description.

Three.js (three, WebGL / WebGPU 3D グラフィクス) r186 リファレンス。 Scene, Group, PerspectiveCamera, OrthographicCamera, WebGLRenderer, WebGPURenderer, RenderPipeline、 BufferGeometry, BufferAttribute, StorageBufferAttribute, Mesh, InstancedMesh, SkinnedMesh、 MeshStandardMaterial, MeshPhysicalMaterial, ShaderMaterial, node-materials (TSL)、 DirectionalLight, SpotLight, PointLight, AmbientLight, PMREMGenerator、 GLTFLoader, FBXLoader, DRACOLoader, TextureLoader、 AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack, Timer、 AudioListener, PositionalAudio、 Vector3, Matrix4, Quaternion, Euler, Color, Box3, Raycaster、 OrbitControls, TransformControls, WebXRManager。

The English summary is being prepared. Showing the original description.

Train and evaluate models that estimate human poses from WiFi signals. Compare results against a model that always predicts the average pose, check for data leakage, and report measured improvements with clear evaluation conditions.

• Train a pose model using camera labels
• Evaluate pose estimation without a camera at inference
• Compare accuracy against an average-pose baseline

Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.

• Combine motion recipes into a scene
• Build a multi-phase brand reveal from a template
• Design transitions between scenes

Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.

The English summary is being prepared. Showing the original description.