3D Interactive Graphics
Running In Your Browser
WebGL runs on your browser's CPU (limited capabilities),
and runs on your computer's GPU (so old computers can't run it).
​
But - there's no software / app downloading required,
it just works from any browser with an internet connection!
​
As Web Designers, you can use WebGL to expand your site's
visuals & capabilities, integrate 3D models, complex interactions, animations, VFX, WebVR, WebAR and so much more!
01 / SIMPLE SHOWCASING OF 3D MODELS
02 / INTERMEDIATE INTERACTIVE WEBGL
03 / COMPLEX WEBGL EXPERIENCES
How Do I Integrate
WebGL Into A WIX Website?
Amongst its many tools, WIX gives you the ability to embed HTML iframes right into your site.
​
1. In WIX Editor, click on Add ---> Embed ---> HTML iframe.
​
2. You will now get a "box" where your WebGL experience will be presented. You can obviously change its width & height however you'd like.
​
3. Click on Enter Code. Two options will appear:
- Website Address: which we will use later on in order to connect our cloud-hosted WebGL experiences to Wix.
- Code: which allows us to place a custom iframe code. This will be useful when you want to embed 3D models from sites like Sketchfab / Vectary / p3d.in / Google Poly / etc.
​
You might run into this option when you want to embed Youtube videos. Let's have a look at a simple iframe code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fzwOBOjSto8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
If you enter the code, you're going to get some ugly scrolling bars.
no 100%
To fix that, just change the width & height values to 100%.
yes 100%
The Box Mentality
If you understand how WebGL integrates into a WIX website, you should think creatively about the different ways this "HTML Box" can merge into your site's design & functionality.
​
-
Should my WebGL's background be transparent to make it seamless?
-
Should my WebGL be framed in a designed way?
-
How can I make my WebGL's loading icons fit my site's design?
-
Does scrolling & hovering & clicking affect my WebGL? How?
-
If I place text & image over my WebGL, what are the "interaction areas" that are left? Why?
-
How do the users of my site know my WebGL is interactive? How will I make them understand how to operate it?
-
Etc.
Let's roughly divide WebGL & WIX integrations into 3 categories:
ENHANCE YOUR BACKGROUNDS
Your site's header & strips have boxed backgrounds you can interchange with HTML iframes.
​
How about some cool VFX & Particles as your background? Maybe they change their visuals as you hover over them or scroll down?
​
Or maybe your whole background is a 3D world your users move back & forth as they scroll through your site?
​
How about 360 Photos & 360 Videos your users can "look around" to see from all angles?
ADD 3D INTERACTIVE ELEMENTS
Creating an E-Commerce website? Why not display the items in full 3D? Why not give your users the option to see different colors & textures?
What about triggering animations in order to see the items in full action?
​
Wanna go further?
​
Use WebAR to let your users place those 3D models in their living room.
​
Or create a full 3D scene and use WebVR to immerse them inside!
MAXIMUM WEBGL, MINIMUM WIX
Obviously you can create an entire website using WebGL, regardless of WIX.
​
But if you still want WIX capabilities, you can think of WebGL as your main functionality, and use WIX to take care of the rest (menus, texts, forms, comments, etc).
​
Maybe WebGL is just on your home page, to get that "wow effect", but other parts of your website (that are more informative) are "simpler"?
​