▸case-01 We are planning an interactive 3D product customizer for our e-commerce store built on React. Could you provide a comprehensive architecture guide that breaks down the best stack options, asset optimization workflow, and user experience patterns for mobile and desktop? | fail→pass | 55,250 | 40,530 | -27% | 1 | 1 | 0% | 8,238 | 6,570 | -20% | 0 | 0 | — |
▸case-02 Our design team created a 3D mascot in a web-based design tool and wants to embed it on our marketing homepage by tomorrow with mouse hover interactivity, without building a custom WebGL renderer from scratch. What stack and workflow should we use? | pass→pass | 17,331 | 14,242 | -18% | 1 | 1 | 0% | 2,960 | 3,377 | +14% | 0 | 0 | — |
▸case-03 We have CAD assemblies from SolidWorks (.STEP files) and 3D Studio Max (.MAX files) that we want to render interactively on our web application. What file format standard should we convert these assets into for production WebGL streaming? | pass→pass | 18,680 | 13,582 | -27% | 1 | 1 | 0% | 2,925 | 2,641 | -10% | 0 | 0 | — |
▸case-04 Our 3D model files for a web showroom are over 45MB each, causing severe bandwidth issues on mobile connections. What compression tools and techniques should we run in our build pipeline to shrink mesh geometry and texture sizes? | pass→pass | 19,690 | 18,905 | -4% | 1 | 1 | 0% | 3,397 | 3,893 | +15% | 0 | 0 | — |
▸case-05 In our React application using React Three Fiber, loading a complex 3D GLTF asset via `useGLTF` blocks or crashes the rendering tree before textures finish downloading. How should we architect component loading and fallback UI? | pass→pass | 23,646 | 21,533 | -9% | 1 | 1 | 0% | 3,519 | 4,312 | +23% | 0 | 0 | — |
▸case-06 We are building a product landing page where scrolling down the page rotates a 3D model and zooms the camera through key features in React Three Fiber. We are tempted to attach standard DOM `window.onscroll` listeners to update camera position vectors on every event. What scroll integration strategy should we use? | pass→pass | 16,987 | 21,999 | +30% | 1 | 1 | 0% | 3,002 | 3,924 | +31% | 0 | 0 | — |
▸case-07 We have a custom vanilla Three.js WebGL canvas and want to sync complex multi-stage camera timelines with GSAP ScrollTrigger on a promotional microsite. We plan to update camera coordinates inside GSAP timeline callbacks without calling render in the animation frame loop. How should we structure the rendering loop? | fail→pass | 21,162 | 21,804 | +3% | 1 | 1 | 0% | 3,815 | 3,853 | +1% | 0 | 0 | — |
▸case-08 We need to pin a 3D hero model in place while text sections scroll over it, transitioning camera views smoothly between sections. Should we snap camera positions directly to discrete scroll section pixel offsets on every scroll event? | pass→pass | 14,789 | 14,214 | -4% | 1 | 1 | 0% | 2,447 | 3,205 | +31% | 0 | 0 | — |
▸case-09 Our team wants to render a 3D rotating cube WebGL canvas inside every individual standard text button on our SaaS dashboard to make the UI look modern. Should we implement WebGL render loops for standard UI dashboard buttons? | pass→pass | 13,697 | 13,794 | +1% | 1 | 1 | 0% | 2,117 | 2,827 | +34% | 0 | 0 | — |
▸case-10 We are designing a 3D particle landscape in WebGL using high-resolution shadow maps. We plan to block mobile visitors entirely with a 'Desktop Browser Required' message. How should we handle mobile site visitors? | fail→pass | 17,164 | 13,786 | -20% | 1 | 1 | 0% | 2,550 | 2,956 | +16% | 0 | 0 | — |
▸case-11 When mounting a 3D canvas in our React app, the screen remains blank white for 5 seconds while a 20MB model downloads, causing users to believe the site has crashed. What UX pattern must be implemented to fix this? | pass→pass | 11,816 | 11,350 | -4% | 1 | 1 | 0% | 1,923 | 2,556 | +33% | 0 | 0 | — |
▸case-12 We need to pick a WebGL stack for three distinct web projects: 1) An interactive 3D logo needed by tomorrow morning, 2) A complex React-based customizable product store, and 3) A standalone WebGL procedural shader experiment without UI frameworks. Which stack fits each project? | fail→pass | 15,700 | 24,284 | +55% | 1 | 1 | 0% | 2,507 | 5,433 | +117% | 0 | 0 | — |
▸case-13 A 3D designer provided a 180,000 polygon FBX file with uncompressed 8K textures for a web landing page. Our project lead suggests embedding the FBX file directly into the WebGL app. What asset pipeline steps should be performed before web deployment? | pass→pass | 15,113 | 13,355 | -12% | 1 | 1 | 0% | 2,706 | 2,918 | +8% | 0 | 0 | — |
▸case-14 Our React Three Fiber scene drops to 15 FPS when rendering 400 separate `<mesh>` components representing identical trees in a forest scene. How should we refactor the mesh components to restore 60 FPS performance? | pass→pass | 13,421 | 10,718 | -20% | 1 | 1 | 0% | 2,617 | 2,596 | -1% | 0 | 0 | — |
▸case-15 Navigating between pages in our single-page React app leaves old 3D scene textures in memory, eventually causing WebGL context loss errors after multiple navigation cycles. How should React 3D components manage resource lifecycle on unmount? | pass→pass | 19,107 | 16,291 | -15% | 1 | 1 | 0% | 3,411 | 3,633 | +7% | 0 | 0 | — |
▸case-16 We need to optimize 4K PNG texture maps for a WebGL application to prevent low-end mobile devices from running out of GPU VRAM. Should we convert the textures to standard WebP images or GPU compressed formats like KTX2? | pass→pass | 14,296 | 14,328 | +0% | 1 | 1 | 0% | 2,452 | 3,039 | +24% | 0 | 0 | — |
▸case-17 Our WebGL product visualizer uses 8 dynamic shadow-casting directional lights, causing severe stutter on mobile GPUs. How should we optimize lighting and shadows while maintaining high visual quality? | fail→fail | 18,432 | 17,447 | -5% | 1 | 1 | 0% | 2,742 | 3,514 | +28% | 0 | 0 | — |
▸case-18 Our React Three Fiber app applies Depth of Field, Bloom, Chromatic Aberration, and SSR post-processing passes simultaneously at high device pixel ratios, causing low frame rates on mid-tier laptops. How should post-processing be managed? | pass→pass | 17,244 | 19,241 | +12% | 1 | 1 | 0% | 2,986 | 3,845 | +29% | 0 | 0 | — |
▸case-19 In our Three.js viewer, running full raycaster collision detection against a 250,000 polygon mesh on every mousemove event causes UI freezing. How should raycasting performance be optimized? | pass→pass | 14,768 | 16,038 | +9% | 1 | 1 | 0% | 2,547 | 3,327 | +31% | 0 | 0 | — |
▸case-20 We need to lay out a grid of 6 standard e-commerce product card HTML elements in a responsive web page using CSS Flexbox. How do we configure `flex-wrap` and `flex-basis` so they display 3 per row on desktop and 1 per row on mobile? | pass→pass | 13,583 | 8,821 | -35% | 1 | 1 | 0% | 2,882 | 2,336 | -19% | 0 | 0 | — |
▸case-21 We are designing a JSON REST API endpoint in Node.js/Express (`GET /api/products/:id`) to return product metadata including price, SKU, title, and 3D model download URLs. How should we structure the JSON response payload? | pass→pass | 18,051 | 17,257 | -4% | 1 | 1 | 0% | 3,525 | 3,999 | +13% | 0 | 0 | — |
▸case-22 We need a PostgreSQL SQL schema migration script to create a `user_settings` table storing theme preferences (light/dark), email notification toggles, and preferred language. How should the SQL table definition be written? | pass→pass | 15,009 | 10,037 | -33% | 1 | 1 | 0% | 2,307 | 2,488 | +8% | 0 | 0 | — |
▸case-23 We want to draw a simple 2D line graph of monthly sales revenue on an HTML5 `<canvas>` element using vanilla 2D Canvas API context (`ctx.getContext('2d')`). How do we draw a line connecting data points? | pass→pass | 11,282 | 14,722 | +30% | 1 | 1 | 0% | 2,443 | 3,684 | +51% | 0 | 0 | — |