Jump to content

November challenge - celebrating materials


RaananW
 Share

Recommended Posts

Making progress but not there yet. I have made two changes

 

  1. Completely changed the increasedFacets function to one you only call once and is a bit more efficient. It now takes two parameters the mesh and the points to be added to each side of a facet. When n is the number of points per side the facets increase by (n + 1)(n + 1) and the number of vertices by (n + 2)(n +3)/2
  2. Added a convertToSmoothShadedMesh function. When a box is created each corner has three normals, one for each face. ( I think this happens only  for the creation of boxes and polygons). Since this shader pushes the vertices in the direction of the normal this produces gaps at the edges http://www.babylonjs-playground.com/#1WIMO1#9 So the function averages out the normals at a vertex (this is the usual way that most meshes are created). The result of using the smoothing function removes the gaps http://www.babylonjs-playground.com/#1WIMO1#8 between the edges.

Currently I am working on using an image as a heightMap for the fur length and using an image for the texture. Still a long way from completing so doubt if I will be entering for the challenge but will keep working on it and submit it for the material library when I am happy with it

Link to comment
Share on other sites

Now have a shader that can use an image for texture http://www.babylonjs-playground.com/#1WIMO1#10 and one that uses an image for a heightmap http://www.babylonjs-playground.com/#1WIMO1#11

 

Now to get to grips with putting everything into one material for the material library. I may be gone for some time :wacko:

Link to comment
Share on other sites

Thanks to Temechon's help I have managed to create and test my fur material in my Babylon fork. Tha'ts the good news. The bad news is that I cannot get it to work. The webserver is up and running and I get the option in the shaderlibray menu and I get the different meshes for my shader and even get the texture I applied but the change of height for the vertices is not working. Somewhere along the way trying to put my few lines of code that worked in the playground into all the vertex.fx and fragment.fx code I got well and truly lost. Perhaps I'll have time for another play tomorrow. If anybody feels brave enough and has enough time given how busy everybody is you can have a look at https://github.com/Cubees/Babylon.js/tree/babylonjk1

 

In the meantime I have been very pleasantly amazed by the current examples of BJS projects that are appearing.

Link to comment
Share on other sites

Not so much an error the vertices did not change height. Trouble is I know how to use the console to check values etc for JavaScript but cannot find a way to debug the shader bits to see which bits give the expected results.

Link to comment
Share on other sites

@RaananW and @jermome thank you for the tip. One thing I have found using the shader editor is that my shaders never seem to change. I stripped the shaders back to the basic code I used for them in the PG examples but everytime I ran 'gulp webserver' I still found the original shaders I first wrote in the materials library.

I am using Visual Studio Code for editing and have commited the changes. I have completely closed the command line window opened it and re-installed npm and gulp and re-compiled and cleared the cache so I am guessing it is something to do with the recompling not overwriting the originally compiled program????

Will search for the compiled program and research compiling with gulp to see if there is a flag to set so it overwrites.

In the meantime any advice would be appreciated.

EDIT Seems it's not a compilation problem have found the compiled file and it matches the new edits. The link in the page source is to the old file. More tracking to do. May not have time until Thursday.

Link to comment
Share on other sites

You have to run "gulp" first to compile. It will override everything you have in the dist folder.

"gulp webserver" only run the webserver.

One more thing : be sure to check if "gulp" returns no error. If you have any error, the typescript won't compile and your javascript file won't change.

Link to comment
Share on other sites

It does seem to be a comiplation error after all. The compiled files are not being changed. This is the message after using gulp

[09:29:36] Using gulpfile ~\Documents\Babylon.js\materialsLibrary\gulpfile.js[09:29:36] Starting 'copyReference'...[09:29:36] Finished 'copyReference' after 72 ms[09:29:36] Starting 'default'...[09:29:36] Finished 'default' after 113 ms

Does the 'default' on the last two lines mean that an error has occured and it has defaulted to the original file?

 

 

Link to comment
Share on other sites

@RaananW I had added the files to be comiled into the gulp file but I had not done it correctly. Would never have thought to check there without your suggestion. It was a copy and paste error and forgetting to edit some of the paste error. Still a bit to go before it works correctly but am definitely closer. :)  Still have limited time to do this before Thursday but will make the best use of the time I can have.

 

Good advice as usual.

 

Edit Have also just realised I need to commit after running gulp (I think)

Link to comment
Share on other sites

Also sorry the best I can do at the moment are the PGs I posted already. Still learning to handle forks, branches, github desktop, Visual Studio Code and materialsLibrary. Seems very unlikely I'll have it sorted even by the weekend.

Link to comment
Share on other sites

Still struggling but have found another mistake I have made. in my babylon.furMaterial.ts file I had left the following code 

// Legacy browser patchvar shaderName = "simple";

as it was instead of changing it to

// Legacy browser patchvar shaderName = "fur";

Next time I will not take the How to instructions so literaly - as it said simple not simpleMaterial I didn't change it and everytime I saw it I thought it was something to do with that fur extended simple. Dhhhh how stupid was that.

 

However I now get the following error message in the console

 

Error: WebGL: shaderSource: String contains the illegal character '92', ie a backslash \

 

Now in babylon.furMaterial.js there are lots of these in the BABYLON.Effect.ShadersStore properties of furVertexShader and furPixelShader. But  there are also loads in, for example, Temechon's lavaMaterial. Of course these are for the escape codes for newline \n or tab \t

 

So now I presume I have at least one stray backslash somewhere.

 

Time to go throught the shader codes with a fine tooth comb. Anyone got any ideas where it may be likely it will be much appreciated.

Link to comment
Share on other sites

Yay Thursday and I think I have correctly finished adding furMaterial to my fork. Made a lot of silly mistakes on the way but have learnt an awful lot on the way. I hit the pull request button on my branch (babylonjk1) of my fork but not entirely sure if this was the thing to do or not. Will wait and see what happens.

 

Thank you for the votes I though Temechon's and RannanW's are brilliant. Could imagine a game using RaananW's where an invisible being is moving stealthfully around marked only by the disturbance in the surroundings. :ph34r: 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...