# 3D Mode(WEBGL) Changes the colors of mysketch

**URL:** <https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199>\
**Category:** Coding Questions\
**Created:** [December 2, 2018, 7:04pm UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199 "2018-12-02T19:04:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gio/32/2313_2.png) [@gio](https://discourse.processing.org/u/gio)\
**Post date:** [December 2, 2018, 7:04pm UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/1 "2018-12-02T19:04:12Z")

</div>

Hi, I just changed a 2d sketch to be 3D with the WEBGL option.

I wanted to shift perpective, and that works perfectly, but somehow the colors are now different.

Im guessing now its using some kind of 3d lamp, but i want to keep my shadeless colors. is there a way to keep my colors as in my 2d sketch?

Thanks:

Here is the 2d sketch:  
https://codepen.io/giorgiomartini/embed/preview/LXBPOx?height=300&slug-hash=LXBPOx&default-tabs=js,result&host=https://codepen.io

And here is the 3d one:  
https://codepen.io/giorgiomartini/embed/preview/NEJKQb?height=300&slug-hash=NEJKQb&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 2, 2018, 7:27pm UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/2 "2018-12-02T19:27:09Z")

</div>

Interesting discovery! I has to do with opacity, and this is a minimum example showing the issue:

```auto
function setup() {
  createCanvas(100, 100, WEBGL);
  background("#140c28")
  fill("rgba(250, 64, 24, 0.5)")
  ellipse(50, 50, 80, 80);
}

```

The colors are different with/without WEBGL.

---

<div class="post-metadata">

**Author:** ![gio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gio/32/2313_2.png) [@gio](https://discourse.processing.org/u/gio)\
**Post date:** [December 2, 2018, 10:46pm UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/3 "2018-12-02T22:46:18Z")

</div>

hi Hamoid! So… Is it a bug? I mean a certain color should be rendered equally both in 3d and 2d right? And is there a way to get the colors I want? thanks! 🙂

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 2, 2018, 11:18pm UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/4 "2018-12-02T23:18:46Z")

</div>

I think it may be a [bug](https://github.com/processing/p5.js/issues/3356). If you were only using transparency to achieve different darknesses (and you don’t actually need transparency) you could use something like

```
`hsl(20, 50%, ${random(20,50)}%)`

```

instead of `rgba()`, right?

---

<div class="post-metadata">

**Author:** ![gio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gio/32/2313_2.png) [@gio](https://discourse.processing.org/u/gio)\
**Post date:** [December 3, 2018, 10:03am UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/5 "2018-12-03T10:03:02Z")

</div>

Yeah you are right… ill just use another color instead of opacity … will also make it faster probanby.

thanks!

---

<div class="post-metadata">

**Author:** ![lmccandless](https://avatars.discourse-cdn.com/v4/letter/l/f0a364/32.png) [@lmccandless](https://discourse.processing.org/u/lmccandless)\
**Post date:** [January 6, 2019, 6:08am UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199/6 "2019-01-06T06:08:08Z")

</div>

I just ran into this same problem, trying to draw transparent black rects over a shader graphic. It doesn’t look black it looks gray ☹ where would I look to fix this?

In the meantime I’ve had to resort to creating a black transparent png and drawing that instead of a rect…not ideal.