Brilliant material

Help & Support
1

Hi all,

Could someone to help me to understand how to create Briliant material like in this sample!?

Thank you for attention.

2

Hi @Ivan_Stratiichuk,

I’ve done something similar for this project: https://pirron-rodon.one/

Basically what we did there for the diamond is a common trick:

  • The diamond model is using two materials, top diamond cap and inner diamond.
  • For the top diamond cap we assign a simple reflection material that uses an environment cubemap.
  • For the inner cap we assign a special material that uses a number of frames, that is diamond renders that have a slight offset:

image

Using a simple Playcanvas script we swap those frames depending the rotation of the camera. That gives the impression that the diamond is composed of many many small faces that are reflecting the light.

image
image946Ă—824 122 KB

image
image514Ă—1101 56.8 KB

3 Likes
3

Hello,

Thank you very much for reply, I need to check how its works and let you know!)

1 Like
4

Hi,

Is it possible somewhere to find this Playcanvas script to swap frames!?

Also could you advice me where can I find briliant textures round01-18.JPG for frames!?

5

From what I remember it isn’t anything complex.

  1. It stores a list all of the diamond textures in an array.
  2. Maps each texture to a rotation range (0-360), that means a 20 degrees step for each texture. So for example the round01 texture corresponds to a 0-20 degrees range, the round02 to 20-40 degrees etc.
  3. A simple counter keeps track on both axises on how much the rotation has changed and after the next 20 degrees step it swaps the texture with the next one.

For the brilliant textures, they were provided by a modeller. For testing I think there used to be a diamond ring playcanvas public project in the past, though I can’t seem to find the link anymore.

6

You mean I need to solve this steps 1,2,3 in java script!?

7

Yeah, I don’t think you will find a script that you can drop in on your project and have it work like that.

This is something that has to work with your camera setup and they way you name/handle your textures. So yes, you will have to do some coding.

Here is an example method on how to check when the camera has rotated more than 20 degrees. It is meant to work with the Playcanvas model viewer camera (orbit-camera.js script), where you have two axises of rotation (yaw and pitch):

// pitchDelta, yawDelta is the diff the camera has rotated on each frame
OrbitCamera.prototype.checkDegree = function(pitchDelta, yawDelta) {
    
    // how much the camera has rotated since the last texture update
    this.increment += (Math.abs(pitchDelta) + Math.abs(yawDelta));

    if (this.increment > 20) {
       // change the current diamond texture to the new in queue

       // reset counter
       this.increment = 0;
    }
};
8

So I need to create new entity in the root of my project, and add to this entity this sample of code that you sent me!?

9

This is what I see after adding your part of script in root of me project!?

How to use briliant textures for this part of code!?

image
image318Ă—576 35.1 KB

10

No, you need to understand the logic of what you are trying to do.

It won’t work by just copying/pasting the code in place.

11

I understand the logic of what I`m doing, I simply want to figure out how this logic looks in the root of playcanvas project.

Also I studied the sample of code that you sent, and it seems that it describes swapping frames depending on camera rotation up to every 20 degrees from 0 to 360 degrees.

1.I don`t know how to create a special material(brilliant inside) that use a number of textures.

2.How three materials(top, outside, inside) should be connected with each other in the root of playcanvas project and depending on that how to apply this material to a “model of brilliant”.

3.And clarify how script should be connected with camera in scene.

So I think its not a simple copy/paste strategy of figuring out of how it works!??

image

12

About this, it isn’t a special material or anything. At any instant the material uses a single texture, not multiple. You need to understand that from the list of ~20 different textures only one is active at any instant.

Pseudo-code:

// you assemble an array of textures in the start of your script
var textures = [
   this.app.assets.find('round01.jpg');
   this.app.assets.find('round02.jpg');
   this.app.assets.find('round03.jpg');
   etc.
];

// in your update method or wherever you will be doing your diamond effect logic
// your logic should calculate the index of the next texture, code posted above about it
myMaterial.diffuseMap = textures[index].resource;
myMaterial.diffuseMap.update();

For the other points you ask, I’ve done my best to answer them above, I can’t be of more help on this.

13

I understood what you meant!

My thoughts were in a wrong way…

1 Like
14

Hello, is it convenient to provide the source code address of the project? Willing to pay

15

Hi,

I think I can help you,

write me pls on my mail to agree details,

Kind regards Ivan.