Skip to main content

Create 3D Gaussian Splat Apps with the PlayCanvas Editor

Β· 3 min read

CLICK HERE to open in a new tab. Credits: Splats scanned at the V&A Museum. HDRI from Poly Haven.

We have big news for the 3D Gaussian Splat community - the PlayCanvas Editor now has fully integrated support for splats! Learn how to quickly build stunning, interactive 3DGS applications today.

What you need

🀳 A smartphone
πŸ’» A computer with a web browser
⏱️ A small amount of time

The application above shows several splats assembled in a single application, with animation and post effects spicing up the visuals. Let's check out how it was built.

Step 1: Clean in SuperSplat πŸ§Ήβ€‹

After capturing the statues to PLY format, our first stop is SuperSplat, the open source tool for editing and optimizing 3D Gaussian Splats. Here, in a little over a minute, we can isolate the statue from the background and align it with the origin:


Once we are done, we can download the splat using our compressed PLY format. In this case, our downloaded PLY is only 1.56MB!

Step 2: Import into the Editor πŸš§β€‹

Now that we have a clean, compressed PLY, we simply need to drop it into the Editor's Asset Panel. And from there, drag it into the viewport to add it to the scene. Let's do that (along with a cube map for a photographic backdrop):


The PlayCanvas Editor is a powerful visual environment for building and publishing 3D scenes. You can:

  • Grab useful scripts (and other assets) from the Asset Store. Here, we import an Orbit Camera script.
  • Create beautiful user interfaces, using either HTML or PlayCanvas' built-in UI system.
  • Add sound, physics, VR/AR support and much, much more.

Step 3: Add Animation and Post Effects βœ¨β€‹

What really makes the demo pop is the transitions that fade the statues in and out.


With the Editor, you can customize the shader code that renders your splats to apply stunning animation effects. For the transition between statues, individual splats are transformed and recolored over time, while a full-screen bloom effect is ramped up and down.

Resources​

Today's release makes working with 3D Gaussian Splats both easy and fun! We've shown you how to build a virtual gallery or museum but the possibilities are endless. With 3D Gaussian Splats in the PlayCanvas Editor, you can target many verticals: product visualization (furniture, clothing, consumer electronics), automotive, education, travel and so much more.

To get started, here is an useful list of resources:

Go Forth and Create​

We hope you love today's update as much as we do! ❀️

But let us know what you think by heading over to the forum or ping us on X!

A Faster SuperSplat with PWA Support

Β· 2 min read

Today, we are announcing the latest release of SuperSplat, the open source tool for editing and optimizing 3D Gaussian Splats. If you don't have a PLY file to hand, here's an example!

SuperSplat PWA

Version 0.17.1 focuses on two key areas: performance and PWA support.

Performance Improvements​

SuperSplat is now over 2x faster on the GPU! πŸƒ

Compare before and after (notice GPU time dropping from 32ms to 13.5ms for the bike scene):

SuperSplat PWA

This is thanks to the v1.71.0 release of the PlayCanvas Engine, which includes a dramatic overhaul of how splats are processed by the GPU. For the technical details, take a look at this pull request.

The result is that SuperSplat can now throw around millions of splats and still maintain a silky smooth frame rate. Try it for yourself!

PWA Support​

A Progressive Web App (PWA) is a web application that provides a native app-like experience, including the ability to install it on a user's home screen or desktop.

From today, SuperSplat is shipping with PWA support! πŸŽ‰


To install SuperSplat as a PWA:

  1. Visit https://playcanvas.com/supersplat/editor.
  2. Hit the Install SuperSplat button in the address bar.
tip

For your convenience, pin SuperSplat to the Taskbar (Windows) or add it do the Dock (macOS).

PLY File Association​

With SuperSplat installed as a PWA, your operating system can now open launch PLY files directly into the tool. Simply right-click on a PLY file and select SuperSplat to open it.


You can also set SuperSplat as the default tool to open your PLYs. Then, you can simply double-click a PLY file to open it instantly in SuperSplat!

Your Feedback Matters​

We hope you love today's update! ❀️

The SuperSplat community has grown a lot in recent weeks and we want to get your feedback. What other features would you like the PWA to get? Are you still experiencing any performance problems? What is still missing from SuperSplat? Let us know by heading over to the forum or ping us on X!

