Building a GPU-based browser renderer from scratch (no Skia, no Chromium) — static Google homepage rendering

https://preview.redd.it/ix4isxfa6xsg1.png?width=1238&format=png&auto=webp&s=45ab88a26068683d489cbb9fa6958015838280db

Hey everyone,

I’ve been working on a browser engine called Aurora, focused on a GPU-first rendering pipeline using wgpu — no Skia, no Chromium just wgpu and vello.

I recently reached a milestone where my custom GPU painter can render a static Google homepage fixture:

• Custom layout + rendering pipeline
• Pure GPU painting (wgpu)
• No existing browser engine dependencies
• Rendering from a static HTML fixture

To be clear, this is not a full browser yet:

• Text shaping is still very rough
• Layout is simplified

But it’s the first time I can render a real-world page structure end-to-end through my own pipeline, which feels like a big step.

Next steps:

• Proper text shaping (currently experimenting beyond HarfBuzz)

Would love feedback, especially from anyone who’s worked on rendering engines or GPU pipelines.

This was the page i used to test :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="topbar">
      <nav class="top-links">
        <a href="#">Gmail</a>
        <a href="#">Images</a>
        <a href="#" class="app-link">Apps</a>
        <a href="#" class="sign-in">Sign-in</a>
      </nav>
    </header>

    <main class="hero">
      <h1 class="logo" aria-label="Google">
        <span class="g-blue">G</span><span class="g-red">o</span><span class="g-yellow">o</span><span class="g-blue">g</span><span class="g-green">l</span><span class="g-red">e</span>
      </h1>
      <div class="search-shell">
        <span class="search-icon">Q</span>
        <input class="search-input" type="text" placeholder="Search Google or type a URL">
      </div>
      <div class="actions">
        <button>Google Search</button>
        <button>I'm Feeling Lucky</button>
      </div>
      <p class="tagline">Static Aurora fixture for Google homepage rendering.</p>
    </main>

    <footer class="footer">
      <div class="footer-row">
        <span>United States</span>
      </div>
      <div class="footer-row footer-links">
        <a href="#">Advertising</a>
        <a href="#">Business</a>
        <a href="#">How Search works</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Settings</a>
      </div>
    </footer>
  </body>
</html>