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)

This tutorial is written for the Northfield chapter of CoderDojo for our special “April Fools Hacker” theme. It is aimed at students ages 8 and up.

Anything that runs within your browser has to be downloaded first.

That means, everything you see in front of you right now can be changed! The languages that power the web are HTML, CSS and Javascript. In this tutorial, you’ll learn how to look at and change the code for any website, right from your browser!

Step One: Viewing the source

Most browsers let you view the source of any web page. In Chrome, you can press CTRL+U on…

This tutorial is written for the Northfield chapter of CoderDojo for our special “April Fools Hacker” theme. It is aimed at students ages 8 and up.

In this tutorial we’re going to learn how to hide (encrypt) secret messages through code so that only you or your friends can read (decrypt) them!

We’re going to be using Python for this, but as long as you understand the idea you can implement it in any language you like (even Scratch!).

Why is this useful?

There’s a ton of reasons why you would want to send information that’s encrypted (hidden). Your credit card number should be…

Omar Shehata

Graphics programmer at Cesium. I absolutely 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