CJ GAMMON
I have spent my career creating digital advertising, applications, and websites for top brands like Google and Adobe. I bring creativity and technology together to create amazing experiences.

Three.js Custom Materials with ShaderMaterial


Three.js comes with many materials built in. All these materials drawn in WebGL utilize shaders. Shaders are small programs that run on the GPU written in GLSL. We can create our own custom materials in Three.js by writing our own shaders and passing them into a ShaderMaterial, which we can then use in our scene.

Read more...

Three.js Materials


Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of materials in Three.js all of which have different properties, like responding to lights, mapping textures, and adjusting opacity.

Read more...

Three.js Geometry


Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your own custom geometry by defining these vertices and faces yourself, but Three.js also has a variety of common shapes for you to access and set properties of built in.

Read more...

Three.js Getting Started


Let's set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js.

Read more...

Three.js Introduction


Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on the Papervision 3D library. Originally it was created as a renderer agnostic API with a 2D Canvas and SVG Renderer. As WebGL became available in browsers a WebGL renderer was added. This helped grow the popularity of both Three.js and WebGL because it made WebGL programming more accessible to developers.

Read more...

Scripting SVG in Animate CC


Snap.SVG Animator is a plugin for Animate CC that allows you to design on the timeline and export animated SVG content leveraging the Snap.svg javascript library. If you haven't heard about Snap.SVG Animator, the plugin I made for Adobe Animate CC (formerly Flash). Be sure to check out the original blog post I wrote. The latest version supports scripting both inside of the actions panel and by exporting movieclips from your library and dynamically adding and scripting them.

Read more...

Masking in GLSL


WebGL is complicated. Libraries like Three.js have made it more approachable but to do advanced effects you still need to understand the inner workings of WebGL, this includes GLSL shaders. Shaders are small programs that run on the GPU and they consist of two types, vertex shaders which draw the geometry and fragment shaders which draw the colors to present the final output.

Read more...

Masking in Canvas


Because the canvas requires manual drawing through scripting we need to leverage the 2d canvas API, through the canvas’ 2d context.

Read more...

Masking in SVG


Masking is really powerful in SVG in fact SVG has it's own mask element specific to this purpose.

Read more...

Masking in CSS


As far as CSS features go this is still relatively new. Because of this, support can be spotty. So let’s check out caniuse.com. Caniuse is a website created by a friend of mine Alexis Diveria, that shows you what features are supported on which browser versions.

Read more...