Shader Talk

[Pryme8]

@BitOfGold & anyone else who gets the following concept.

So if you wanna help out and big help it will be is we need nodes for every variable type GLSL has... yeah i know, im sorry... but here is the structure!

 

CYOS.nodes = {
	vec3f : {
		name : "fv3",
		inputs : null,
		outputs : new Array(1),
		settings : {
			x : '0.0',
			y : '0.0',
			z : '0.0',
		},
		compile : function(parent){							
				return "vec3 "+parent.name+" = vec3("+parent.settings.x+","+parent.settings.y+","+parent.settings.z+");";
		},
		pImgData : null,
		preview : function(parent){							
				
		},
	},
	vec3int : {
		name : "iv3",
		inputs : null,
		outputs : new Array(1),
		settings : {
			x : '0',
			y : '0',
			z : '0',
		},
		compile : function(parent){							
				return "vec3 "+parent.name+" = vec3("+parent.settings.x+","+parent.settings.y+","+parent.settings.z+");";
		},
		pImgData : null,
		preview : function(parent){							
				
		},
	},
	vertexStack : {
		name : "Vertex Stack",
		inputs : new Array(1),
		outputs : null,
		settings : {
		},
		compile : function(parent){							
				//return "vec3 SC = vec3("+parent.settings.red+","+parent.settings.green+","+parent.settings.blue+","+parent.settings.alpha+");";
		},
		pImgData : null,
		preview : function(parent){							
				
		},
	},	
	pixelStack : {
		name : "Pixel Stack",
		inputs : new Array(1),
		outputs : null,
		settings : {
		},
		compile : function(parent){							
				//return "vec3 SC = vec3("+parent.settings.red+","+parent.settings.green+","+parent.settings.blue+","+parent.settings.alpha+");";
		},
		pImgData : null,
		preview : function(parent){							
				
		},
	}	
};

Ok, so what this is first is a list of nodes you will be able to create and chain together that construct your shaders.  They are in the following format, a constructor name that identifies what kind of variable it is, and if its a multiple variable like a vec or a mat that can be a float or an int or what ever something to let you know what its output input will be.  next a simple name that will end up being the name of the variable or the function in the shader build so keep once I enable the ability to set these manually after creation ill clean them up with regex but on their init they need to start clean, the vertex and fragment nodes are discluded from this whole process because they will function differently.

next two arrays for holding ports and links, if it has input declare a new array 1 if not then null same for output.  if its a fancy node like mixing then it will be like and array 2 or how ever many inputs you need.
the settings are all unique values for this node so if you say have a vec4 its settings will look just like vec3 but with one more letter input for the last value of the vector.  these NEED TO BE STRINGS!

the compile is a function that has to have a parent variable declared in its input and its output needs to be a string of what ever this "node" would look like when compiled as a string in the shader dont worry about /r/n; unless you like really really want it or something, becuase like I said once compiled this shaders wont be very human readable.

 

just define the pImgDate as null for now and the preview like it is for now, that is later once we make some nodes that need to output some sort of visual representation and ill go over how to do those later...

