screenshot added by PauloFalcao on 2014-03-20 22:22:58
platform :
type :
release date : march 2014
related :
  • related to: 704
  • 17
  • 2
  • 0
popularity : 54%
  • 0.89
alltime top: #8937
added on the 2014-03-20 22:22:58 by PauloFalcao PauloFalcao

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr


This is the standalone 1k webgl version of my JS1k (2014-dragons) entry 704.2.
In 2011 I did a pure JS 1k demo with no webgl http://www.pouet.net/prod.php?which=56992. called 704.
This version is very similar but uses webgl and adds reflections, and some fake soft shadows.

There also is a ShaderToy version here: https://www.shadertoy.com/view/Xdj3Dt

To fit into 1k I had to remove some optimizations, so the JS1k version, and the standalone 1K version are slower than the ShaderToy version.

This was possible by standing on the shoulders of giants like:

Shader Minifier - http://www.pouet.net/prod.php?which=55176
jscrush - http://www.iteral.com/jscrush/ (JS1K version)
JsExe - http://www.pouet.net/prod.php?which=59298 (Standalone 1K version)
Google Closure Compiler - https://developers.google.com/closure/compiler/

It also uses several compression techniques for the JS code like using a big triangle instead of 2 triangles, function hash, etc. All these js compression techniques have been previously used on other great js demos like:

HBC-00012: Kornell Box - http://www.pouet.net/prod.php?which=61667
HBC-00013: Highway 4k - http://www.pouet.net/prod.php?which=61668
Hypersonic Mandelbulb - http://www.pouet.net/prod.php?which=61093
ANDES - http://www.pouet.net/prod.php?which=61637
More info: http://daeken.com/superpacking-js-demos

Also many bytes to fit in 1k were removed making the code more suitable to compression, e.g. There are no loops in this shader!

Done using linux btw :)

Works nice on my PC with Win/Linux/Firefox/Chrome, Mac with Firefox/Chrome, and my Nexus 5 ;)
rulez added on the 2014-03-20 22:29:20 by PauloFalcao PauloFalcao
Pretty nice, though be aware others may have a problem with or try to balance out your self-voting here. It seems you have done it in the past, but people here would prefer you don't even if you think it's totally super awesome in every way. Just so you know.
rulez added on the 2014-03-20 22:34:21 by Starchaser Starchaser
rulez added on the 2014-03-20 22:42:41 by wullon wullon
Again, sorry about the self-voting.
I just wanted to add a comment with info.
I would remove my vote if possible.
And you can do that. :) The default for the first comment on a prod is the middle option, the pig. If you leave it as that, then nobody complains. It's neither up nor down.
Thanks AMcBain! I will do that next time. :)
I am impressed! Great job.
Needs a fast machine thou ;).
rulez added on the 2014-03-20 23:29:11 by sim sim
awesome!! btw, runs perfectly smooth on my 3 years old laptop with integrated intel gpu.
rulez added on the 2014-03-21 01:28:47 by bonefish bonefish
Very fast!
rulez added on the 2014-03-21 02:11:46 by BiTL BiTL
fucking slow on my old machine but it looks neat :)
rulez added on the 2014-03-21 06:15:07 by sensenstahl sensenstahl
For slower machines try http://glsl.heroku.com/e#15291.0

The shader is more optimized, and it's possible to run in a lower resolution.
I repeat: amazing.
It fancies me to recall and code sth in JavaScript for my own.
added on the 2014-03-21 11:51:04 by sim sim
Very clever, smooth and it is fast!
rulez added on the 2014-03-21 18:53:41 by w00t! w00t!
Hope you'll enter the classic JS1k compo too.

I suppose you didn't use a for(;;) loop to setup the vertex and fragment shaders to make JSCrush and JSexe happy. Do you remember more or less the gain from doing that ?

ps: the standalone version was treated as invalid PNG in Opera 12, 21 and in Canary
rulez added on the 2014-03-21 22:00:17 by p01 p01
Very impressive for 1KB of code.
rulez added on the 2014-03-22 01:57:02 by ramon ramon
looks awesome!
rulez added on the 2014-03-22 08:37:23 by Bobic Bobic
rulez added on the 2014-03-22 09:39:11 by Sir Sir
Pretty cool shader! Rules!
rulez added on the 2014-03-22 09:50:12 by ham ham
invalid PNG here in chrome and firefox...
added on the 2014-03-22 10:16:11 by Exin Exin
rulez added on the 2014-03-23 12:03:21 by Pirx Pirx
Thank you all for your comments! :)

I notice that on Windows machines the floor was not properly rendered. That's fixed.
The Shadertoy version is also fixed
And here is a fixed glsl.heroku.com version.

Try it on recent mobile devices like the Nexus5, on landscape mode runs surprisingly well, which is awesome for a mobile device! :)

p01, Thanks about the invalid PNG info on Opera, and Canary. On Opera I can't run the demo, but on Canary (35.0.1905.2) on Win it's ok. Although I think the PNG compression is an extremely cool hack, I wish I would have accomplished this standalone version without using the PNG stuff, I think that's something not very future proof, it's very browser/version dependent ... :(
About the for in the shader setup I do not remember exactly the gain, but it was something like 7~15 chars, but I never had a very optimized version using the loop so the gain can be even less...
good one!
rulez added on the 2014-05-18 02:24:13 by T$ T$
too slow for my pc but the shadetoy version is cool :-)
added on the 2014-05-28 23:50:12 by joe joe
rulez added on the 2014-09-28 21:19:37 by aha aha
really great effect :D
rulez added on the 2014-11-20 16:53:42 by rez rez

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment