gradient material

[Lary]

Hi all,

I want to make a gradient material, which has silver color from top and purple color at bottm ( pls. see attached pic);

I found  "babylon.gradientMaterial.min.js" this file from github. and copied code from https://doc.babylonjs.com/extensions/gradient ;

 

var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene); var gradientMaterial = new BABYLON.GradientMaterial("grad", scene); gradientMaterial.topColor = BABYLON.Color3.Red(); // Set the gradient top color gradientMaterial.bottomColor = BABYLON.Color3.Blue(); // Set the gradient bottom color gradientMaterial.offset = 0.25; sphere.material = gradientMaterial;

 

but I came across the problem with  "Uncaught TypeError: Cannot read property 'getTextureMatrix' of null" 

Can anybody help me what caused this error? 

can you suggest any other solution to gradient effect, except shadows, coz it's quite hard for me to learn in short time in my project.

Thanks in advance.

 

 

[GameMonetize]

Hello and welcome (I moved your post to the right folder)

Do you mind creating a repro on playground.babylonjs.com ? This is the best way for us to help you

[Wingnut]

Hi guys.  I found a gradient playground while I was walking in playground park.

You guys can use it for testing.  I decided to add an animation to move the sphere up/down.

The material doesn't "ride-along"    Weird.

I also added a couple textures, but I didn't have time to test why they aren't showing.

Perhaps others will improve this test PG.  Have a fine weekend, everyone.

[Lary]

On 2017/7/15 at 1:25 AM, Deltakosh said:

Hello and welcome (I moved your post to the right folder)

Do you mind creating a repro on playground.babylonjs.com ? This is the best way for us to help you

Thanks for correcting the category, DK. 

I haven't tried to post on PG before. I may create one later. 

Can you tell me which files to include if I want to use gradientMaterial? I included gradientMaterial.js and Babylonjs.3.0.js, but came across above errors.

I was told there maybe a conflict between material.js and babylon.js /

Do you have any ideas?

[Lary]

On 2017/7/16 at 5:37 AM, Wingnut said:

Hi guys.  I found a gradient playground while I was walking in playground park.

You guys can use it for testing.  I decided to add an animation to move the sphere up/down.

The material doesn't "ride-along"    Weird.

I also added a couple textures, but I didn't have time to test why they aren't showing.

Perhaps others will improve this test PG.  Have a fine weekend, everyone.

Thanks for your example, Wingnut. 

I know new BABYLON.GradientMaterial() can be applied in gradient material. But I came across errors with "Uncaught TypeError: Cannot read property 'getTextureMatrix' of null" 

Do you have the same problem?

Could you tell me which version of babylonjs file you include ?

[Wingnut]

Hi Lary.  Actually, I didn't use this playground code... at-home.  So I didn't need to import-in gradientMaterial.js.  It is already included-into the playground app.

Your error is texture-related, I would assume.  I wasn't able to get textures active AT ALL in that playground.  (see lines 29/30).  But, I didn't test well, yet, and I make lots of mistakes.  I don't even know IF gradientMaterial ALLOWS textures... I haven't checked its code, and I didn't code it. I will do more study.

In your test... when you get the error, are you using ANY textures at all?  Anything like... gradientMaterial.diffuseTexture or gradientMaterial.emissiveTexture?  Or, are you getting this error with NO texture usage?  Any chance you could zip-up your entire project (with current errors) and make it available to us?  I wonder why your project has texture errors, when only colors are being used.  hmm.  *scratch scratch*

I am going to assume that you are ONLY using the code that you included in your first post.

I have only tested the LATEST babylon.js... the one used in the playground app.  And I have only used the gradientMaterial.js that is automatically included-into the playground app.  I tried switching to BJS version 2.5 in the playground (selector in upper right corner), but that is currently broken. 

------

Feel free to "mess-with" that playground... and see if you can cause the same error in ITS JS console.  Edit and save new versions of that playground... as often as needed.  You can't hurt anything in the playground.  The URL for the playground scene.... will increase its version each time you save.  If you find something interesting, do another save and paste that URL to us, here.  Then we can all see problem. 

We want to TRY to cause the same error as yours... in the playground's JS console.  Then... you know... we can get the entire team on the case. 

Are you SURE the error... is caused by the gradientMaterial code, and not some other code in your project?  Make sure the gradientMaterial IS the cause of the error.  (Sorry if I'm treating you like a child, but, sometimes we all forget to check the source/line #'s listed on the far-right side of the error report.)

Also, make sure that gradientMaterial.js is being properly loaded with a script tag.  Make sure it isn't doing a hidden File-Not-Found / 404.

All in all, thanks for the error report, Lary.  We will find its cause, soon.  I will do more tests, and maybe you can do more tests, and we will beat this. 

Please report ANYTHING you learn (here), and I will do the same.  Talk soon.  Other forum helpers... please submit ideas/comments.  Thx.

[Lary]

9 minutes ago, Wingnut said:

Hi Lary.  Actually, I didn't use this playground code... at-home.  So I didn't need to import-in gradientMaterial.js.  It is already included-into the playground app.

Your error is texture-related, I would assume.  I wasn't able to get textures active AT ALL in that playground.  (see lines 29/30).  But, I didn't test well, yet, and I make lots of mistakes.  I don't even know IF gradientMaterial ALLOWS textures... I haven't checked its code, and I didn't code it. I will do more study.

In your test... when you get the error, are you using ANY textures at all?  Anything like... gradientMaterial.diffuseTexture or gradientMaterial.emissiveTexture?  Or, are you getting this error with NO texture usage?  Any chance you could zip-up your entire project (with current errors) and make it available to us?  I wonder why your project has texture errors, when only colors are being used.  hmm.  *scratch scratch*

I am going to assume that you are ONLY using the code that you included in your first post.

I have only tested the LATEST babylon.js... the one used in the playground app.  And I have only used the gradientMaterial.js that is automatically included-into the playground app.  I tried switching to BJS version 2.5 in the playground (selector in upper right corner), but that is currently broken. 

------

Feel free to "mess-with" that playground... and see if you can cause the same error in ITS JS console.  Edit and save new versions of that playground... as often as needed.  You can't hurt anything in the playground.  The URL for the playground scene.... will increase its version each time you save.  If you find something interesting, do another save and paste that URL to us, here.  Then we can all see problem. 

We want to TRY to cause the same error as yours... in the playground's JS console.  Then... you know... we can get the entire team on the case. 

Are you SURE the error... is caused by the gradientMaterial code, and not some other code in your project?  Make sure the gradientMaterial IS the cause of the error.  (Sorry if I'm treating you like a child, but, sometimes we all forget to check the source/line #'s listed on the far-right side of the error report.)

Also, make sure that gradientMaterial.js is being properly loaded with a script tag.  Make sure it isn't doing a hidden File-Not-Found / 404.

All in all, thanks for the error report, Lary.  We will find its cause, soon.  I will do more tests, and maybe you can do more tests, and we will beat this. 

Please report ANYTHING you learn (here), and I will do the same.  Talk soon.  Other forum helpers... please submit ideas/comments.  Thx.

friend, your heartful and long reply is very much appreciated. 

and I'm happy that you treat me like a child, lol. Actually I'm rather a rookie at babylonjs, I really like using it to make fancy and fantastic effect, thanks for your guys' effort in contributing to this incredible framework. regards!

Lastly, I will try to put my project at PG, and will @ you  once finished. 

Time to sleep in China, good night!