User Interface Development

The Inaugural Three.js Conference: A Deep Dive into the Future of Web Graphics and Interactive Experiences

Unless you’ve been rendering into the wrong framebuffer for the past few months, you’ve likely heard the groundbreaking news: the very first Three.js Conference is set to take place in Paris this September. This landmark event marks a significant milestone for the widely adopted JavaScript library, which has been instrumental in shaping the landscape of 3D graphics and interactive experiences on the web for nearly fifteen years.

The timing of this conference is particularly poignant. Three.js has become a foundational tool for a generation of creative developers, powering countless experiments, dynamic portfolio sites, immersive installations, engaging games, essential open-source tools, and the delightful rabbit holes of exploration that define web development. Its pervasive influence necessitates a dedicated gathering, a central hub for the vibrant and diverse community that has grown around it. This conference offers a unique opportunity for this community to converge, share knowledge, and collectively chart the future of web-based 3D.

Meet the Speakers of the First Three.js Conference | Codrops

The caliber of speakers slated to present underscores the significance of the event. The lineup reads like a who’s who of innovators and leading practitioners in the field, promising a rich tapestry of insights and expertise. Among the confirmed speakers are Bruno Simon, Célia Lopez, Daniel Beauchamp, Anderson Mancini, Natalia Markoborodova & Thomas Nattestad, Patrick Heng & Justine Soulie, Robin Payot, Julie Marting, Vicente Lucendo, and Jean Carlo Deconto (sunag), among others. Each of these individuals brings a unique perspective and a wealth of experience to the forefront, representing a broad spectrum of applications and advancements within the Three.js ecosystem.

A special opportunity is extended to readers of this publication: a 15% discount on conference tickets using the code CODROPS. This offer serves as a direct invitation to engage with this pivotal moment in the evolution of web graphics.

The Genesis of the Three.js Conference

The journey to the first Three.js Conference is a testament to the library’s enduring appeal and the community’s growing need for a dedicated forum. For years, Three.js has been at the vanguard of making complex 3D graphics accessible through web browsers. Its open-source nature and robust feature set have empowered developers to create experiences that were once the domain of desktop applications. The conference, therefore, is not merely a gathering; it is a celebration of this democratization of 3D on the web and a platform to foster its continued growth.

Meet the Speakers of the First Three.js Conference | Codrops

The decision to host the conference in Paris, a city renowned for its artistic heritage and burgeoning tech scene, adds a unique cultural dimension to the event. This strategic choice aims to create an inspiring and conducive environment for collaboration and innovation.

A Glimpse into the Minds of the Presenters

The conference’s focus extends beyond theoretical discussions to practical applications and emerging trends. By engaging with key speakers, we gain insight into their current obsessions, recent projects, and what they are eager to share with the community in Paris.

Bruno Simon: Pushing the Boundaries of WebGPU and Interactive Learning

Bruno Simon, a prominent figure in the Three.js community and the creator of the acclaimed Three.js Journey course, has been deeply immersed in TypeScript (TSL) development. He is currently undertaking a substantial WebGPU update for his course, an endeavor that has unexpectedly expanded into a monumental project. "It’s going to be huge! So huge that I can’t seem to see the end of it," Simon admits, humorously questioning if he’ll have enough time to prepare his conference talk.

Meet the Speakers of the First Three.js Conference | Codrops

Simon’s commitment to teaching TSL has necessitated hands-on, daily engagement with the technology, leading him to rebuild his entire portfolio as an experimental playground. One particular experiment, shared on X, began as a simple concept and evolved into an obsession. This creation features glowing spheres driven by real physics, converting kinetic energy into heat—a detail he describes as "just some nerd stuff that makes me smile." For his Paris presentation, Simon offers a cryptic hint: a single emoji, "🔥," suggesting a fiery or explosive topic, likely related to his cutting-edge work.

Célia Lopez: Bridging AI, WebGL, and Tangible Art

Célia Lopez, a 3D designer specializing in WebGL at OFF+BRAND, is driven by an insatiable curiosity for new techniques and workflows. Her recent explorations have led her into the realm of Artificial Intelligence (AI), investigating areas such as non-linear texture optimization and the transfer of textures from AI-generated models onto clean meshes. This work is crucial for integrating AI-generated assets into high-quality real-time 3D experiences.

