Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > CopperCube > Announcements and Showcase
shader for web target

csp-games
Guest
Quote
2021-02-16 20:02:35

Here's animated material shader, giving you a hint on how to use it as behavior, but also how you can use the texture coords to actually distort, manipulate or animate the texture. In this case I take the correct tex coords v_texCoord1.s and v_texCoord1.t and use them as angles for sin and cos, the output is then used as new coordinates.


// Supported types are: int, float, string, bool, color, vect3d, scenenode, texture, action
/*
<behavior jsname="behavior_MyTest" description="shader tests">
<property name="Something" type="float" default="1.0" />
</behavior>
*/

behavior_MyTest = function()
{
this.old_ms = 0;
};

// called every frame:
behavior_MyTest.prototype.onAnimate = function(node, timeMs)
{
// run only once:
if (this.old_ms == 0)
{
this.old_ms=1;
// shader test----
var vertexShader = "";
vertexShader +="uniform mat4 worldviewproj; \n"
vertexShader +=" \n"
vertexShader +="attribute vec4 vPosition; \n"
vertexShader +="attribute vec4 vNormal; \n"
vertexShader +="attribute vec4 vColor; \n"
vertexShader +="attribute vec2 vTexCoord1; \n"
vertexShader +="attribute vec2 vTexCoord2; \n"
vertexShader +=" \n"
vertexShader +="varying vec4 v_color; \n"
vertexShader +="varying vec2 v_texCoord1; \n"
vertexShader +="varying vec2 v_texCoord2; \n"
vertexShader +=" \n"
vertexShader +="void main() \n"
vertexShader +="{ \n"
vertexShader +=" v_color = vColor; \n"
vertexShader +=" gl_Position = worldviewproj * vPosition; \n"
vertexShader +=" v_texCoord1 = vTexCoord1.st; \n"
vertexShader +=" v_texCoord2 = vTexCoord2.st; \n"
vertexShader +="} ";

var fragmentShader = "";
fragmentShader += "uniform sampler2D texture1; \n"
fragmentShader += "uniform sampler2D texture2; \n"
fragmentShader += "uniform vec4 pulse; \n"
fragmentShader += " \n"
fragmentShader += "varying vec2 v_texCoord1; \n"
fragmentShader += "varying vec2 v_texCoord2; \n"
fragmentShader += " \n"
fragmentShader += "void main() \n"
fragmentShader += "{ \n"
fragmentShader += " vec2 texCoord; \n"
fragmentShader += " texCoord[0] =cos(pulse.x)+1.0+ ((2.0+sin( mod( (v_texCoord1.s*18.0),6.2832) ))*v_texCoord1.t); \n"
fragmentShader += " texCoord[1] =sin(pulse.x)+1.0+ ((2.0+sin( mod( (v_texCoord1.t*18.8),6.2832) ))*v_texCoord1.s); \n"
fragmentShader += " gl_FragColor = texture2D(texture1, texCoord); \n"
fragmentShader += "} \n";

myShaderCallBack = function()
{
var time = new Date().getTime();
var pulse = ((time % 36000)/5729.577951);
ccbSetShaderConstant(2, 'pulse', pulse, pulse, pulse, pulse);
// 2?, name, r,g,b,?
}

var newMaterial = ccbCreateMaterial(vertexShader, fragmentShader, 12, myShaderCallBack);

// note, "node" is automaticly the mesh you applied this bahaviour to. not working with terrain or scene node
var cube = node;
ccbSetSceneNodeMaterialProperty(cube, 0, 'Type', newMaterial);
//---- shader test end

return false;
}

return true;
}



csp-games
Guest
Quote
2021-02-17 23:02:28

🔎︎

As you can see, using a simple water texture as the basis turns this into some weird plasma-like animation, probably useful for supernatural beings, or power shields etc. this animation loops seamless. I also tweaked the value "*18.0" to "*9.0", reducing the kind-of-tiling, tho it doesn't really tile per se, as it procedurally modifies each "tile" individually.


just_in_case
Moderator
Quote
2021-02-18 15:31:48

Nice


csp-games
Guest
Quote
2021-02-20 20:19:19

just a little update...

I tried hard, but wasn't able so far to use any blending mode other than solid (1), lightmap (2, but results in solid at least when used as texture1) and add.blend (12), which results in the beforementioned disappearing of anything using alpha textures: the grass, the leaves, the water. I however still got to test a simple alpha texture with a real alpha channel, like the grass.

Cause I just had an idea for a shader based LOD manager for trees. Imagine a nice tree, fairly detailed. You render it eg. 36 times from all angles in steps of 10 degrees and save those renders with alpha channel, all combined on a 6*6 spritesheet.