Umm capiche`? If not ask questions, of so then challenge accepted? See photo for a good starting list...
 

[Pryme8]

revision to those instructions, ignore the variable type on vecs and mats and stuff, and include a input array of 1, so that way we can just strap the float and int nodes to those...

so:
    int : {
        name : "INT",
        inputs : new Array(1),
        outputs : new Array(1),
        settings : {
            v : '0'
        },
        compile : function(parent){                            
                return "int "+parent.name+parent._id+" = "+parent.settings.v+";";
        },
        pImgData : null,
        preview : function(parent){                            
                
        },
    },
    float : {
        name : "FLO",
        inputs : new Array(1),
        outputs : new Array(1),
        settings : {
            v : '0.0'
        },
        compile : function(parent){                            
                return "float "+parent.name+parent._id+" = "+parent.settings.v+";";
        },
        pImgData : null,
        preview : function(parent){                            
                
        },
    },
    vec3 : {
        name : "v3",
        inputs : new Array(1),
        outputs : new Array(1),
        settings : {
            x : '0.0',
            y : '0.0',
            z : '0.0',
        },
        compile : function(parent){                            
                return "vec3  "+parent.name+parent._id+" = vec3("+parent.settings.x+","+parent.settings.y+","+parent.settings.z+");";
        },
        pImgData : null,
        preview : function(parent){                            
                
        },
    },

now.

[Nabroski]

@Pryme8
Looks good so far, if you post it on github, i can contribute

COLORS PT.II 

http://www.babylonjs.com/cyos/#NCCHC#2

[Pryme8]

I love the balls of light, if you could make the red look like and aurora that will be amazing.

Ill post on git here soon.

 

 

[Pryme8]

https://github.com/Pryme8/PCYOS
https://pryme8.github.io/PCYOS/i2.html

Its getting there, I'm just trying to get the core stuff done.  after I finish work today Ill go back to this, but there is money making to be had right now.

[Nabroski]

its late here i hit the sack.
 

"I love the balls of light,
aurora that will be amazing --work in progress

Yeah, also very easy to make

http://www.babylonjs.com/cyos/#1RA7J8#2

[Nabroski]

man i really need a full screen mod
 

stars

[Pryme8]

looks like your starting to have fun with this!

ohh and the final stack nodes got turned to gl_fragColor and gl_Position to fit the node convention, and how your gonna build these.

[joshcamas]

WOW this looks amazing! Reminds me of my UE4 days!

[Pryme8]

so here is where im stopping tonight, by tomorrow I should have the first shaders being built and it will all be extending functionality and making sure everything matches a convention...

I got to the point that you can make a link, it attaches the link to the two ports and when you look at one that has inputs you can attach them to the output of that node by using the hotflag ~ which im going to reserve for the inputFlag, unless anyone has any reasons why that will not work o_O but basically if you match the inputs name with a ~ in front of it thats what that node now inputs.. so you have the option of having a vector 3 built of a 3 separate float inputs or maybe one that is used twice and one manually set one ect... trying to accommodate as many possibilities that I can think of but Ive been really tired the past couple days and its been rough. Plus I had to wrap up a big scene for a client and that was my main concern.  But now that Im done with that Ill be able to work on this more, but not bad for only like 6 hours of dev on it so far.

[Pryme8]

QUICK QUESTION!

is the @ charicter ever used in GL?
Im trying to find a good wildcard character for the input flags.  I was going to use ~ at first, but looking at it I like the look of @ as the flag.

[Nabroski]

https://www.khronos.org/files/opengles3-quick-reference-card.pdf
https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

https://www.khronos.org/registry/gles/#specs32

[Pryme8]

Your a boss!

First shaders should be build-able today... really basic stuff and nothing but frag color right now for the compile... but this is going to get robust very fast.

Can you say Procedural PBR anyone?  Our Cobblestones/Water/Every Material are going be

Im gonna include everything like normal map calculations, secular, AO, ect all off the nodes.  And the bones are there im working on the compiling chain and console output now.


and we are going with @ for sure now, cause that looks good and its never used.

[Nabroski]

looking forward to it! Dont haste. 

 Procedural PBR ? I was thinking PBR is only for lighting. 

I was reading about flow dynamics today, i'm going now for raytracing. 

[Pryme8]

I thought it had a lot to do with how to set up your textures and your lighting, both of which can be handled by this.

[Pryme8]

https://github.com/Pryme8/PCYOS


So i just pushed the most recent updates... um i2,html and cyos.js are the only files you need to worry about...

Im done for right now, i feel worn thin Im tired and cant do simple math or scripting right now I need a break...  Um someone wanna please take over and figure out how we are going to grab the linked values on the script compile.  If you have any questions on wtf is going on just ask... I would really like some help on this so I don't feel like im just soloing something this intensive when I have other things I need to do.

[dbawel]

Mr A,

You always impress. I look forward to the day when I might impress as well.

DB

[Pryme8]

5 hours ago, dbawel said:

Mr A,

You always impress. I look forward to the day when I might impress as well.

DB

You impress me Dave , you have the patience of a saint.

[GameMonetize]

Woot this is insanely cool!!! I hope you'll find the energy to finish it! It would be a cool evolution for the original CYOS

[Pryme8]

Update****  I am almost finished with the port of glslEditor and have it with a scene editor fragment shader and vertex shader though, so Ill be hitting you up with a legit version here soon that will be stable and then ill go back to the node designer.

If you guys have never seen glslEditor google it, the tools it comes with are amazing and Im rebuilding the codemirror api for it to work with BJS.

[Pryme8]

http://www.babylonjs.com/cyos/#1ZA4LX#1

http://www.babylonjs.com/cyos/#1RTCR0#1

Anybody feel link linking these to an audio array?

[Pryme8]

@BitOfGold

So I have a shader that I am attaching to an object, but in the scene when I use it it seems to only go to origin and it leaves the object its assigned to as black!

Any idea what would be causing this?  It works when I did a playground with it, but not with my scene... really weird Ill trouble shoot it some more but hopefully someone has an idea where to start.

http://www.babylonjs-playground.com/#1YZGHV#0
 

[Pryme8]

I could not make a playground where the same behavior is demonstrated... Im super confused here is a quick video showing the behavior.  Every other hex type behaves correctly but the water hex does not seem to want to have the shader in the correct position though the mesh is.  I tried to mock up the same process for how Im creating the hexs in a playground but I was not able to duplicate the glitch.  What could possibly cause this?

[Pryme8]

Ok work around... I have not done it yet but what do some of you guys think?

So I place all my water hexs down, with just a basic material like a transparent blue just as a placeholder.  Then once the level is finalized run a unification script over the water hexs that turns them into a single mesh.

Now the main thing I want to do with the water is have each hex have a unique "flow rate" and direction that effects the rate of speed of the ripples on the surface per hex and if I unify them ill lose that control with the shader (which is currently not working).

So... the work around with the unified meshs would mean I make a purposed "flow map" that is a standard RGB image that shows the flow direction and rate shown by red for X and blue for Y which then is fed to a new shader that some how takes that flow map and simulates each hex having its own water speed.  Now this is all theory and I would really really really not have to go down a road like that... but if I cant get custom shaders to apply to the instances I may be screwed.

[Nabroski]

On 11.11.2016 at 1:03 AM, Pryme8 said:

https://github.com/Pryme8/PCYOS
https://pryme8.github.io/PCYOS/i2.html

Its getting there, I'm just trying to get the core stuff done.  after I finish work today Ill go back to this, but there is money making to be had right now.

@Pryme8 Oh man, i miss this one, totally! How great is that!

wish a great start into the new year!