Add high quality rand() function to common.glsl and an example to show off the noise textures. #8603
Conversation
|
Example link: http://ci.threejs.org/api/pullrequests/8603/examples/webgl_postprocessing_procedural.html Looks like this:
|
|
|
||
| <script src="js/postprocessing/EffectComposer.js"></script> | ||
| <script src="js/postprocessing/ManualMSAARenderPass.js"></script> | ||
| <script src="js/postprocessing/TAARenderPass.js"></script> |
|
Another example link that is upgraded to use the random generator: http://ci.threejs.org/api/pullrequests/8603/examples/webgl_materials_envmaps_hdr.html Others that can be upgraded I think to use the new random generator are FilmShader, SSAO (but that needs a lot of work), and DOF shaders. If you guys approve of this approach (procedural.glsl) I can modify Film and DOF to use this. SSAO is a big project so that is clearly a separate PR. |
|
This is handy indeed, but I'm not sure it should go in |
|
You're right, it probably doesn't. We probably need to figure out a way to support individual *.glsl files in the examples/js folder structure and somehow those *.glsl files to support #include statements that resolve to glsl files outside of the /src structure -- so I could have a procedural.glsl outside of /src that can be included into other *.glsl files outside of src. Right now glsl snippet sharing isn't possible in the /examples and also editing glsl as strings embedded inside JavaScript is pretty brutal. I wish I had more time... |
|
I guess a hacky way would be to just do |
|
I guess this is more of a noisy noise for image processing rather than a noise a la Perlin for procedural texturing and modeling purposes (one that becomes smooth when zooming in)? |
Yes, it is just a pseudo random number generator - that somehow works sufficiently well for when you need "random"-ish sampling while being fast and small. |
…r files as needed.
bhouston
changed the title
|
I like this better now 😀 |
| <a href="http://threejs.org" target="_blank">three.js</a> - Procedural Effects Example by <a href="https://clara.io" target="_blank">Ben Houston</a><br/><br/> | ||
| </div> | ||
|
|
||
| <script id="procedural-vert" type="x-shader/x-vertex"> |
There was a problem hiding this comment.
This file has some space/tabs mix up.
There was a problem hiding this comment.
I found a plugin for atom.io called tab-to-spaces, which allows converting back and forth between tabs-spaces really easily.
|
One more minor update coming... |
|
Okay, I think I've got the minor bugs fixed and the spaces/tab issues addressed. |
Still very useful IMO. I guess, you might get away with less for the implementation. See https://www.shadertoy.com/view/4ssXRX and maybe more amongst the search results on "random". |
|
@tschw Awesome! It is exactly why I want a rand() funciton in the core of ThreeJS so we can find an optimal one. :) I believe this one here: https://www.shadertoy.com/view/4ssXRX is actually the same one that is implemented. I had expanded it originally because of this doc here: http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/ But then today I collapsed it and @WestLangley reminded me of why the expanded version needs to be used by re-discovering this doc. The second stuff is interesting. I am okay with this function AS IS as it serves my purposes -- it is sufficient. I would love others to continue to find more optimal solutions or ensure that it works properly on mobile devices, but I need to get back to implementing a high quality universal SAO algorithm (which is my motivation for the recent depth work and this rand() stuff.) |
If that's what's implemented, it should be minimal enough. Turns out I've been looking at an older version using up a sampler.
Seems basically the same thing, just using a bare sawtooth waveform. |
| face = direction.y > 0.0 ? 1 : 4; | ||
| } | ||
| return face; | ||
| vec3 absDirection = abs(direction); |
There was a problem hiding this comment.
This file is now using double tabs instead of single tabs for indentation.
With that fixed it should be good to go! 👍
|
Thanks! |
| </script> | ||
| <script id="noiseRandom1D-frag" type="x-shader/x-fragment"> | ||
| #include <common> | ||
| #include <packing> |
There was a problem hiding this comment.
Hmm, I don't think these shaders are using <packing>?
4 participants
For advanced post processing effects I need a high quality 3D and 1D noise generator. I suspect going forward we will also require more procedural effects (fractal noise, soft edges, marble, wood, etc.)
So I have started a procedural.glsl shader and I've contributed an example for visualizing easily these procedural textures by themselves.
The first example is a very high quality noise function.
Based on the code here: http://stackoverflow.com/a/4275343