Build WebGPU Apps Today with PlayCanvas

Β· 3 min read

It's here! πŸ₯³ Today, we're excited to announce that WebGPU support has officially arrived in the PlayCanvas Editor.

Editor with WebGPU Scene

WebGPU on the Rise​

Since its inception back in 2010, PlayCanvas has been layered on top of WebGL. In 2017, we were proud to launch support for WebGL 2.0 in partnership with our friends at Mozilla. April 2023 marked the beginning of a new era for web graphics when Google enabled WebGPU by default in Chrome 113. Since then, WebGPU adoption has exploded and today, Web3D Survey reports that 62.19% of end users can now run WebGPU. With Firefox and Safari due to launch their WebGPU support in the not-too-distant future, expect this number to rise dramatically in 2024.

Why WebGPU Matters​

If you enable WebGPU for your PlayCanvas project, you may not notice much difference to begin with. In fact, we have put a great deal of effort into ensuring your WebGL projects look identical under WebGPU. But over time, there is are a great deal of opportunities to achieve performance improvements due to WebGPU's reduced driver overhead.

Another key feature unique to WebGPU is support for Compute Shaders which allow for general computation on the GPU. Support for Compute Shaders landed in Engine v1.70.0. Here you can see Computer Shaders in action simulating 1 million particles on the GPU:

Click here to run it for yourself in a WebGPU-enabled browser (i.e. Chrome or Edge).

In short, WebGPU represents the future for PlayCanvas and you can expect some incredible advances in performance and functionality over the coming months.

Getting Started with WebGPU​

WebGPU support in PlayCanvas is still considered 'Beta'. There are still some unimplemented features (for example, the run-time lightmapper is still not supported). Therefore, you have to currently 'opt in' to WebGPU support. To do this, open your Project's Settings in the Inspector and expand the RENDERING section. Then update Graphics Devices to include WebGPU (beta).

Editor with WebGPU Scene

Once we are satisfied WebGPU support has matured enough, it will become the default.

Your Feedback is Important​

Since WebGPU support is new, we rely on the community for feedback. What works and what doesn't? Please submit an issue if you discover any problems or kick off a new thread on the forum if you want to discuss WebGPU support in more detail. We want to hear what your opinions! πŸ‘‚

Using Visual Studio Code with PlayCanvas

Β· 2 min read

Visual Studio Code is massively popular. In the Stack Overflow 2023 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool among 86,544 respondents, with 73.71% reporting that they use it.

Any PlayCanvas developer building directly on top of the Engine will very likely opt to use VS Code. But if you use the PlayCanvas Editor, you will normally rely on the built-in, browser-based Code Editor. Today, we're excited to give you another option by launching an open-source Visual Studio Code Extension for PlayCanvas.

VS Code Extension

Benefits​

The PlayCanvas Code Editor is actually built on the Monaco Editor, the beating heart of VS Code. So why use VS Code instead of the PlayCanvas Code Editor?

  • GitHub Copilot - leverage AI to help you write PlayCanvas code faster.
  • Powerful IntelliSense tools (code completion, parameter info, quick info, and member lists).
  • Leverage a huge library of other extensions to accelerate your development.

We ❀️ Open Source​

As you might expect, we have open sourced the VS Code extension under a liberal MIT license!

So if you find a bug or have a suggestion, please do log an issue. And for the more adventurous, consider making a code contribution!

We want you to feel empowered to make these tools your own. Let's make them awesome together! πŸ™Œ

Get Started Now​

If this all sounds great to you, why not give it a try? Head over to the User Manual for instructions on how to get started:

READ THE DOCS

Massive Upgrade for the PlayCanvas Developer Site

Β· 4 min read

Today, we are excited to announce the brand new PlayCanvas Developer Site and API Reference Manual!

Developer Site​

Let's start by taking a look at the new Developer Site, home of the PlayCanvas User Manual and Tutorials.

Developer Site Landing Page

Migrating from Metalsmith to Docusaurus​