Now in the engine, when the tree is near the camera you show the tree and hide a decal at the same position. But if the tree is far away, you hide the tree mesh and show the decal. The decal is textured with the spritesheet and the shader will compute which of the 6*6 sprites is used, based on the angle to the camera, handed over using ccbSetShaderConstant.

This way you can have thoudsands of seemingly high polygon trees in the scene without significant impact on the framerate. Except for the trees close to the cam, each tree will have only 2 triangles, plus they use the same material.

The question however is, whether alpha is supported by the shader options in CC.

Also interesting:
I was able to copy the cc canvas to a javascript array, so you can read pixels:


dd__canvas = document.getElementById('3darea');
myarr=new Uint8Array (dd__canvas.width * dd__canvas.height * 4);
dd__gl = dd__canvas.getContext('webgl2', {preserveDrawingBuffer: true});
dd__gl.readPixels(0, 0, dd__canvas.width, dd__canvas.height, dd__gl.RGBA, dd__gl.UNSIGNED_BYTE, myarr);


However, a shader cannot access this array :( ... also, GLSL es2 shaders can a priori not access the "backbuffer" - they can only create a "framebuffer", render to it, then access it.

The shader options of cc , as far as I see, allow only input-access to the textures 1+2 of the material of the mesh when the shader program is initialized, so even if you alter the texture of the mesh after starting the shader, the shader will use the old texture.

I also tried to dynamically load the cc canvas as a texture:


var node2= ccbGetSceneNodeFromName("cubeMesh6");
ccbSetSceneNodeMaterialProperty(node2, 0, 'Texture1', dd__canvas.toDataURL("image/png"));// doesn't work
ccbSetSceneNodeMaterialProperty(node2, 0, 'Texture1', "copperlichtdata/back.jpg");// works

that would have allowed to build all kinds of fx, but the "data:"
url isn't supported by CC, which is a bit strange.
I also checked whether it is the non-power-of-2 size of the canvas, but CC loads those ok, at least the editor does so.

However, you can draw this data: image to a 2D canvas.

I wish Niko would give use some more intel about the shader support. I see some variables are reserved/preset, like texture1, texture2 etc. Would be useful to have a list of those built in variables, so a CC user doesn't have to become a GLSL expert to do any little thing.


marcw
Guest
Quote
2021-02-20 21:45:53

Hello Dieter,

I wish you could discover and share some nice shaders with this community.

You write this "I tried hard" and I know what it means, because it is mainly an exploration with the guess method.

That matter is poorly documented and Niko mentions this : " ... The system isn't very advanced, but enables to create basic extensions ...".

Your project to populate a landscape with thousands of trees is interesting.

Nice trees are important to create realistic landscapes.

A few years ago, Neil Kamp who is the developer of ShaderMap, created a superp tool to create many animated trees in the video game.

The project was discontinued but there is still a video on YouTube :

https://www.youtube.com/watch?v=...

And about the shaders, I like very much these ones :


http://madebyevan.com/webgl-wate...

http://david.li/waves/

:-)


csp-games
Guest
Quote
2021-02-20 22:07:37

