# Displaying the Content of HDR Files in Equirectangular Mode

**URL:** <https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821>\
**Category:** Questions\
**Tags:** hdr\
**Created:** [July 5, 2024, 8:34am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821 "2024-07-05T08:34:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [July 5, 2024, 8:34am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/1 "2024-07-05T08:34:53Z")

</div>

I don’t want to display it in six pictures.

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/e/9e05881c42eb130404dcc070f0bb306fcaa3cb18.jpeg)

I would like to use an Equirectangular diagram to demonstrate, for example:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/4/24787e0d927b73feb911ae46eeee3502405d41e8.jpeg)

Display it on the texture in this way so that canvas can see it.

How can I operate it?

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 5, 2024, 8:50am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/2 "2024-07-05T08:50:51Z")

</div>

Hello 🙂

What you need is

```javascript
const skyTexture = new BABYLON.EquiRectangularCubeTexture(textureURL, scene, 1024);
skyboxMaterial.reflectionTexture = skyTexture
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

```

Here is a [Playground using URL of your image on previous post](https://playground.babylonjs.com/#4U4QH9#53)

++  
Tricotou

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [July 5, 2024, 9:03am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/3 "2024-07-05T09:03:12Z")

</div>

This is an. hdr file, not a. jpg image, I want to use HDR to display on the canvas page, such as：  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/8/f800c05f223ba542ad942dc9904f9e5b29263392.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 15, 2024, 4:54pm UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/4 "2024-07-15T16:54:25Z")

</div>

[https://playground.babylonjs.com/#2FDQT5#2700](https://playground.babylonjs.com/#2FDQT5#2700) would work

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [July 15, 2024, 5:45pm UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/5 "2024-07-15T17:45:23Z")

</div>

Great, that’s exactly what I want. I will go and understand the principle. Thank you. Fortunately, this post did not sink 😄

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [July 16, 2024, 5:53am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/6 "2024-07-16T05:53:40Z")

</div>

> [@brightMoon](#):
>
> ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/8/f800c05f223ba542ad942dc9904f9e5b29263392.png)

@sebavan If it is an env file, can it be displayed on canvas using EquiRectangular

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 16, 2024, 6:07pm UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/7 "2024-07-16T18:07:28Z")

</div>

nope, as env are CubeTextures internally you would need to convert

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [September 29, 2024, 9:21am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/8 "2024-09-29T09:21:46Z")

</div>

Do you have specific steps?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 1, 2024, 12:44am UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/9 "2024-10-01T00:44:44Z")

</div>

you should look into cube to panorama shaders this should be able to convert.

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 1, 2024, 4:24pm UTC](https://forum.babylonjs.com/t/displaying-the-content-of-hdr-files-in-equirectangular-mode/51821/10 "2024-10-01T16:24:55Z")

</div>

Okay, I’ll study it