Inspired by the shiny new toy of WebGL, I tried my hand last night and this morning at making a procedural object. As in my very earliest experiments with procedural texturing, I’m not bothering with things like geometry and polygons. Instead, the entire scene at any pixel is defined by a function that takes only three arguments: (1) the pixel’s horizontal position in the image, (2) the pixel’s vertical position in the image, and (3) the clock time at this animation frame.
So I’m going way back to my original crazy idea that started this whole shader business in the first place: go ahead and run an entire computer program at every pixel of an image.
Except that now, thanks to graphics processing units (GPUs), everything runs a few million times faster than it did when I first tried this stuff.**
Taking a cue from yesterday’s post, I decided to make a “Dragon planet”. It’s kind of a fantasy answer to the question “What would a planet be like if it were like a dragon?” I imagine such a planet would be angry. It would breath fire, but otherwise be mysterious and dark with hidden depths. And it would probably be green (the most common color for dragons).
If you load the page you’re reading in Google Chrome (WebGL won’t work in Safari, and your version of Firefox may not support WebGL), then you can click on the link below:
When the page comes up in Google Chrome, you will see, on the left, the program that’s running on your GPU. That’s all the code needed to create the real-time animated planet, other than a few dozen lines of code that implement my noise and turbulence functions.
Now we just need to make some creatures to live on the Dragon planet. Space dragons!
** Thanks to Kris Schlachter, who helped me get started with WebGL!
Cool! It was about now that my laptop was refusing to run java applets.
BTW, if you change:
gl = canvas.getContext("webgl");
to
gl = canvas.getContext("experimental-webgl");
then it will also on Safari.
Also if you paste in this snippet: http://stackoverflow.com/a/17000422
Then your animations will be more browser compatible. It’s needed for the requestFrameAnimation function.
With both these changes I got your Dragon planet working on Safari.
When I saw the code on the left, my instinct was to start tweaking it. Here’s a page where you can modify the GL code on the fly:
http://www.mrdoob.com/#/139/glsl_sandbox
(Many other entertaining hacks across the top of that page as well…)
Thanks Alec! I made those changes. People also need to have up-to-date browsers for this stuff to work. I’m working on a little set of instructions to explain how to enable WebGL for each of the three browsers (Safari, Firefox, Chrome).
In response to J. Peterson: Yes, your instinct was exactly right, and that is where I’m going with this. It just needs some HTML juggling. I first wanted to get that cool planet up there, without making everybody wait for me to add a code editor window.
If you want to experiment with ‘no polygon’ shaders I suggest you check out https://www.shadertoy.com/ there are some amazing shaders there. All based on the concept that no polygons should be used. You can easily start creating your own shaders since they already have a working editor.
Of course I know about ShaderToy! It’s a great site. But I wanted to have my own infrastructure, since my goal is research (you may have missed my follow-on Pteraforming post).
Two corrections to your comment:
(1) Like me, the ShaderToy folks are actually using two polygons — two triangles to be exact. Those triangles form the square upon which the fragment shaders operate.
(2) I’ve been writing no-polygon shaders for decades. For example, here is a “no polygon” 3D scene I made in 1987. The entire image is formed from a single shader:
http://mrl.nyu.edu/~perlin/experiments/hypertexture/nyutorch.jpeg
And here is another one I made around the same time:
http://mrl.nyu.edu/~perlin/experiments/hypertexture/blueglass.html
I feared that you had missed shadertoy. If nothing else others might not know about it and it is a great site for doing these kind of things and see more examples of the technique.
I have been following your work and I am aware that your basically the father of procedural textures so I’m not surprised you have done this before. I’m using your fast perlin noise from gpu gems in my own project to great effect. I have yet to find any implementation that beats it in terms of performance and using it in a realtime shader compiler is just a whole lot of fun.
Very nice, the edge reminds me of http://www.youtube.com/watch?v=Y7OUC6Wx15o
Does someone know if imrpoved perlin noise code can be used freely in my indie game? because the reference paper sigraph is copyright ken perlin 2002, does that mean that improved noise is only useable under licence?
If you want permission, just send me an email asking me for permission. 🙂
Great! that’s incredible that you have started with WebGL technology.
I consider WebGL to be one of the leading technology in the near future. it is widely used in 3D web design, interactive games, physics simulations, data visualization, and artwork. I also suggest you to read this article I found recently – https://www.visartech.com/blog/interactive-3d-graphics-with-webgl/ . It contains a detailed guide to WebGL. Hope it will be useful for you!