How to add createRadialGradient to ICanvas?

Hello all,

I am learning a lot about babylon.js those days and I got to the point that I need to change core functionalities to achieve my goals.

I am trying to add the createRadialGradient to the ICanvas interface. Although the project compiles and runs perfectly it doesn´t apply the gradient, I get solid colors. What else should I change for it to work?

Btw: I changed the WebXR teleportation landing zone (dynamic texture) and connected to the playground using an Oculus Quest 2. Is this a known issue?

    /**
     * Creates a linear gradient along the line given by the coordinates represented by the parameters.
     * @param x0 The x-axis coordinate of the start circle.
     * @param y0 The y-axis coordinate of the start circle.
     * @param r0 The radius of the start circle. Must be non-negative and finite.
     * @param x1 The x-axis coordinate of the end point.
     * @param y1 The y-axis coordinate of the end point.
     * @param r1 The radius of the end circle. Must be non-negative and finite.
     * @returns ICanvasGradient A linear ICanvasGradient initialized with the two specified circles.
     */
    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): ICanvasGradient;

Could you share a playground using a dynamic texture and the createRadialGradient function ? to see why it is not working. In the JS playground there should not be any issue to use it.

I added the createRadialGradient to ICanvas and compiled Babylonjs locally. Otherwise, this method cannot be found in a dynamicTexture.

I don’t know how to share a playground with my own build, can I send you my IP and port?

@sebavan
If you don’t mind compiling yourself, I just pushed a branch with the changes, you can check with any playground with WebXR and teleportation.

The best would be to go in the playground to highlight your issue as I doubt it is related to webXR. You can see it is all working here: https://playground.babylonjs.com/#5ZCGRM#3404

Thank you so much for providing a playground. I created an example to explain my issue.

In the following example if the center of the circle is solid (any color without alpha channel) it works, but if I try to set a color with alpha, instead of making the transition (from the center color to the border color), it simply doesn´t render the color in the center and the outer color is solid.

I want to achieve the first effect but using the alpha channel.

Screenshot from 2022-09-12 17-22-09

Screenshot from 2022-09-12 17-22-25

If you set useAlphaFromDiffuseTexture to true on the material then is it working as expected? :slight_smile:

4 Likes

Yes! That’s it! Thank you!!

1 Like