Since PlayCanvas was born in 2011, the basic look of the Developer Site has changed little. The content was written in Markdown and converted to a static HTML site using a tool called Metalsmith. Customizing the site to our needs meant we had to write many Metalsmith plugins (for localization, navigation and more) and a lot of HTML and CSS to style the pages as we wanted.

13 years later, the world of static site generators has moved on with lots of exciting new options! We evaluated Docusaurus and decided to migrate over to it.

What's New​

So what made Docusaurus so compelling? First up, the migration was going to be straightforward because, like Metalsmith, Docusaurus consumes Markdown and outputs a static site. And much of the customization we did for Metalsmith is supplied 'out-of-the-box' with Docusaurus. So that's all great. But the new site comes with lots of cool new features we known you're going to love:

The site now integrates Algolia for advanced searching of the documentation.

Developer Site Search

This is a quantum leap over what came before. Try it (by pressing CTRL + K) - you'll be amazed. 🀯

πŸŒ’ Light and Dark Modes​

Easily switch between light and dark themes (by clicking on the sun/moon icon top-right).

Developer Site Light and Dark Modes

🌏 Language Selection​

Switch language from the nav-bar. At the moment, we're shipping with Japanese translations.

Developer Site Localization

πŸ‘©β€πŸ’» Edit on GitHub​

As you might expect, the Developer Site is Open Source (MIT). Every page now has a handy link to the content on GitHub. Spot a mistake? Now can you fix it yourself and improve the docs for the community!

🧭 Easier Navigation​

At the top of each page, you'll find 'Sidebar Breadcrumbs' which allow you to click back up the page hierarchy.

Developer Site Breadcrumbs

To the right of each page, you'll find a table of contents which can be a big help, especially for long pages.

Developer Site Table of Contents

And at the bottom of each page, you'll find 'Previous' and 'Next' links that allow you to read through the User Manual sequentially.

Developer Site Previous and Next Links

API Reference​

We are not just launching a new Developer Site today. We are also launching our brand new, upgraded API Reference Manual!

API Reference Site

Migrating from JSDoc to TypeDoc​

Since the start, we have relied on JSDoc to generate our API reference manual. But since then, we have seen the introduction of TypeDoc which offers some major advantages over JSDoc.

🎨 High Quality Default Theme​

While it's not perfect, the default TypeDoc theme is gorgeous and a big improvement over our custom JSDoc theme. It provides:

  • Light and dark modes (like the main developer site)
  • Links to the source code on GitHub
  • Grouping of API into related categories
  • Powerful search (press / to activate it)
  • ...and much more!

It's a great foundation for us to begin with and we can customize the default theme to our requirements as needed.

πŸ”— Easy Combining of APIs​

Did you know that PlayCanvas develops frameworks and libraries other than the PlayCanvas Engine? There's PCUI, a front-end framework for web-based tools. There's the PlayCanvas Editor API for automating the interface. And more! The new API reference collects all of the PlayCanvas APIs into a single manual.

API Reference Site APIs

Open Source FTW​

Everything we are announcing today is 100% open source.

We want to empower to community to get involved and make PlayCanvas better for everybody. It's never been easier to submit your first pull request on GitHub. So why wait - get started today! ❀️

Compressing Gaussian Splats

Β· 4 min read
Donovan Hutchence
Staff Software Engineer

Introduction​

3D Gaussian Splatting is a new method for digitizing and rendering real world objects. With gaussian splatting, you can digitize a scene from a few photos using services like Luma Labs or Polycam. These services take the set of photos and generate a 3d Gaussian Splat scene in PLY format.

For example, this is a Gaussian Splat scene rendered in PlayCanvas.

What is a Splat?​

Gaussian Splat Scenes are not made up of polygons and textures. Instead, they are made up of many (up to millions) of individual, unconnected blobs called splats. A splat is just a particle in space with size, orientation, color and opacity.

Below you can see a single brown splat selected. The splat bounding box shows its orientation and size:

Splat Example

The gaussian part of the name comes from the shape of splat itself: the splat opacity has a gaussian falloff from its center to its edge.

Engine Support​

The PlayCanvas team has been adding support to the engine for loading and rendering Gaussian Splat PLY files:

Engine Example

Since the resulting files are often messy and require cleaning, we released SuperSplat, a tool for cleaning and processing gaussian splat PLY files:

