Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,24 @@ A technical journey documenting the implementation of native stereo image render

---

### [Community Update - v0.10.1](./blogs/community-update-v0-10-1.md)
*January 2025 • Community Update*

Our latest community update highlighting v0.10.1 developments, featuring parallel rendering, advanced CSS selector support, and enhanced Canvas 2D API.

**What's new:**
- Parallel web content rendering for improved performance
- Advanced CSS selectors (nth-child, CSS variables, pseudo-classes)
- Enhanced Canvas 2D API with strokeRect() support
- Improved rendering pipeline and developer experience
- Comprehensive test coverage expansion

---

### [Community Update - July 2025](./blogs/community-update-july-2025.md)
*July 2025 • Community Update*

Our latest community update highlighting recent v0.8.x developments, featuring CSS gradient implementation, performance optimizations, and developer experience improvements.
Our community update highlighting recent v0.8.x developments, featuring CSS gradient implementation, performance optimizations, and developer experience improvements.

**What's new:**
- CSS gradient support (v0.8.2)
Expand Down
120 changes: 120 additions & 0 deletions docs/blogs/community-update-v0-10-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# JSAR Runtime v0.10.1: Enhanced CSS Support and Parallel Rendering

*January 2025 Community Update*

We're excited to share the latest developments in JSAR Runtime v0.10.1! This release brings significant enhancements to CSS capabilities, rendering performance, and developer experience. For those new to JSAR, it's an open-source browser engine library that enables modern web technologies (HTML5, CSS3, JavaScript/TypeScript) in spatial computing and XR environments.

## 🚀 Key Feature Highlights

### Parallel Web Content Rendering

One of the most significant performance improvements in v0.10.1 is the implementation of **parallel web content rendering**. Each web content instance now renders in its own asynchronous thread using `std::async`, dramatically improving performance for complex spatial interfaces with multiple content areas.

**Technical Implementation:** The rendering system now processes each web content element independently, allowing the GPU to handle multiple render operations simultaneously. This is particularly beneficial for XR applications where multiple UI panels, HUDs, and content areas need to render at 90+ FPS without frame drops.

**Impact for Developers:** Applications with multiple web content areas (think multiple browser windows floating in 3D space) now experience significantly better performance. Users can expect smoother interactions and higher frame rates, especially on multi-core systems.

### Advanced CSS Selector Support

v0.10.1 introduces comprehensive support for modern CSS selectors, bringing JSAR's CSS capabilities closer to full browser standards. This includes:

- **CSS nth-child() and nth-of-type()** selectors for sophisticated element targeting
- **CSS Variables** support for dynamic styling and theming
- **Universal selector (*)** for global styling patterns
- **Pseudo-class selectors** including `:root`, `:where()` functional selectors
- **Attribute selectors** for content-based styling

**Why This Matters:** These CSS enhancements allow developers to create more sophisticated and maintainable spatial interfaces using familiar web technologies. Component libraries and CSS frameworks can now work more seamlessly in spatial environments, reducing the learning curve for web developers entering XR development.

**Technical Challenge:** Implementing CSS selectors in a spatial context required careful consideration of how traditional DOM tree traversal works in 3D space, especially for selectors that depend on element positioning and relationships.

### Enhanced Canvas 2D API

The Canvas 2D implementation continues to expand with the addition of the `strokeRect()` method and comprehensive test coverage. This seemingly small addition represents ongoing efforts to achieve full Canvas 2D API compatibility.

**Developer Impact:** Graphics libraries and charting solutions that rely on Canvas 2D now have better compatibility with JSAR Runtime. This opens up more possibilities for data visualization and 2D graphics in spatial applications.

## 🔧 Additional Improvements & Bug Fixes

### Rendering & Graphics
- **Render Queue Optimization:** Corrected sorting for positioned elements, ensuring proper depth ordering in complex 3D layouts
- **Depth Writing Improvements:** Enhanced depth buffer management with proper stencil testing for web content
- **GLSL Processing:** Upgraded shader processing pipeline to resolve preprocessing issues

### DOM & Browser Enhancements
- **Element.onclick Support:** Added inline event handler support for more intuitive JavaScript development
- **Scroll Performance:** Implemented scroll throttling to improve document performance and responsiveness
- **Font Management:** Optimized font manager to maintain single instances, reducing memory usage

### Developer Experience
- **Comprehensive Testing:** Added extensive test suites for borders, text rendering, flexbox layouts, and Canvas API
- **WebGL Validation:** Implemented `validateProgram` method for better shader debugging
- **Console Integration:** Enhanced logging support through Chrome DevTools Protocol (CDP)

## 📊 By the Numbers

- **25+ new features and improvements** across DOM APIs, CSS styling, and rendering systems
- **15+ bug fixes** addressing rendering, performance, and stability issues
- **10+ new comprehensive test pages** ensuring quality and preventing regressions
- **Full CSS Variables support** bringing dynamic theming capabilities to spatial interfaces

## 🎯 Looking Forward

The v0.10.1 release demonstrates JSAR's commitment to providing a robust, standards-compliant web runtime for spatial computing. These enhancements particularly benefit:

- **Web developers** transitioning to XR development with familiar CSS and DOM APIs
- **XR applications** requiring complex, performant user interfaces
- **Framework developers** building spatial web component libraries

## 📚 Resources

- **Full Changelog:** See [docs/changelogs/alpha.md](../changelogs/alpha.md#v0101) for complete technical details
- **Technical Documentation:** Explore implementation details in [docs/internals/](../internals/)
- **Getting Started:** Visit our [Quick Start Guide](../manual/quick-start.md) to begin building spatial web applications

## 🛠️ Quick Start

Experience the latest improvements today:

```bash
# Clone and build JSAR Runtime
git clone https://github.com/M-CreativeLab/jsar-runtime.git
cd jsar-runtime
npm ci && make jsbundle
make darwin # or android for mobile deployment
```

Try the new CSS features:

```html
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: #4ecdc4;
--secondary-color: #ff6b6b;
}

.spatial-card:nth-child(odd) {
background: var(--primary-color);
transform: translate3d(0, 0, 2px) rotateY(15deg);
}

.spatial-card:nth-child(even) {
background: var(--secondary-color);
transform: translate3d(0, 0, 2px) rotateY(-15deg);
}
</style>
</head>
<body>
<div class="spatial-card">First Card</div>
<div class="spatial-card">Second Card</div>
<div class="spatial-card">Third Card</div>
</body>
</html>
```

---

*JSAR Runtime is an open-source project enabling the spatial web. Follow our development on [GitHub](https://github.com/M-CreativeLab/jsar-runtime) and join our community discussions.*