https://www.babylonjs-playground.com/#8GPMLP#10
Here it is with some colorization and lighting. My math is off somewhere but this is a good start.
2 Likes
UpSampler post effect
Super EZPZ one, but hey someone might find this useful.
https://playground.babylonjs.com/#IHHN45
1 Like
Just updated the header to my website: (give it a second if its not moving)
http://pryme8.com/
fun fun… should be adding more content here soon too to make up for the gaps in posting.
Tutorials coming.
2 Likes
Soooooo, Id like to make it clear if it wasn’t that a lot of the shaders discussed and showed on here are direct conversion or modifications of Shadertoy shaders. Only a couple of the older ones on the HTML5 website site were not.
I bring this up because I want to make sure that people realized I am not claiming to come up with these things or even have an ultimate knowledge of how to author them myself other then some simple versions.
I try to cite the originals every time but it was brought to my attention that there may be some confusion.
3 Likes
i understand your action and support that anyway and that is useful
1 Like
Their shader editor is awesome:
Click on lines in main() to see what’s drawn to that point. You can also click the test button to walk through main. Very cool!
Edit: that link doesn’t work well from this forum. Go here instead and click on Ikeda Grid:
Also, try clicking on some of the numbers in the code. A control should pop up to easily adjust values in real-time.
1 Like
I could prolly do a deploy of it that builds a BJS scene, if enough people are interested in it. I got about halfway done with doing that like a year ago then work took over.
It is a really good inline editor.
What I really wanted to do was just jack the editor widgets from this and implement them into the playground.
Actually we should make that a feature request. Cause the visual tools for like color picking and number manipulation are just too sweet.
3 Likes
Quick question: I’ve started reading The Book of Shaders, but as they say
[Uniforms] names will vary from implementation to implementation
so of course I tried to search in BJS doc’ where we can find this naming convention, but all I can see it this example:
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection", "time", "direction" ]
which looks fine but it’s not mentionned if these are all possible values, or just few of them. If a BJS-shader-master could about the doc’ about that? 
(or maybe I just don’t suceed to find the right doc page talking about that?)
1 Like
The list of default uniforms are on this page:
https://doc.babylonjs.com/how_to/shader_material
1 Like
OK so IMO the sentence have to be more precise: it say it’s an “example”, and not that it’s actually the exhaustive list.
(I will suggest a PR ;))
Yeah this took me a while to figure out. Honestly this was one of the bigger hurdles I had originally was figuring out what we call things vs what other people call things.
'should be more explicit if this PR is merged precision about shader uniform list + typo + tiny page layout by Vinc3r · Pull Request #1598 · BabylonJS/Documentation · GitHub
Can someone help me to update the doc’ with correct informations?
I have in mind to update this page Introduction to Shaders - Babylon.js Documentation, adding after Built In Variables something like Built In Inputs, as two tables:
| Attribute | Type | Description |
|---|---|---|
| position | vec3 | pixel: vertex position / fragment: face pixel position |
| normal | vec3 | pixel: vertex normal / fragment: face pixel normal |
| uv | vec2 | texture coordinate |
| Uniform | Type | Description |
|---|---|---|
| world | mat4 | mesh global transforming state (move + rotate + scale) |
| worldView | mat4 | global view part of mesh |
| worldViewProjection | mat4 | global camera |
| view | mat4 | mesh local view part |
| projection | mat4 | local camera |
| time | float | per each frame |
| direction | ? | ? |
with Type as vec2, float, etc.
So here my question:
- is Introduction to Shaders the right page to put these infos?
- is Built In Inputs the right naming?
- is someone can help me filling this table?
please use this pad to ease the process: pad about shader table
[edit] updated using nasimiasl infos
3 Likes
| Attribute | Type | Description |
|---|---|---|
| position | vec3 | vertex position - (fragment - face pixel position ) |
| normal | vec3 | vertex normal - (fragment - face pixel normal ) |
| uv | vec2 | texture cordinate |
| Uniform | Type | Description |
| world | mat4 | mesh global transforming state (move + rotate + scale) |
| worldView | mat 4 | global View part of mesh |
| worldViewProjection | mat4 | global camera |
| view | mat4 | mesh local view part |
| projection | mat4 | local camera |
| time | float | per each frame |
| direction | ? | ? |
this is work flow for any 3d Engine when wanna render in ViewPort For each Model
MODELING COORDINATES > WORLD COORDINATES > VIEW COORDINATES > VIEWPORT COORDINATES
World coordinates are the global coordinate system that takes into account all objects in the scene.
*** world
View coordinates are the coordinate system that incorporates a virtual camera’s view of the scene.
*** View
Viewport coordinates are the coordinate system that describes the camera projection for the scene (for example, orthographic or perspective) and fits the projected scene into screen space. This projection takes the scene from a 3D to a 2D projection so that it can be displayed on the screen. The textured spinning box example uses a perspective projection, which will make closer objects look larger than further ones, just as in the real world.
*** Projection
world > View > Projection
or Model ( without Global Information about Transform Matrix of Model ) View Projection => View Projection
without projection we have (World , View , WorldView )
WorldViewProjection = ProjectionMatrix*ModelViewMatrix
6 Likes
ping me anytime you want i like help if i can
1 Like
Nice, thanks for helping!
So we just need direction attribute info now, I suppose it’s a vec3? (we need its description also)
i don’t know about that
maybe the camera direction? that is vec3
Omg I love this so much, I wish I was not on the road so I could be helping y’all with this.
Thank you guys! This is good stuff.
Someone could test direction really quick set the camera direction to like 1,0,0 and see if the output is red, then change the direction and see if the color matches.
I am thinking it’s the direction of the vertex from camera.
If so that will save some calculations on ray marching scenes
2 Likes
I’m still too n00b on shader to made such tests 
1 Like
Actually I tried anyway, but doesn’t succeed in anything ahah, line 31 : https://www.babylonjs-playground.com/#1OH09K#119
BUT default shader on CYOS made me notice we also have things named varying, so I suppose this have to be referenced in the doc’ as well? It is quite-as-mentionned here, but I don’t figure at all what are these variables.
[edit] hmm after some reflection, am I right here?:
that’s probably a little off-topic, I have to continue my reading of The Book of Shaders I think
1 Like