# The WebGL Globe - help - part 2 transparency

**URL:** <https://discourse.threejs.org/t/the-webgl-globe-help-part-2-transparency/10092>\
**Category:** Questions\
**Tags:** transparency\
**Created:** [October 8, 2019, 8:50pm UTC](https://discourse.threejs.org/t/the-webgl-globe-help-part-2-transparency/10092 "2019-10-08T20:50:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![makabrys](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makabrys/32/6005_2.png) [@makabrys](https://discourse.threejs.org/u/makabrys)\
**Post date:** [October 8, 2019, 8:50pm UTC](https://discourse.threejs.org/t/the-webgl-globe-help-part-2-transparency/10092/1 "2019-10-08T20:50:14Z")

</div>

Hi guys , I’m noob to webgl /js /three.js and most of the coding - I know some basic html and css .

I would like to make a project based on this **[video](https://www.youtube.com/watch?v=WKRrx5DVX-o)**  
What I found so far is a google globe experiment that Is more related with what I want and maybe work with it : [webgl globe](https://experiments.withgoogle.com/chrome/globe)

My Codepen proj webgl globe **[HERE](https://codepen.io/makabrys/project/full/XzNQVG)**

I can’t figure it out how to make the material transparent so I can add a .png as a texture ! , I was looking online for hours testing but din’t get nothing !

I anyone have any ideas pls let me know , also any suggestions to this project or wants to help me out pls let me know I will tip ! 🙂

Thank you ! .

---

<div class="post-metadata">

**Author:** ![ianw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ianw/32/7460_2.png) [@ianw](https://discourse.threejs.org/u/ianw)\
**Post date:** [October 10, 2019, 4:42am UTC](https://discourse.threejs.org/t/the-webgl-globe-help-part-2-transparency/10092/2 "2019-10-10T04:42:55Z")

</div>

I think you should look at line 109:

```auto
uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir+'world3.png');

```

This is where the background image for the globe is loaded in. You’ll notice in your browser debugging console that `world3.png` is not loading correctly, because you haven’t included it in the project. You can upload a file make it appear as your base texture.

The globe is a `SphereGeometry` built with a `ShaderMaterial`. The earth shader is defined on line 29 and you can edit the fragment shader to change the way the texture appears.

---

<div class="post-metadata">

**Author:** ![makabrys](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makabrys/32/6005_2.png) [@makabrys](https://discourse.threejs.org/u/makabrys)\
**Post date:** [October 10, 2019, 8:26am UTC](https://discourse.threejs.org/t/the-webgl-globe-help-part-2-transparency/10092/3 "2019-10-10T08:26:52Z")

</div>

Thank you ianw , yes I 'm aware about the texture , but to upload assets to CodePen you need a pro plan and I don’t have it , and with that `ShaderMaterial` I’ve tried many options but I can’t make it work ! , also I have a problem when I resize the page , the globe disappear !