Beyond her digital pursuits, Lopez is also launching her own ceramics brand, finding a new creative rhythm through handmade bowls and cups. She has been actively sharing her AI experiments, including a lightning talk at the Paris Design Meetup that showcased her refined workflow for AI-enhanced design. In Paris, Lopez promises an "unexpected" element to her talk, but more importantly, she expresses a profound sense of fulfillment at WebGL conferences. "WebGL conferences are where I feel the most fulfilled," she states, highlighting the value of learning from talented peers, exchanging ideas, and experiencing moments of joy and connection outside of everyday life.

Meet the Speakers of the First Three.js Conference | Codrops

Daniel Beauchamp: Personalization and Expressive Digital Experiences

Daniel Beauchamp’s work currently spans two distinct yet interconnected domains: interactive product customization for e-commerce and AI-generated commercials and brand films. Both areas are unified by the pursuit of creating digital experiences that are more personal, expressive, and memorable.

This curiosity has manifested in two new ventures: a Shopify app integrating Rive for interactive product customization and an AI commercial video service. Beauchamp’s overarching goal is to craft experiences that encourage engagement rather than passive consumption. In Paris, he plans to delve into how interactive product experiences can transform customization into a genuine user journey, emphasizing how interfaces can convey emotion and allow users to connect with a product before purchasing. His core philosophy, shared as a "treasure" from his creative journey, is to "Keep building, and at the same time keep exploring, learning, changing, and re-examining both the process and the things I make."

Anderson Mancini: Reimagining Real-Time Rendering with WebGPU

Anderson Mancini views WebGPU not just as an upgrade but as a catalyst for rethinking the possibilities of browser-based rendering. He is revisiting projects previously constrained by real-time performance limitations, leveraging modern rendering techniques to enhance visual fidelity and accessibility. His recent experiments focus on combining Screen Space Global Illumination (SSGI) and Screen Space Reflections (SSR) for architectural visualization, bringing high-quality real-time rendering to the real estate sector.

Meet the Speakers of the First Three.js Conference | Codrops

Mancini has also released r3f-webgpu-perf, a performance monitoring tool for React Three Fiber (R3F). This tool goes beyond displaying metrics, aiming to provide developers with a deep understanding of their scenes and real-time optimization guidance. In Paris, he will dissect two projects, Lumen Decor Studio and CerealBNB, sharing the technical underpinnings and lessons learned from his extensive background in game development. Attendees can anticipate practical insights into building high-performance Three.js experiences without compromising on ambition.

Natalia Markoborodova & Thomas Nattestad: Shaping the Future with HTML-in-Canvas

At Google Chrome, Thomas Nattestad and Natalia Markoborodova are at the forefront of shaping the web’s future, with a particular focus on HTML-in-Canvas. Nattestad sees immense creative potential in this API, alongside the challenges of establishing new web standards. He navigates the excitement of developer innovation with the imperative of advancing browser technology while upholding privacy, security, and interoperability. His work in introducing the HTML-in-Canvas API through Chrome for Developers sessions at Google I/O has highlighted how semantic HTML can be rendered into a canvas, retaining interactivity and accessibility.

Markoborodova is delving into the finer aspects of the platform, including color spaces and display rendering, testing HTML-in-Canvas across various configurations to refine the API. Her exploration into color space rendering, sparked by an observation of off-colors in an embedded video, led to a deep dive into color formats and browser rendering behaviors. In Paris, they will present complementary perspectives on HTML-in-Canvas. Nattestad will explore its potential to expand creative possibilities with "a heavy amount of whimsy," while Markoborodova will demonstrate its "FUN & FUNctional" nature, showcasing the coexistence of playful interactions and robust engineering.

Meet the Speakers of the First Three.js Conference | Codrops

Patrick Heng & Justine Soulie: The Symbiotic Dance of Illustration and Interactivity

Patrick Heng and Justine Soulie draw inspiration from the web itself, championing creators who push boundaries and experiment with the medium. This ethos informs their own work, which artfully blends interactivity, technical innovation, and illustration to craft playful experiences.

Their recent creative endeavors involve transforming Justine’s illustrations into small interactive games, augmented by experiments with MediaPipe and hand tracking to enhance tactility. The "creative ping pong" between illustration and development is a highlight of their process, where a sketch can inspire an interaction, and vice versa. In Paris, they will offer a behind-the-scenes look at their interactive WebGL comic, Ponpon Mania, detailing the fusion of illustration, storytelling, and real-time graphics. This session promises to be a blend of creative case study and technical deep dive, illustrating the power of interdisciplinary inspiration.

Robin Payot: Navigating AI’s Impact on Web Development

