Please enable JavaScript.

Coggle requires JavaScript to display documents.

WebGL :fire: - Coggle Diagram

- - - - alpha: Enable transparency (e.g., for overlaying on a web page).
      - antialias: Smooths jagged edges.
      - setPixelRatio: Crucial for high-DPI screens and performance management.
    - - fog: Adds distance-based atmosphere (e.g., Fog, FogExp2).
      - background: Can be set to a color, texture, or CubeTexture (Skybox).
  - - - fov (Field of View): Determines the vertical view angle.
      - aspect : Width divided by height (usually window.innerWidth / window.innerHeight).
      - near / far: Clipping planes for optimization and depth.
  - - - BoxGeometry
      - SphereGeometry
      - PlaneGeometry
      - CylinderGeometry
      - TorusGeometry
    - - BufferGeometry: The fundamental, highly performant container for all vertex data.
      - InstancedBufferGeometry: Used for rendering many copies of the same geometry efficiently (see Instancing).
    - - ExtrudeGeometry
      - Loaded Geometries (e.g., from GLB/GLTF files).
  - - - MeshStandardMaterial: Most common, uses maps for roughness, metalness, and normal data.
      - MeshPhysicalMaterial: Extension of Standard Material, adds clear coat, sheen, and transmission (for glass/water effects).
    - - MeshBasicMaterial: Ignores all scene lighting.
      - MeshLambertMaterial: Fast, supports diffuse lighting, but lacks specular highlights.
    - - ShaderMaterial / RawShaderMaterial: Allows writing custom GLSL shaders (Vertex/Fragment) for maximum control and unique effects.
  - - - Texture: General image map (e.g., Base Color/Albedo).
      - CubeTexture: Six images arranged in a cube (used for Skybox/Environment Mapping).
    - - map (Color/Albedo)
      - normalMap (Gives the illusion of surface detail)
      - roughnessMap / metalnessMap (Defines material properties)
      - aoMap (Ambient Occlusion for soft shadowing)
      - lightMap (Pre-calculated static lighting)
  - - - Instancing (InstancedMesh / Instances in Drei): Renders many objects in a single Draw Call (Crucial).
      - Level of Detail (LOD): Swaps between high- and low-resolution models based on distance.
      - BufferGeometry.toNonIndexed(): Used to prepare geometry for merging/batching.
      - Back-Face Culling: a performance optimization technique in 3D computer graphics that prevents the rendering of polygons that are not visible to the camera
    - - uniform: Data passed from JS (CPU) that is constant across a draw call.
      - attribute: Data unique to each vertex (e.g., position, color).
      - varying: Data passed from the Vertex Shader to the Fragment Shader.
    - - GLTFLoader (For GLB/GLTF, the modern standard).
      - DDSLoader / KTX2Loader (For compressed texture formats, excellent for performance).
    - - .dispose(): Method required for all Geometries, Materials, and Textures to free GPU memory and prevent leaks.
  - - - useFrame: The R3F hook for the render loop. Knowing how to use it for mutations (mesh.current.rotation.y += 0.01) versus state updates (avoiding them) is critical for performance.
      - useLoader / Suspense: The standard, performant way to load assets (textures, GLB models) asynchronously while showing a fallback loader.
      - useThree: The hook to access the underlying Three.js state (e.g., the renderer, scene, camera), which is often necessary for advanced control or custom effects.
    - - OrbitControls / TransformControls: Essential components for user interaction and debugging.
      - Html / Portal: For rendering regular HTML/React components inside the 3D scene (e.g., UI labels, buttons).
      - Preload: For caching models and textures to speed up future scene loading.
      - PerformanceMonitor / usePerf: Tools used to check the actual FPS, draw calls, and memory usage—crucial for a performance-focused role.
    - - Browser Rendering: Understanding how the browser's main thread, JavaScript thread, and WebGL context interact.
      - Responsive Design: Techniques to ensure the <Canvas> scales correctly across different screen sizes while maintaining the correct camera aspect ratio.
      - Web Workers: The pattern of offloading heavy computations (like physics or complex calculations) to a separate thread to keep the main JavaScript thread free for smooth rendering.