Hey Marcw, thanks for your feedback. I became a bit cautious with shader demo pages, after one froze my system like nothing ever before. Also, CC shaders are limited in that you can only manipulate the texture of a material, but there is no way to work with framebuffers, which would allow to add screen effects like bloom etc (that's in the pro version), as far as I understand.

If your hardware can render 200'000 triangles with 60 fps, that would be 100'000 trees in the LOD system I described. In fact you could also animate it with some sinus factors, but that would make the code a bit more complicated. From my POV it would be ok to animate the nearby trees only.

Not sure if I'm gonna find the time to implement it, but good to know it is possible and fairly easy (debugging is the time killer 1)


just_in_case
Moderator
Quote
2021-02-21 09:15:00

Cool. You can try using transparent Alpha blend (13) it always worked for me in hlsl shader.
I always found hlsl easier than glsl. You can also play with light vectors and light colors to try some more cool effects.
Try using ccbSetShaderConstant more often to get the values from the editor and pass it to shader.

you can use it like
ccbSetShaderConstant (1 "to use with vertex shader" or 2 "to use in fragment(pixel) shader", Name, x,y,z)


you can use it something like this
myShaderCallBack = function()
{
var light = ccbGetSceneNodeFromName("Light1");
var root = ccbGetRootSceneNode();
var lightpos = ccbGetSceneNodeProperty(light,"Position");
var lightcolor =ccbGetSceneNodeProperty(light,"Color");
var Ambientcolor =ccbGetSceneNodeProperty(root,"AmbientLight");
ccbSetShaderConstant(2, 'tile', 1,0,0,0);
ccbSetShaderConstant(1, 'light1Pos', lightpos.x,lightpos.y,lightpos.z,0);
ccbSetShaderConstant(2, 'light1Color', lightcolor.x,lightcolor.y,lightcolor.z,0);
ccbSetShaderConstant(2, 'AmbientColor', Ambientcolor.x,Ambientcolor.y,Ambientcolor.z,0);

}

and in your sample you can define tex0,tex1,tex2, or tex4 which will get the textures directly form the editor. with this you can blend up to 4 textures together, for example to blend diffuse,normal,roughness,specular etc textures.

shaders are complicated and deals with lot of mathematics and am not at all good with maths

maybe you can create some beautiful shaders with your skills with maths. but yeah shaders are the only thing in game developing which made me goes awww and what, whats going on. I accidentaly created so many cool effects by changing and experimenting in shaders and someimes i was like woah thats a nice effect and sometime i was like what is this. but i enjoyed playing with them. Unfortunately i was unable to save any of them cause i was editing them inside the coppercube editor and was trying to create a very simple color switching shader which i got working somewhat which uses 2 texture one is a color pallete and one is original texture. and if you change the color in the pallete texture it will change the original color textures also. but there was a strange issue with it. it does change the color from the pallete but it automatically switch to different shades of that color. it will either make the color darker or lighter. so i dropped the idea of creating shader.

hopefully one day i will try to redo all that stuff.


marcw
Registered User
Quote
2021-02-21 13:41:31

Hello everybody,


This thread could be a think tank about shaders inside CopperCube.

Very interesting matter in Just_in_case's comment.

Dieter, I want to say that I underestimated the usefulness of your custom-made behavior and I explain why :
I am more and more convinced that there is a kind of bug in CopperCube and it has an incidence on the way shaders are performed.
I thought that editing and testing java script in the project itself was a good solution.
However after having a lot of unexpected results, I must admit that this workflow is misleading.
Why ? Because it seems that CopperCube stores the compiled shader in the RAM reserved for the application.
I noticed that when I inserted new lines of code in the tested shader, then they remain buffered somewhere even when those lines are later deleted.

About the materials and Textures in CopperCube, it is a matter that Just_in_Case is perfectly mastering and his video tutorial about the export of mesh created with multi-material in Blender is, as I already said it, uppermost useful.

As far as I could test it, CopperCube may store 1 to n materials (the value n being limited by the possibility of the selected importer).
And each material can be defined with up to 4 textures (these one are fully visible in the Irrlicht properties editor where they could be assigned manually or with Java script).

To enjoy using CSP_Game shader created by Dieter, I took the liberty to save it in the folder "extensions" of my CopperCube's version.

I think that if he would dig deeper then Dieter could find the solution to that alpha transparency problem.

Just for the fun, I want to show a shader test with some lines of codes added to the original shader created by Dieter.

Before running it, I applied 4 textures in the Irrlicht properties pane to the selected node (the default cube).
Therefore the single material of the default cube contains those textures.

Here is the content of the stored behavior (my modified version : Sorry for this -> I couldn't post the entire script, too much lines ) :





var fragmentShader = ""; 
fragmentShader += "uniform sampler2D texture1; \n"
fragmentShader += "uniform sampler2D texture2; \n"
fragmentShader += "uniform sampler2D texture3; \n"
fragmentShader += "uniform sampler2D texture4; \n"
fragmentShader += "uniform vec4 pulse; \n"

fragmentShader += " \n"
fragmentShader += "varying vec2 v_texCoord1; \n"
fragmentShader += "varying vec2 v_texCoord2; \n"


fragmentShader += " \n"
fragmentShader += "void main() \n"
fragmentShader += "{ \n"
fragmentShader += " vec2 texCoord; \n"
fragmentShader += " texCoord[0] =cos(pulse.x)+1.0+ ((2.0+sin( mod( (v_texCoord1.s*18.0),6.2832) ))*v_texCoord1.t); \n"
fragmentShader += " texCoord[1] =sin(pulse.x)+1.0+ ((2.0+sin( mod( (v_texCoord2.t*18.8),6.2832) ))*v_texCoord2.s); \n"

fragmentShader += " gl_FragColor = texture2D(texture1, texCoord); \n"
fragmentShader += " gl_FragColor += texture2D(texture2, texCoord); \n"
fragmentShader += " gl_FragColor *= texture2D(texture3, texCoord); \n"
fragmentShader += " gl_FragColor /= texture2D(texture4, texCoord); \n"
fragmentShader += "} \n";



csp-games
Guest
Quote
2021-02-21 16:17:03

Thanks to both of you, very interesting aspects. Except for the limitation by which a fragment shader can access the contents of a vec4 array only by constant index, one theoretically could deliver the entire big array as a list of vec4s, but I'm afraid that would be slow.


csp-games
Guest
Quote
2021-02-21 16:28:54

I just tried it with the grass texture. Unfort. I seem to be unable to use correctly blended alpha in a shader material. Unless somebody can tell me whether it's possible to do that at all, I put the LOD idea aside.


marcw
Registered User
Quote
2021-02-22 20:07:46

Hello everybody,

Dieter, I take my revenge ;-)
Indeed, when I was near the end of the second level of your famous game (the industrial facility with the containers), I climbed in the container having that red button. I collected the munition, but I was cheated by the angle of the wooden cage.
The castle level was difficult without the cheat codes because I had no more explosives to neutralize that strong red baron using a toxic gas.

I enjoy trying to find solutions that's why I obstinately studied your nice shader waving with those sin+cos formulas.

After several hours I endly found a good solution.
Not easy to find it, because it could be compared to a second-order equation with two unknown variables.

Your shader is correct and works with material type 12.
I simply added a vec4 variable to amplify its transparency for the purpose of visual debugging.

The solution is the following ... (I'll show it).

:-)


marcw
Registered User
Quote
2021-02-23 00:09:20

Hello again,

I am sorry for the delay.

Here is a link to the shared folder on my OneDrive relative to my experiment with CSP-Games (Dieter) shader.

https://1drv.ms/u/s!AjokN1FU3jK1...

Comment included in that folder :

This folder contains two files :

a behavior created by CSP-Games to apply a WEBGL (GLSL format) waving shader animated by a combination of sinus and cosinus formulas.

Please visit this thread https://www.ambiera.com/forum.php?t=8797 in CopperCube's forum to read Dieter's comments about his nice shader.

The perfect solution to apply this shader into a CopperCube's project seems to not exist.

However the solution proposed herewith seems to me acceptable if the scene contains a limited amount of low poly meshes occluded by the shader.

This problem had to be solved :

A transparency material applied as "Type" to the CSP-Games shader disables the visibility of any mesh mapped with some transparent material and occluded by the mesh to which that CSP_Games shader is applied.

First part of the solution : don't use transparent materials for the meshes occluded by the shader.
Second part of the solution : place those meshes inside the main folder "Terrain".

I guess that Dieter won't be fully satisfied with this solution, because his shader is a part of a bigger project having a huge number of bilboard items.

Unfortunately it is necessary to use alpha transparent textures to create very low poly bilboard items.

Let us hope that a future version of CopperCube will offer the perfect solution for Dieter's shader.

Thank you for paying attention to this test shown in all modesty.

:-)