Robin Payot’s recent focus has been twofold: the arrival of his six-week-old daughter and the transformative impact of AI on web development. He notes the rapid integration of AI coding assistants in production environments, a development that seemed "unimaginable" just two years ago. However, Payot emphasizes the enduring importance of fundamental web development principles. "You still need to have a solid understanding of the web’s limitations and, at the very least, understand how the code works and what it does," he asserts.

Meet the Speakers of the First Three.js Conference | Codrops

This fascination led him to an experiment at work: a Three.js animation that reacts in real-time to an AI assistant’s voice, built with R3F and AI assistance. This project allowed him to converse with a chatbot while observing his shaders respond to varying voices, accents, and speaking styles. In Paris, Payot will share how AI, Three.js, and a touch of Zelda converged in his latest personal project. He also humorously recounts a "stubborn Claude session" that reinforced the irreplaceable value of direct debugging.

Julie Marting: Exploring Spaces, Both Physical and Digital

Julie Marting’s current reflections extend beyond the screen, encompassing both physical space, through decorating a new apartment, and digital realms, via experimentation with AI design tools. She is particularly interested in how AI can facilitate idea prototyping and imbue designs with life, approaching this unfamiliar territory with curiosity.

This curiosity recently led her to experiment with an AI-powered tool for creating real-time 3D videos for social media, an endeavor she acknowledges might seem counterintuitive but proved enjoyable to explore. In Paris, Marting will unveil the design and art direction behind the Three.js Conference website, sharing the strategic decisions, tricks, and secrets that shaped its playful identity. A recurring lesson for her is the generative power of mistakes: "Making mistakes and discovering new ideas or techniques as a result of those mistakes is almost part of our weekly routine as designers. It encourages us to constantly learn and try new things we hadn’t thought of before."

Meet the Speakers of the First Three.js Conference | Codrops

Vicente Lucendo: The Art of Emotion in 3D Design

Vicente Lucendo finds inspiration in unexpected sources, from the dynamic panel compositions of manga artist Yusuke Murata to the atmospheric juxtaposition of ancient structures with modern architecture. His keen eye for conveying motion in static imagery has translated into his technological explorations, where he has been experimenting with various physics engines, particularly favoring Jolt. "I really like Jolt," he states, "In my opinion, it should be more popular!"

In Paris, Lucendo will provide an insider’s look at his project Messenger, emphasizing that such creations rarely follow a linear path. He advocates for emotion as the guiding compass for technical and creative decisions. His personal process involves a conscious effort to view his work with fresh eyes, whether through seeking feedback or taking breaks, a practice that often reveals solutions previously obscured.

Jean Carlo Deconto (sunag): Mastering TSL and Modern Rendering Pipelines

Jean Carlo Deconto, known as sunag, is deeply focused on TSL. He recently developed "Tour of TSL," a guide designed to enhance developers’ understanding of the language and its ecosystem, with the aim of refining its syntax and implementation ahead of his Paris presentation. His recent experiments span critical areas of the Three.js ecosystem, including improvements to the Three.js Inspector, nanite-style rendering, voxel grid fire simulations, and deferred rendering for an upcoming release.

Meet the Speakers of the First Three.js Conference | Codrops

In Paris, Deconto will lead attendees through his "Tour of TSL," highlighting the language’s advantages for contemporary Three.js development. His engineering philosophy centers on separating responsibilities within software to build extensible systems. "One of the most important things for me is trying to separate the responsibilities of each part of the software to build systems that can be extended individually," he explains.

The Impact and Future of the Three.js Community

The inaugural Three.js Conference represents more than just an event; it signifies the maturation of a powerful technology and the vibrant community that drives its innovation. Over two days in Paris, developers, designers, and artists will convene to share not only technical expertise but also the serendipitous discoveries, creative breakthroughs, and even the inevitable bugs that contribute to the rich tapestry of web development.

The conference provides a crucial platform for knowledge exchange, networking, and the cross-pollination of ideas that will undoubtedly shape the next era of web-based 3D experiences. As technologies like WebGPU mature and AI continues to integrate into creative workflows, the discussions and collaborations fostered at this event will be instrumental in guiding the trajectory of interactive web graphics.

Meet the Speakers of the First Three.js Conference | Codrops

The availability of a discount code for readers further underscores the commitment to fostering broad participation. The success of this first conference is likely to set a precedent for future gatherings, solidifying Three.js as a cornerstone of the digital creative landscape and ensuring its continued evolution for years to come.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button