SuperSplat Example

PLY Format​

However, the default gaussian splat PLY format as exported by training tools is large.

This is because the uncompressed format stores a large amount of data per splat:

NameData FormatBytes
Position3 x float12
Orientation4 x float16
Scale3 x float12
Spherical harmonics / color48 x float192
Total232

For example, the original guitar.ply scene file takes 132.8 MB (32 MB excluding spherical harmonic data).

Compressed PLY Format​

So we introduced a compressed PLY format for use in runtime applications. The compressed PLY file format ignores the unused spherical harmonic data and stores the rest of the elements in quantized integers.

The format can be summarized as follows:

  • Split the scene into chunks of 256 splats
  • For each chunk, store the min and max (x, y, z) for position and scale in floating point
  • For each splat in the chunk, store a normalized and quantized value for position and scale (relative to chunk extents) and orientation and color

This data layout results in the following data per chunk:

NameData FormatBytes
Position bound6 x float24
Scale bound6 x float24
Total48

And the following data per splat:

NameData FormatBytes
Positionuint32 (11, 10, 11)4
Orientationuint32 (2, 10, 10, 10)4
Scaleuint32 (11, 10, 11)4
Coloruint32 (8, 8, 8, 8)4
Total16

As a result, the compressed version of guitar.ply takes only 8.7 MB.

Do It Yourself​

The easiest way to generate a compressed PLY file yourself is using the SuperSplat tool. Load the PLY file into SuperSplat and export it again using the 'Compressed Ply File' option:

SuperSplat Export

If you are interested in the file format specifics, see this code which demonstrates how to decompress the file data.

See this editor project for an example of loading and rendering a compressed gaussian splat PLY file. Or you can run it here.

Summary and Future​

We have introduced a new compressed PLY format for gaussian splatting which is roughly 4x smaller than uncompressed data and can be used in realtime applications.

In future we hope to:

  • store splats hierarchically for optimized rendering and culling
  • implement realtime splat LOD
  • test skinning and animation of gaussian splats
  • further compress gaussian splat data
  • optimize WebGPU rendering

References​

The compressed format is largely based on the fine work of Aras Pranckevičius and his blog posts.

Boost Your Efficiency: Editor gets Support for AVIF and WebP

Β· 3 min read
Mark Lundin
Software Engineer

AVIF + WebP Support

Today we're excited to announce that PlayCanvas now supports WebP and AVIF images natively in the editor. Two new, efficient image formats built for the web.

This is not just an exciting update for us but a game-changer for anyone looking to optimize their projects for faster load times and better quality.

JPGs and PNGs have served us well. They're reliable and you can use them everywhere. AVIF and WebP are the new kids on the block. They offer better compression with a wider range of features like alpha channels, HDR and wide color gamut. But how do these formats work in practice and are they really that good? Let's dive in.

Take a look at the following images:

They look strikingly similar, but the file size tells a different story. The AVIF image on the left has a file size of just 18Kb, and the JPG counterpart over 4 times larger at 74Kb! This level of compression is not just impressive on its own. When you're working on a project with multiple textures, switching to AVIF and WebP formats could considerably reduce your overall load time.

What does this mean for you? Well, that's simple: it's all about efficiency and speed without sacrificing quality. Textures are one of the biggest assets in a 3D project and AVIF and WebP significantly reduce image sizes compared to traditional JPEGs and PNGs and that means faster load times and happier users. πŸ™Œ

AVIF all the things?​

Ok, so browser support for AVIF is good, but not great according to caniuse, so always check support and use the right format for your users. Different formats are better suited for different content. It's not a one-size-fits-all solution, so we encourage you to explore various options and choose the one best for you.

Getting Started​

Easy! Just start uploading your AVIF and WebP files into the Asset Panel, and for those of you wanting to convert your existing assets, you can now right-click on your asset in the Asset Panel and quickly convert your asset into a PNG, JPG, WebP or an AVIF.

Quick Convert

So there you have it! This is not just a feature release; it's our way of saying we're listening and we care. We're excited to hear your thoughts on these new features. Give them a try and share your experiences with us.

Till then, keep creating, keep innovating!

