{ "description": "Progressive URL strategy for Three.js web-enhanced learning", "progression": "foundation → intermediate → advanced → expert", "url_categories": { "foundation": { "description": "Basic Three.js concepts - scene, camera, geometry, materials", "iteration_range": "1-5", "urls": [ "https://threejs.org/docs/#manual/en/introduction/Creating-a-scene", "https://threejs.org/examples/#webgl_geometry_cube", "https://threejs.org/examples/#webgl_animation_keyframes", "https://threejs.org/examples/#webgl_materials", "https://threejs.org/examples/#webgl_lights_hemisphere" ] }, "intermediate": { "description": "Textures, controls, particles, groups, advanced geometry", "iteration_range": "6-12", "urls": [ "https://threejs.org/examples/#webgl_materials_texture_filters", "https://threejs.org/examples/#misc_controls_orbit", "https://threejs.org/examples/#webgl_points_waves", "https://threejs.org/examples/#webgl_geometries", "https://threejs.org/examples/#webgl_loader_gltf", "https://threejs.org/examples/#webgl_postprocessing_unreal_bloom", "https://threejs.org/examples/#webgl_buffergeometry_custom_attributes_particles" ] }, "advanced": { "description": "Custom shaders, GLSL, advanced lighting, physics, procedural", "iteration_range": "13-18", "urls": [ "https://threejs.org/examples/#webgl_shader", "https://threejs.org/examples/#webgl_materials_envmaps", "https://threejs.org/examples/#webgl_shader_lava", "https://threejs.org/examples/#webgl_gpgpu_birds", "https://threejs.org/examples/#webgl_shadowmap", "https://threejs.org/examples/#webgl_geometry_terrain" ] }, "expert": { "description": "WebGPU, ray marching, GPU particles, complex shaders, optimization", "iteration_range": "19+", "urls": [ "https://threejs.org/examples/#webgl_shaders_ocean", "https://threejs.org/examples/#webgpu_ocean", "https://threejs.org/examples/#webgpu_compute_particles", "https://threejs.org/examples/#webgl_marchingcubes", "https://threejs.org/examples/#webgpu_instance_mesh", "https://threejs.org/examples/#webgl_shader_ocean2", "https://threejs.org/examples/#webgpu_water", "https://threejs.org/examples/#webgl_gpgpu_water" ] } }, "priming_urls": [ "https://threejs.org/docs/#manual/en/introduction/Creating-a-scene", "https://threejs.org/manual/#en/fundamentals", "https://threejs.org/manual/#en/responsive", "https://threejs.org/manual/#en/scenegraph", "https://threejs.org/manual/#en/materials" ], "web_search_templates": [ "three.js {technique} example site:threejs.org", "three.js {shader_type} shader tutorial", "three.js webgpu {effect} example", "three.js performance optimization {technique}", "GLSL {effect} shader three.js" ], "learning_focus_by_level": { "foundation": [ "Scene, camera, renderer setup", "Basic geometries and materials", "Simple animations", "Lighting fundamentals", "Camera positioning" ], "intermediate": [ "Texture loading and mapping", "User controls and interaction", "Particle systems", "Geometry manipulation", "Post-processing effects", "Advanced materials" ], "advanced": [ "Custom shader programming", "Vertex and fragment shaders", "Advanced lighting techniques", "Procedural generation", "Physics simulation", "Multi-pass rendering" ], "expert": [ "WebGPU API usage", "Compute shaders", "Complex shader effects", "GPU particle systems", "Performance optimization", "Cutting-edge techniques" ] }, "technique_keywords": { "geometries": ["BoxGeometry", "SphereGeometry", "PlaneGeometry", "BufferGeometry", "Custom Geometry"], "materials": ["MeshBasicMaterial", "MeshStandardMaterial", "ShaderMaterial", "MeshPhongMaterial"], "lighting": ["AmbientLight", "DirectionalLight", "PointLight", "SpotLight", "HemisphereLight"], "controls": ["OrbitControls", "TrackballControls", "FlyControls", "PointerLockControls"], "shaders": ["Vertex Shader", "Fragment Shader", "GLSL", "Uniforms", "Varyings"], "effects": ["Bloom", "Water", "Ocean", "Particles", "Sky", "Fog"], "advanced": ["WebGPU", "Compute Shader", "Ray Marching", "GPGPU", "Instancing"] }, "inspiration_sources": { "ocean_examples": [ "https://threejs.org/examples/#webgl_shaders_ocean", "https://threejs.org/examples/#webgpu_ocean", "https://threejs.org/examples/#webgl_shader_ocean2" ], "shader_examples": [ "https://threejs.org/examples/#webgl_shader", "https://threejs.org/examples/#webgl_shader_lava" ], "particle_examples": [ "https://threejs.org/examples/#webgl_points_waves", "https://threejs.org/examples/#webgpu_compute_particles" ] } }