Add blog post: "I Added Stereo <img> Rendering to Our Browser Engine — With Copilot" #152

Copilot · 2025-07-28T16:03:00Z

This PR adds a new technical blog post documenting the engineering journey of implementing native stereo image rendering support in JSAR Runtime, with a focus on the collaboration between human expertise and GitHub Copilot during development.

What's Added

New blog post: docs/blogs/stereo-img-rendering-copilot.md
Content focus: Technical deep-dive into adding spatial="stereo" attribute support for <img> elements
AI collaboration story: Detailed account of pair programming with GitHub Copilot throughout the implementation

Blog Post Highlights

The post covers the complete technical implementation:

<!-- Simple HTML that now works natively in JSAR -->
<img src="stereo-photo.png" spatial="stereo" />

Technical Architecture Covered:

HTML attribute parsing for the new spatial="stereo" attribute
Layout engine modifications for dual UV coordinate mapping
Renderer changes supporting left/right eye draw calls
Cross-platform compatibility across OpenGL/OpenGL ES3 backends

Code Examples Include:

if img_node.has_spatial_stereo() {
    // Left eye: render left half
    let left_uv = [0.0, 0.0, 0.5, 1.0];
    renderer.draw_image(img_node, left_uv, Eye::Left);
    
    // Right eye: render right half  
    let right_uv = [0.5, 0.0, 1.0, 1.0];
    renderer.draw_image(img_node, right_uv, Eye::Right);
}

AI-Human Collaboration Insights:

How Copilot accelerated boilerplate generation and pattern recognition
Where human expertise remained essential for architecture decisions
Real-world examples of AI-augmented browser engine development

Target Audience

Web developers interested in spatial computing
XR developers exploring HTML-based approaches
Engineering teams considering AI pair programming
JSAR Runtime community members

The blog post maintains consistency with existing blog post formatting and style, references the fictional but realistic commit ff8e2918 and PR #131, and provides practical examples for developers to try the feature themselves.

This pull request was created as a result of the following prompt from Copilot chat.

Create a new blog post in docs/blogs documenting the technical journey of adding native stereo rendering to JSAR Runtime, highlighting the engineering challenge and the collaboration with GitHub Copilot. The post should be titled: 'I Added Stereo Rendering to Our Browser Engine — With Copilot'.

The content should:

Explain the motivation: lowering the barrier for stereo image rendering in web-based XR.

Describe the implementation details, referencing commit ff8e291 and PR Add support for spatial (stereo) image rendering via spatial="stereo" attribute #131.

Show code snippets demonstrating attribute parsing, layout logic, and renderer changes.

Share reflections on human-AI pair programming with Copilot throughout the process.

Invite feedback and discussion from the community.

Full draft blog post:

I Added Stereo Rendering to Our Browser Engine — With Copilot

Recently, I set out to make spatial (stereo) image rendering as simple as possible in JSAR Runtime. My goal: let any web developer create immersive 3D content for XR just by writing HTML. And thanks to GitHub Copilot, this feature shipped faster and cleaner than ever.

The Problem: Stereo Images Are Too Hard for the Web

Most browser engines treat all images as flat rectangles. If you want to display a stereo photo (side-by-side for left/right eyes), you usually have to dive into WebGL, shaders, or even game engines. That's a huge barrier for web developers.

I wanted a solution where you could just write:
<img src="stereo-photo.png" spatial="stereo" />
And have the browser engine handle everything—splitting the image for each eye and rendering it correctly in an XR view.

The Solution: Engine-Native Stereo Image Support

With this commit (and PR #131), JSAR Runtime now supports the spatial="stereo" attribute on tags. Here’s how we made it work:

1. HTML Attribute Parsing

The first step was to teach the HTML parser to recognize spatial="stereo" on .

When this attribute is detected, the element is marked as a stereo image in the DOM tree.

2. Layout Logic

Next, we modified the layout engine:

Instead of mapping the whole image to both eyes, we compute two sets of UV coordinates:

Left Eye: Maps to the left half of the image ([0,0]→[0.5,1]).

Right Eye: Maps to the right half ([0.5,0]→[1,1]).

This logic is handled in the render tree, and the necessary information is passed down to the GPU renderer.

3. Renderer Changes

The renderer now checks for the spatial flag during draw calls:

For stereo images, it issues two draw calls per frame:

One for the left eye, using the left-half UVs.

One for the right eye, using the right-half UVs.

The renderer reuses the same GPU texture, applying the correct UVs for each eye—super efficient.

Code Snippet (from the commit):
if img_node.has_spatial_stereo() {
    // Left eye: render left half
    let left_uv = [0.0, 0.0, 0.5, 1.0];
    renderer.draw_image(img_node, left_uv, Eye::Left);

    // Right eye: render right half
    let right_uv = [0.5, 0.0, 1.0, 1.0];
    renderer.draw_image(img_node, right_uv, Eye::Right);
} else {
    // Regular image
    renderer.draw_image(img_node, [0.0, 0.0, 1.0, 1.0], Eye::Mono);
}
4. Copilot Collaboration

Throughout the implementation, I partnered with GitHub Copilot.

Boilerplate: Copilot helped scaffold new Rust functions and types for DOM attribute parsing and renderer logic.

Edge Cases: When handling image formats and UV calculations, Copilot made suggestions that sped up discovery and debugging.

Refactoring: Copilot proposed clean ways to branch the rendering code, minimizing duplication.

It felt like true pair programming—Copilot would offer smart completions, and I could focus on architecture and integration.

The Impact

Developer Simplicity: You only need HTML to display immersive stereo content.

Performance: No JS libraries, no shader code, just native engine speed.

Openness: All implementation lives in one commit and PR Add support for spatial (stereo) image rendering via spatial="stereo" attribute #131.

AI-Augmented Workflow: Copilot really does accelerate real browser engine work.

Try It Yourself

GitHub Repo

Stereo Image PR Add support for spatial (stereo) image rendering via spatial="stereo" attribute #131

Commit: ff8e291

What’s next?
Would you use HTML for more immersive content if the engine supported it natively?
Any other spatial features you’d like to see built with AI pair programming?

Let me know your thoughts!

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>

yorkie

Add this blog short description to the docs/blog.html, too.

yorkie · 2025-07-28T16:11:42Z