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"?