This tutorial will walk you through how to create a web app that visualizes the location of any satellite in real-time, like the International Space Station.

We’re going to do this from scratch, using the same techniques a real rocket scientist would!

  1. We’ll look at where to get the data about individual satellites that the government publishes, known as Two-Line Element Sets, or TLE’s.
  2. We’ll use satellite-js to predict the orbit of the satellite given the TLE’s (this is the rocket science part).
  3. We’ll use CesiumJS to visualize the result, but you can use any library/engine that can take in…

Photo by Christopher Gower on Unsplash

Sketchfab’s API gives you programmatic access to the largest collection of glTF 3D models on the web. This article walks you through a minimal code example to show you how to:

  1. Let your users authenticate with the Sketchfab API
  2. Download a 3D model as a zip file containing the glTF
  3. Load this zip file into Three.js

Source code:

How it works

I originally implemented this to let readers of my WebGL outlines tutorial see how the effect looked on test cases of their choosing since I kept finding algorithms that didn’t work on my specific corner cases (but I wouldn’t find out until…

This article describes how to visualize outlines for a WebGL scene as a post process, with example implementations for ThreeJS & PlayCanvas.

Left — boundary outline only. Right — the technique described in this article. Boat model by Google Poly.

There are a few common approaches that produce boundary-only outlines as shown on the left of the above picture.

Rendering the full outlines of a scene is particularly useful when you need to clearly see the geometry and structure of your scene. …

Gimbal lock is a common issue that arises in 3D rotation systems. Conventional wisdom says that you should represent your rotations as quaternions to avoid this problem (as stated in many popular game engine docs and countless YouTube videos). But I couldn’t find any good explanations of exactly how quaternions solve it.

This was important for me because I was implementing a 4D geometry viewer and spent a lot of time trying to figure out how to generalize quaternions to higher dimensions, only to discover that you can still get gimbal lock with quaternions!

The answer is it’s not about…

I recently tried to get flat shading working for a procedurally generated terrain in PlayCanvas for a game jam. It wasn’t as straightforward as I expected, and I ended up spending the whole time trying to figure it out instead of making a game. I thought I’d write this quick guide as a reference should you find yourself in the same situation.

The Desired Look

The goal is to create something just like in the PlayCanvas homepage.

Figure 1

This “low poly” look creates the retro feel I was going for. Normally you can do this just by exporting your models with flat shading. …

A game jam story of intense dedication, hallucination and divine revelation.

I recently went through a bad fever, and the accompanying exhaustion made it feel impossible to get anything done. I tried to remember what I’d done in the past to power through an illness. Perhaps that would give me some strength.

Instead, I realized how comically insane that episode was and decided to share this story.

Ludum Dare is the biggest recurring online game jam. Every 4 months a theme is chosen and thousands of people (from hobbyists to professionals) spend the weekend creating games inspired by that theme.

“Tiny World”

This tutorial is written for the Northfield chapter of CoderDojo It is aimed at students ages 8 and up.

Remember that whole moon landing thing?

I’m talking about this guy right here.

Well apparently everyone got too caught up in the hype, and we forgot to bring back the Apollo 11 ship! Since we can’t send anyone to go grab it off the moon, we need it to somehow come back to earth by itself.

The only way we can do that is by writing code!

In this tutorial, we’re going to learn how to use PlayCanvas to construct our spaceship simulator, to prove to NASA that…

I had been writing code for over 7 years, but it had never been used to make Decisions-About-The-Real-World. This is my anecdote of how a little bit of foresight and a few keystrokes could have spared someone I’d never met a crappy summer.

It’s also a reminder that, for better or for worse, the tiny decisions that a programmer makes can have far-reaching consequences.

The Problem

St. Olaf college takes great pride in its interdisciplinary approach to everything, with it being a liberal arts school and all. So when the Alumni Relations Office (who I will henceforth refer to as the alum…

Reflections from my GlitchCon 2016 experience

Last year I wrote about how GlitchCon is a very unique setting. Everyone around you believes that games matter. Not having to debate this point leaves room for questions like: Okay, what do we do now?

Make games with redeeming qualities.

That’s what Bill Heinemann, the original creator of The Oregon Trail and the keynote speaker this year, advised the next generation of creators.

Bill Heinemann

“Artists are the real architects of change”

He launched into his speech with these chilling words by William S. Burroughs. Heinemann had grown up watching how society adopted movies, TV, radio, and now, video games. …

This article is written for my 2016 GlitchCon shader workshop. If you’d like a more in-depth guide on shaders, check out my Tuts+ tutorials.

What can you do with shaders?

Most modern games owe a lot to the GPU for their visual effects. Here are some of my favorite examples:

Lava (ThreeJS)

Omar Shehata

Graphics programmer working on maps. I love telling stories and it's why I do what I do, from making games, to teaching & writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store