csp-games
Guest
Quote
2021-02-23 19:40:19

Hi Marcw,
thank you very much for your efforts in solving this problem, actually two problems: 1) alpha-blend-textured meshes would disappear behind the add-blended shader mesh (agent orange view, as it removed grass and leaves, nicely clipped to the shader mesh shape) and 2), a shader using alpha-channel textures, like the grass etc. did not work.
Very interesting that you have found a diffrence when it is in the terrain folder. Alpha geometry, at least AFAIK in DirectX, is "manually" z-sorted, and the disappearing may have to do with z-sorting / depth-sorting. I am a bloody beginner with WebGL and it's shader GLSL es2. I may also try to apply the alpha of the texture (.rgba) not to gl_fragColor, but hack a bit with terms like gl_fragAlpha - there are quite some powerful spells in WebGL that one simply has to know and that are relatively hard to search on the web. A lot of the docs are bone dry tech papers, barely comprehensible.
The sooner or later we'll figure this out. After all, I do at least suspect the CC grass uses a shader too. So somehow it's got to work.


marcw
Registered User
Quote
2021-02-23 22:57:00

Hello (again -> my comment about your TPP Camera) Dieter,

I modestly appreciate your "thank you", because I am myself a newbie in the world of shaders.

Personally I am satisfied with the existing shaders provided by Niko.

As far as I understand with my experiments, CopperCube offers a very limited access to the creation of custom-made shaders.

Indeed, the code relative to the vertex and fragment shaders has to be linked to some hard coded shaders (source : the Irrlicht Engine) available in CopperCube.

For the fun, I could compare that limitation to an intellectual confinement.

:-)


csp-games
Guest
Quote
2021-02-24 03:08:14

I think there is a solution to problem 2 at least. I just realized, that we can use for the WebGL target the entire copperlicht api. The way coppercube uses the shader setup options given by copperlicht limits its use, but by using the copperlicht function directly, offers source and destination blendmode parameters:

createMaterialType(vertexShaderSource, fragmentShaderSource, blendenabled, blendsfactor, blenddfactor, functionShaderCallback)

using these functions may be a little more complex, but the docs come with examples-

I was totally unaware that the copperlicht sdk with docs opens up an entire new world to us, because it allows to use the entire api that coppercube is based on. But you have to download the sdk: https://www.ambiera.com/copperlicht/index.html

Some interesting stuff in there that is not accessible trough Coppercube directly. Like Renderer control etc.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Int?rnational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact