Posts Tagged ‘WebGL’

Remember when the original NES was released decades ago? I know the older readers can remember those days fondly. Graphics and coding techniques have improved dramatically over the past few decades. It’s remarkable how we can now build in-browser games without reliance on 3rd party companies. If you know anything about JavaScript and wish to delve further into game development, these tuts were made for you.

I’ve collected everything from getting started to more advanced JS libraries and general tips/tricks for browser game development. This post has something for everyone and it’s never been easier to get your toes wet in the proverbial pool of Internet gaming.

Read the rest of this entry »

When building any map-related applications, there are many popular providers to select from like Google Maps or Bing Maps and they provide APIs for integration.

However, using an open source engine and the ability to switch providers anytime offers more freedom + flexibility.

Cesium, a WebGL-powered JavaScript mapping library, offers just that by being provider-agnostic.


It has support for 3 different views: 3D globe, 2D map, and 2.5D Columbus View where transitioning from one to another is just a line of code.

Drawing any type of shapes, highlighting specific regions and interacting with the map using mouse or touch is pretty easy.

Cesium comes as a single JS file and work in all major browsers including mobile.

  • Tags:
  • Filed under: Goodies, Map, Other License
  • Drawing anything using modern web technologies is possible, however, the default APIs are not that user-friendly.

    Two.js is an exciting JavaScript library that provides a 2-dimensional and single drawing API for SVG, Canvas And WebGL.

    The library has only (currently) support for shapes (no text or images) and allows importing SVG data.


    It can group multiple elements which is useful when transforming them together.

    There is a built-in animation loop, methods to draw well-known shapes and lots of options to customize them.

    glfx.js is a JavaScript library for applying effects to images using WebGL.

    The library has a wide set of built-in-filters including brightness/contrast, curves, sepia, hue/saturation, noise, lens blur, tilt shift, hexagonal pixelate and much more.


    glfx.js has 3 parts:

    • texture: a raw source of image data (created from an <img> tag)
    • filter: an image effect (represents one or more WebGL shaders)
    • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

    Every filter comes with different variables that can be configured to create custom effects.

    Although WebGL is supported by most modern browsers, not by all of them yet (check if your browser supports it).