Image Image Image Image Image
Scroll to Top

To Top

WebGL

Ready Player One: Music Video Experience

On 02, Nov 2016 | No Comments | In 3D, Awards, Graphic Shaders, JavaScript, Music, News, Video, WebGL | By synergyseeker

Ready Player One, generated entirely in GSL/OpenGL, uses a ground-breaking programming technique in music video creation. Pure code captures the retro sci-fi spirit of Em Harriss’s hauntingly beautiful vocals; an alien ghost trapped in the machine.

Read more…

01

Jun
2016

11 Comments

In 3D
JavaScript
Learning
WebGL

By synergyseeker

Learning WebGL 3D: Starting Textures and Lights

On 01, Jun 2016 | 11 Comments | In 3D, JavaScript, Learning, WebGL | By synergyseeker

We’ve already covered the basics of setting up a scene, a camera, the render loop ( animation loop ) and some other basics about geometry and transformations in previous tutorials. In this lesson, let’s dig into applying textures and materials to “skin” our objects and adding lights, so we can see them. Read more…

20

Mar
2016

18 Comments

In 3D
JavaScript
Learning
WebGL

By synergyseeker

Learning WebGL 3D: Transformations – Rotation, Scale, Translation

On 20, Mar 2016 | 18 Comments | In 3D, JavaScript, Learning, WebGL | By synergyseeker

So in the first lesson, you learned about setting up the files, getting set up with a 3D helper library and doing your first render. In fact we jumped ahead in that first lesson and did a simple rotation, which is the first of our transformations we are going to look at.

Read more…

07

Mar
2016

30 Comments

In 3D
HTML5
JavaScript
Learning
News
WebGL

By synergyseeker

Learning WebGL 3D: Getting Started with ThreeJS

On 07, Mar 2016 | 30 Comments | In 3D, HTML5, JavaScript, Learning, News, WebGL | By synergyseeker

WebGL, is a JavaScript API for creating and rendering graphics inside an HTML <canvas> element. We already used this element in previous lessons here, and the same basic concepts can be applied. In a basic sense, we are still using math to draw frames that we cycle through at high rates ( 60fps ) to create the optical illusion of motion.

Read more…

Javascript: Random Spheres Trig

On 05, Feb 2016 | 13 Comments | In 3D, General, HTML5, JavaScript, Learning, Prototypes, The Lab, WebGL | By synergyseeker

If you have been following along with the Learning tutorials so far, you’ll recognize the basis of experiment comes from Lesson 5 – Making multiple objects move  In this demo, I am using radial gradient fills, a range of colors, and some good ole fashion trigonometry to create a nice 3D  effect.

Check it out here: 3D Spheres on Canvas Demo

Read more…

Javascript Animations: Lesson 7 – Vectors

On 29, Jan 2016 | 10 Comments | In Games, HTML5, JavaScript, Learning, Prototypes, WebGL | By synergyseeker

Vectors. Yep Vectors. So what is a vector? A vector is a magnitude ( a number ) and a direction. These 2 elements are a vector. So speed is not a vector, because it is just a magnitude, but velocity is a vector because it tells how fast and in what direction something is going.

Read more…

27

Jan
2016

No Comments

In 3D
Awards
News
WebGL

By synergyseeker

Insights into The Warof1996.com

On 27, Jan 2016 | No Comments | In 3D, Awards, News, WebGL | By synergyseeker

“20th Century Fox challenged us to take inspiration from interface designs seen in modern science fiction and comic book films; to push the envelope and create something that fit the universe of Independence Day, exciting the imagination of fans.”

Read more…

18

Jan
2016

9 Comments

In JavaScript
Learning
Prototypes
WebGL

By synergyseeker

Javascript Animations: Lesson 4 – Moving along paths

On 18, Jan 2016 | 9 Comments | In JavaScript, Learning, Prototypes, WebGL | By synergyseeker

400px-Defining_Trigonometric_Functions_Figure_4.svgSo now that we can move objects using some math. Let’s make the path more interesting than along X or Y. Let’s start with a circle. So recalling our trig functions, we can derive that any point along a circular path is x distance and y distance away from the origin or centre of the circle.  So to find the values of x and y at point (x,y) we use:

Read more…

15

Jan
2016

No Comments

In 3D
Awards
HTML5
JavaScript
News
WebGL

By synergyseeker

Warof1996 Wins FWA Site of the Day and Mobile Site of the Day!

On 15, Jan 2016 | No Comments | In 3D, Awards, HTML5, JavaScript, News, WebGL | By synergyseeker

Really excited to announce that Warof1996.com for Independence Day 2 Resurgence, has won both the SOTD and MOTD at the FWA. It is a real privilege to even be nominated for these prestigious awards. Recognition from the best in the industry is the highest honor one can hope to achieve in our line of work.

Check out the announcement here for Site of the Day

Check out Mobile Site of the Day here!

Read more…