glTF Viewer 4.0 Adds WebGPU Support

Β· 4 min read

We're thrilled to announce the launch of the open source glTF Viewer 4.0, an update that supercharges your 3D model viewing experience with powerful features and support for the latest web technologies!

glTF Viewer 4.0

"Cyber Samurai" by KhoaMinh is licensed under CC BY 4.0.

TRY IT NOW

This new release is chock-full with enhancements aimed at providing more realistic, insightful, and versatile viewing options for your glTF files. Let's dive into the headline features of glTF Viewer 4.0.

New WebGPU Renderer​

WebGPU Logo

Topping the list of today's updates is support for WebGPU! WebGPU heralds a new era in graphics and compute capabilities, offering enhanced performance and efficiency. Users can now select WebGPU as their default renderer, and don't worry if your platform doesn't support it yet - the viewer gracefully falls back to WebGL 2, and subsequently WebGL 1, depending on API availability. Note that WebGPU support is considered beta for the moment and you'll need to proactively enable it and refresh the viewer to check it out:

Enable WebGPU for glTF Viewer

Also make sure you're running the viewer in a browser that supports WebGPU. At time of writing, this means Google Chrome!

Enhanced WebXR AR Mode​

Take your 3D models into the real world with our revamped WebXR Augmented Reality (AR) mode! Available currently on Android devices, this enhanced AR mode lets you view any model in your actual environment, complete with intuitive new controls that allow you to accurately position and rotate objects in the real world. Let's hope Apple decides to roll out WebXR support on iOS soon! πŸ™

Frame Selected Node​

Navigating large scenes can be a pain - Viewer 4.0 addresses this by allowing you to select a node in the scene via the hierarchy panel on the left. You can then press 'F' on the keyboard to frame that node and recenter the orbit camera on that node's position.

Better Immersion with Projective Sky Dome​

"130" by mononofu is licensed under CC BY 4.0.

Experience realistic photographic skies with our new projective sky dome! While previous versions allowed for skyboxex with an infinite projection, 4.0 introduces a dome-shaped skybox projection that incorporates a flat ground plane. This warps the skybox texture to have a more believable appearance, delivering a more authentic and immersive perspective, melding your 3D models with strikingly realistic backdrops.

Debug and Inspect with Render Mode​

glTF Viewer Render Mode

Ensuring that developers can seamlessly troubleshoot and inspect glTF files, the new render mode allows you to select and display individual inputs/outputs of the render pipeline, including albedo, emissive, normals, gloss, AO, and more. This new level of insight is invaluable for debugging, making it even easier to work with your glTF data.

Enhanced Realism with VSM Shadows​

The addition of Variance Shadow Mapping (VSM) casts your 3D scenes in a new light, literally! Shadows aren't merely aesthetic; they provide context and depth, especially in AR mode, assisting to ground your object naturally within its real-world environment. Explore scenes with a newfound depth and realism that draws viewers into the experience, both in standard and AR viewing modes. Find the new shadow controls in the Light Settings panel:

glTF Viewer Light Settings

Join Our Open Source Community​

We're not just excited to share these innovations with you; we're eager to hear your thoughts and welcome your contributions! If there's a feature you're longing for, please don't hesitate to submit your requests.

Better yet, become an active contributor to our codebase! Our open-source community thrives on collaboration and fresh perspectives. So, dive right in, explore the code, and let's shape the future of 3D model viewing together! Your expertise and insights could help shape the next release.

GO TO GITHUB NOW

Conclusion​

With glTF Viewer 4.0, we're redefining the standards of 3D model viewing. From WebGPU-powered rendering to WebXR-powered AR, this update is designed to inspire, assist, and elevate your work with glTF data.

So stay creative, friends, and we'll see you on the forums! πŸ‘‹

PlayCanvas Adds Sketchfab Integration

Β· 3 min read

Today, we're excited to announce the integration of Sketchfab into the PlayCanvas Editor!

"Spartan Armour" by McCarthy3D is licensed under CC BY 4.0.

With today's launch you'll have instant access to Sketchfab's enormous library of high quality 3D content right inside the Editor.

What Is Sketchfab?​

