Customize "No WebGL" Notice

This topic has 7 replies, 3 voices, and was last updated 3 years, 5 months ago by Yuri Kovelenov.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
2022-05-17 at 5:05 pm #52144

ma77hew
Participant

Is it possible for customize the notice that users receive if they don’t have WebGL support on their browsers?

2022-05-17 at 5:39 pm #52146

xeon
Customer

What does your notice look like now?

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-17 at 5:45 pm #52148

ma77hew
Participant

Right now it displays the default Verge3D notice and links to the Soft8Soft website. My users aren’t tech-savvy people so they won’t know what is going on, it would make more sense for me to display my own notice. How can I do it?

2022-05-17 at 5:47 pm #52149

xeon
Customer

I haven’t seen it but I would want to change it. Can you provide a pic or url it’s going to and I will track down it’s origin and see if we can find a solution.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-17 at 5:53 pm #52150
ma77hew
Participant
This one here. I have it displayed after disabling WebGL in Safari. How can I customize this?
Attachments:
1. Screen-Shot-2022-05-17-at-1.53.01-PM.png
2022-05-17 at 6:56 pm #52152

xeon
Customer

Ok… just so happens I ran into this yesterday during testing….on Firefox. I am going to dig in and see how to replace it. Thank you.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-17 at 7:20 pm #52153

xeon
Customer

Ok…found it in the v3d.js file. You can modify the text and the link there. I am still digging around to find a more elegant way of handling it with a branded graphic etc.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-18 at 6:46 am #52162
Yuri Kovelenov
Staff
You can override the styles for this notice by using the following CSS classes:

v3d-webgl-error
v3d-webgl-error-link

You can also override the content of this message (text and link). However, this piece of HTML code is only injected if there is no webgl.

So, to do this, in the your_app.js you could try to obtain a WebGL context first.
```
var canvas = document.getElementsByClassName('v3d-canvas')[0];
var gl = canvas.getContext('webgl');
```
If there is no WebGL, retrieve the HTML elements of this message with getElementsByClassName and update with innerHTML.

Chief 3D Verger | LinkedIn | X
Author

Posts