Coding 3D graphics with light reflections using GLM-5 | Alpha | PandaiTech

Coding 3D graphics with light reflections using GLM-5

A guide to writing HTML and WebGL code using simple prompts to generate 3D scenes featuring realistic reflection physics.

Learning Timeline
Key Insights

Advantages of Regular Chat Mode

Use 'regular chat' mode instead of 'agents' if your task does not require overly complex steps or a very long reasoning process, as it is much faster.

Tip for Realistic Reflections

By default, the AI might not enable the 'mutual reflection' feature (objects reflecting other objects). You need to specify this in your prompt so the AI writes the reflection logic between the two objects.

Dynamic Color Testing

When you change an object's color or material (e.g., to 'Gold'), observe how the reflection color on adjacent objects updates automatically to ensure the light physics are accurate.
Prompts

Initial 3D Scene Generation Prompt

Target: GLM-5
Create a standalone HTML file using WebGL that loads efficiently on a regular browser. Code up a 3D city night scene using basic shapes.

Background & Reflection Enhancement Prompt

Target: GLM-5
Use a real background that is publicly available. Generate two spheres and make sure the spheres reflect in each other (mutual reflection).
Step by Step

Building a 3D WebGL Scene with Realistic Reflections Using GLM-5

  1. Open the 'regular chat' interface on GLM-5 (this mode is faster for single-step tasks).
  2. Enter an initial prompt to generate a standalone HTML file containing WebGL code for a 3D scene (e.g., a city night scene).
  3. Click the 'Generate' button and wait for the AI to produce the code.
  4. If the background looks unrealistic, provide a prompt to use a publicly available 'real background'.
  5. Instruct the AI to generate two 'sphere' objects and specifically emphasize that they should reflect each other (mutual reflection).
  6. Click the 'Expand' button (arrow icon) to view the output in 'full width' mode.
  7. Test the scene's functionality by adjusting the 'Clear Coat', 'Roughness', and 'Reflectivity' sliders on the generated control panel.
  8. Select the 'Presets' dropdown menu or buttons (such as Gold, Chrome, or Glass) to see real-time changes in material and reflection colors.
  9. Change the background to another theme (e.g., 'Sunset') via a prompt or menu to test the quality of dynamic lighting.

More from AI-Powered Coding & App Development

View All