Sketchfab is a platform that allows users to publish, share and discover 3D content on the web. You can think of it as a sort of "YouTube for 3D models". The platform hosts millions of 3D models in various formats, including glTF, OBJ, STL, and more.

Users can upload their 3D models to Sketchfab and embed them in other websites much like one would embed a YouTube video. This has made it popular for showcasing 3D models for a wide range of uses including game assets, 3D scans, architectural models, and educational content.

Accessing Sketchfab from the Asset Store​

Earlier this month, we announced the brand new PlayCanvas Asset Store. The Asset Store is an in-Editor panel of useful assets that you can use in your projects. With a few clicks, you can browse, discover and import various types of content. So it is the obvious place to incorporate the vast Sketchfab content library.

To access the Sketchfab library, simply hit the Asset Store button on the Asset Panel header and select the SKETCHFAB filter on the left.

Open Sketchfab

Authorizing PlayCanvas to Access Sketchfab​

If you want to import models from Sketchfab into PlayCanvas, you first need to create a Sketchfab account. Then, the first time you try to import a Sketchfab model in the Asset Store, you will be asked to authorize PlayCanvas to access your Sketchfab account.

Authorize Sketchfab

It's so quick and easy!

New License and Author Info for Assets​

Sketchfab assets are all tagged with a license and an author. When you import Sketchfab content into your PlayCanvas projects, it's important that we preserve this information. Now, when you click on any imported asset, you'll see we've added links to license and author information in the Inspector panel.

Sketchfab Licenses

This ensures that the author's licensing wishes are respected and that they recieve credit for their work.

Go Forth and Create​

With today's release, it's never been easier to create interactive 3D experiences for the web. We hope you love the new Sketchfab integration. But, as always, we love to hear your opinions so head over to the forum and join the conversation. Happy creating! πŸš§πŸ‘·

Moving from WordPress to Jekyll - A Case Study

Β· 7 min read

Welcome to the new PlayCanvas blog! 😎

PlayCanvas To Jekyll

We have made the decision to move from WordPress to Jekyll and although it's early days, so far, we are very pleased with the results. Therefore, we thought it might be useful to explain the reasons why we did this and describe the process we followed.

Some History​

We originally started our blog back in February 2012 with a very low-key post. We installed our own instance of WordPress and that functioned fine for a few years. However, in 2015, we decided that we didn't want to deal with managing a WordPress instance ourselves and so we signed up for WPEngine, a WordPress hosting service. And there we stayed until today.

A Better Way?​

Over the years, some frustrations over WordPress did start to materialize. Customizing styling was tricky, bulk editing posts was not an option, managing media through the media library was quite inconvenient, and so on. On top of that, our blog was continuing to grow in popularity and WPEngine costs were rising. A team member suggested Jekyll as an alternative so we ran some tests to see what would be involved in a migration.

Migrating from WordPress to Jekyll​

First up, I should say that you should make use of ChatGPT when you attempt something like this. It made it a smooth and pleasant experience for me. But so you can see how straightforward it was, here are the key steps:

  1. Export Your WordPress Content. On your WordPress Dashboard, navigate to Tools > Export and select 'All Content'. Click 'Download Export File'. You should receive an XML file that contains all of your site’s content.

  2. Convert WordPress Export to Jekyll Format. To convert your WordPress export file to a Jekyll-friendly format, you can use a tool called exitwp. Here are the steps:

    • Clone or download exitwp from its GitHub repository.
    • Put your WordPress XML file in the wordpress-xml directory in the exitwp directory.
    • Run exitwp (requires Python and some libraries, see the repo's README for details).
    • This will generate a _posts directory containing all your blog posts converted into markdown format that Jekyll understands.
  3. Setting Up Jekyll.

    • Install Ruby and Jekyll. For installation guide refer to Jekyll's official site.
    • Create a new Jekyll site by typing jekyll new my-awesome-site in the command line.
    • Replace the _posts directory in your new Jekyll site with the _posts directory that exitwp generated.
    • You can run your site locally to see how it looks by using the command bundle exec jekyll serve.
    • Then, open your browser to http://localhost:4000.

Once I had our blog post content successfully exported to a basic Jekyll site, I checked everything in to a new GitHub repository. From this point, I wanted any change I made to the content to be tracked via Git version control - I mean, why wouldn't you?

The initial migration to Markdown worked OK but it wasn't perfect. There was a lot of superfluous whitespace in the generated Markdown and syntax was broken in places. So I took the opportunity to do a wholesale spring clean of the Markdown content.

Prettier​

Prettier is a great code formatter but you may not know that it also has built-in support for Markdown formatting. I installed Prettier via NPM and ran it over all Markdown files:

prettier --write _posts

All formatting was now beautifully consistent.

Linkinator​

Linkinator is a tool for reporting broken hyperlinks in both Markdown and HTML. I scanned the locally generated Jekyll site with it using the following command:

linkinator . --server-root _site --recurse --verbosity error

I fixed well over 100 dead links. The older the post, the more dead links there tended to be (as you might expect). While I was always able to use Linkinator on the published WordPress site, it was never convenient to skip from post to post and edit hyperlinks in the WordPress UI (we have over 220 posts). So I never made the time for it. Now I was able to quickly search and replace links in Visual Studio Code and it was a breeze.

Aside from giving your readers a better experience, here's what ChatGPT has to say about dead links:

While Google's algorithms are complex and multifaceted, it is generally understood that having too many broken or dead links on your site can negatively affect your website's SEO ranking, albeit indirectly.

So this step was definitely worth doing!

Media Library​

Every WordPress blog has a Media Library that contains all of the images and videos referenced by your posts. The PlayCanvas Media Library had over 1GB of content. However, I noticed that a large amount of content was not actually referenced by any post. I wanted to ensure that I exported only the used media (since I didn't want to bloat the GitHub repository).

  • Step 1: Install WordPress plugin Media Cleaner and use it to delete unused media files.
  • Step 2: Install WordPress plugin Export Media Library to download all remaining media files in a ZIP.

This process cut the Media Library from 1GB to about 550MB. I simply extracted the ZIP contents to assets/media (relative to the root folder of my Jekyll site) and then did a search and replace of all media embed links to use the new file location. Easy!

Hosting on GitHub Pages​

I now had a fully exported and functional Jekyll blog. But where to host it? One option was to throw the static site onto a file server and put it behind a CDN. But wait, the file-set of the Jekyll blog now sits in GitHub, so why not use GitHub Pages to host the site? There are some great benefits:

  • Deployment is a breeze to set up.
  • It's a managed platform so you just don't need to worry about maintenance and security as you would with your own infra.
  • And, oh yeah, it's free!

The Pros and Cons​

So now that we're migrated over, let's quickly summarize the key benefits:

  • Free: Costs for our blog are now a pleasing $0.
  • Secure: We have eliminated a potential attack vector. No more password reset confirmation emails!
  • Powerful Tooling: There's a vast array of free and open source tools to lint and format Markdown.
  • Easy Editing: Choose any editor you like such as the awesome Visual Studio Code.
  • Versioned: All content is now under version control providing revision history, diffing and so on.
  • Collaborative: We can take contributions to the blog via GitHub's pull request mechanism.
  • Customizable: We have fine-grain control over the HTML and styling of posts using Jekyll themes.
  • Platform Agnostic: Markdown makes it trivial to migrate to any other platform in the future.

OK, but what about the cons? πŸ€” I have to tell you - I genuinely can't think of any! Sure, we don't have comments enabled now but as I understand it, Disqus has a Jekyll integration that we can turn on at some point. Seriously, feel free to ping me on Twitter if you think I'm missing something here. But I wish we had taken this step years ago.

Open Source and Open to Contributions​

As mentioned, the blog is now on GitHub. Take a moment to go check out the repository and hit that Star button if you like what we've done here. ⭐ We've taken the step to open source the blog's content under an Attribution-NonCommercial 4.0 International license. This is part of our continuing drive to open source most of what we do.

Ultimately, we want you to get involved and help us make the blog better and better over time. Consider submitting issues and pull requests yourself.

  • Submit spelling and grammar fixes.
  • Submit design tweaks and improvements.
  • Submit your own posts showcasing your PlayCanvas projects.

It's your blog! 😊

That's all from me. Looking forward to many-a-future blogs posts on this new platform. πŸ‘‹