Anchors Explained: How to Set Up Annotations


When you are working with 3D graphics, whether you like it or not, you begin to think in its terms. Any idea can be embodied in a 3D object, supplied with colorful material and provided with animation… here, an artist’s spirit can finally break free.

However, some simple things suddenly become just too complex when you are trying to implement them in 3D space. Take text, for example. You are probably aware of the fact that you can easily create text captions in Blender. It even features a kind of 3D text editor where you can set up font, its style, various spacings and everything else you might need. What’s more, Blend4Web is perfectly capable of understanding Blender text objects and rendering them in a web browser. But what you have to keep in mind is the fact that these objects are nothing more than simple 3D meshes that are not really fit for this particular task. Let’s go over their weak points:

1. They require too much memory. Every letter is a separate 3D object that consists of multiple vertices. Imagine what will happen if you have several hundreds of them.

2. Low quality. You can cheat and create a texture with the text you need beforehand, and then apply it to a simple plane. However, a text like this will not look very good, especially from a distance.

3. Configurability… don’t even think about it.

It would have been so much easier if we were able to use the text itself for text rendering, just like, you know, in a text editor.

What… did you just mention Canvas? Oh yes, you can use it. It is entirely possible to write a text on the canvas using standard HTML5 features. It is easy, but also slow, as WebGL has to literally draw each letter on the canvas, slower than it takes to render text with generic web browser methods.

Blend4Web offers you its own method of rendering text, which combines the speed of browser rendering with the ease of navigating in 3D space.

Fast And Simple

Among Blend4Web demos, there is one outstanding application called Planetarium. It shows our Solar System with masterfully done planet models orbiting the sun.

The most interesting part for us, however, is interactive captions. Each one of them is attached to a specific planet. If you click it, additional text information will be shown. And, they look stylish too.

All this starts with an anchor. This is what will keep your caption in the deep sea of the scene.

As you have probably guessed, an anchor is a special Blender scene object. Its purpose is to set a point that will be used to show text. In the Planetarium app, for example, anchors are attached to the planets and move with them.

An Empty object is used as an anchor. At the picture above, it is located near Saturn’s pole. It can be added to the scene with the Add | Empty | Plain Axes menu (the menu can be opened with the Shift+A hot keys).

If you want your anchor to be attached to a specific object, you should make a “parent-child” link. To do this, select your Empty, then add the root object to the selection (hold the Shift key while selecting it) and press Ctrl+P.

But an Empty by itself does nothing. To make captions visible in the browser window, you have to turn on the Enable Anchor option on the Object panel of this Empty object. Make sure that the Type field is set to the Annotation mode. The text itself is stored in the Meta Tags group.

Keep these simple rules of working with anchors in mind:

1. If the Meta Tags option is disabled, the name of the Empty object is used as the name of the anchor.

2. The Annotation mode uses built-in anchor design.

3. If you enter some text in the Description field, user will be able to see this text in an additional panel that will open by clicking on the name of the anchor.

4. The Description field can only contain text data. Don’t try to add images, links or iframe elements in it.

There is one more interesting option: Detect Visibility, found on the Anchors panel. Take a look at the picture below to find out what it does.

Here, the Mars object is covered by the sun, and isn’t visible, but the anchor with its name still is. Sometimes you might need this exact behavior, but other times you need to hide an anchor when an object is not visible. And this is exactly what Detect Visibility option does.

Expert Mode

The method that the developers offer you is convenient and easy to use, it is functional and looks pretty. However, it is rather limited as well. So let’s learn how to create your own design.

Here, everything is rather easy as well. You just need a regular anchor with the Custom Element option enabled in the Anchors field. From here on, you are in complete control of the design of your anchor. Just don’t forget to specify the ID of the element you need in the HTML Element ID field.

Everything else is done with HTML, CSS and JavaScript, and there are no limitations.

Let’s try to make a simple text output for our anchor. For example, one that simply prints some text in the background.

First, let’s define a place for the new element in the HTML file. Don’t forget that it should be located below the Canvas container:

  <div id="main_canvas_container"></div>
  <div id="my_design">This is my Anchor!</div>

The my_design title is used as an ID. This title should be specified in the HTML Element ID (see the figure above).

Then, let’s add a description of the element to CSS. I’ve altered the colors of the font and the background:

#my_design {
  position: absolute;
  background-color: #ffa201;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;

Now my anchor looks like this:

Now, let’s raise the bar by adding an option to open description window by clicking the name of the anchor.

Let’s alter the HTML file a bit by adding a new element for an additional window:

  <div id="main_canvas_container"></div>
  <div id="my_design">This is my Anchor!
	<div id="my_design_child"> Oh, yes! I see it...</div>

And let’s expand CSS:

#my_design {
  cursor: pointer;
  position: absolute;
  background-color: #ffa201;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;
  display: none;
#my_design_child {
  position: absolute;
  top: 30px;
  background-color: #000;
  background-size: cover;
  height: 100px;
  border-radius: 5px;
  color: #ffa201;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;
  display: none;

Take a close look at the CSS blocks. Aside various bells and whistles, there are new display fields. These fields can be used to show and hide blocks. The blocks are turned off at startup. By the way, don’t try to use the visibility CSS property for this. This property is under complete control of the Blend4Web engine.

And now, it is time for some JavaScript code.

I’ve placed an entire code in the load_cb function that is called after the scene is loaded (it is a standard JavaScript template generated while creating a new project).

Find HTML elements we need:

var my_design = document.getElementById("my_design");
var my_design_child = document.getElementById("my_design_child");

Enable showing the name of the anchor: = "block";

Adding the “click” event to the first block. Now, if the title is clicked, the program will call the specified function to switch the visibility of the second block:

    my_design.addEventListener("click", function() {
		if ( == "block") { = "none";	
		} else { = "block";
    }, false);

In the end, here’s what I’ve got:

As you can see, the Custom Element mode gives you free reign to create a GUI with any level of complexity, limited only by your imagination.

Link to the project.

08 apr. 2017 22:37
I also discovered you can use Emojis in the Annotations they work across all browsers!
30 apr. 2017 11:55
I just read the whole tutorial. That was very well written. I use those quite often but now I understand them better. The click-to-reveal-more function will come in handy.
24 jan. 2018 15:32
why it wont work for me
25 jan. 2018 11:21
why it wont work for me

What are you trying to do? What is not clear?
01 feb. 2018 10:51
This is excellent!! Thanks!
03 mar. 2018 21:07
Reply to post of user Alexander Romanov
What are you trying to do? What is not clear?

Since …Capili011… didn't get back to you, I would like to pick up a similar problem.
The "annotation" anchors works great. However the "custom element" is baffling.

I have intermediate HTML and JavaScript coding skills, and working on a MacOS 10.13.2 with blender 2.79 and blend4web 17.12.0.
Problem: getting "custom element" to engage.

I tried running a script through the Blender text editor to no avail. Where or how do I get "custom element" to run the script?
04 mar. 2018 00:26
Reply to post of user Joshea
Since …Capili011… didn't get back to you, I would like to pick up a similar problem.
The "annotation" anchors works great. However the "custom element" is baffling.

I have intermediate HTML and JavaScript coding skills, and working on a MacOS 10.13.2 with blender 2.79 and blend4web 17.12.0.
Problem: getting "custom element" to engage.

I tried running a script through the Blender text editor to no avail. Where or how do I get "custom element" to run the script?

I may have solved my own problem. I went back to "Annotation" and used the following HTML code (first attachment) in both the Title and Description lines of Meta Tags. It gives the freedom of choice for color and size.

If there's a disappointment, I can't change the background color of the text…yet. If someone figures it out, please post.
Second and third attachments are the results.
13 feb. 2020 15:56

I seem to be missing something when trying the expert mode.

I downloaded your sample project files and tried running the custom_anchor.html expecting to see your box with the anchor text links. This did not happen and I just got a black screen in my browser.

In the tutorial you say to enter the body text under the canvas div. Do you mean I should export the blender project as the complete blend4web html file and add your html code suggestions to this main file? Or is this to be a separate html file specifically for the annotations?

I seem to be missing how this all links with the CSS and java files too.

I'm running Blender 2.79

Thanks for your help.



I figured it out. I was trying to set this all up manually, but figured it out using the project manager within Blender. I created the project name with the default settings and could edit the html, css and java from the project manager panel (project manager editor in the browser window not within Blender)

The main tip I worked out the hard way, was making sure your save the blender project file and json file with the same name as the project name and in the right directory within the blender project folders.

All running fine now, looks great.
12 apr. 2020 23:44
low prices for generic Abilify in Australia NO PRESCRIPTIONs needed

<b> QUALITY PILLS HERE! >>> </b>

<a href=> <u><b>>>> Want to buy with Discount? CLICK HERE! <<<</b></u> </a>


order cheap generic Abilify in UK
order now low price Abilify express delivery
lowest prices for Abilify USA no prescription
buy legitimate Abilify airmail USA,,eu
Abilify prescriptions online
purchase cheapest Abilify no prescription overnight shipping USA
Abilify online saturday delivery
safe order for generic Abilify in australia without prescription
Abilify without perscription or membership USA
safe order Abilify united states
Abilify from pharmacy no prescription
<a href=>low cost Alfuzosin without script | Purchase Alfuzosin in AUSTRALIA</a> <a href=>wholesale cheapest Topamax cash on delivery | Order Topamax in USA</a> <a href=>discount price Precose with no prescription | Order Precose in USA</a> <a href=>price of Prograf c.o.d. no script | Buy Prograf in UK</a> <a href=>cheapest price to order Acticin without script | Order Acticin in CANADA</a> <a href=>cheap prices Skelaxin c.o.d. no rx | Buy Skelaxin in ENGLAND</a> <a href=>low cost Desmopressin for sale online | Order Desmopressin in USA</a> <a href=>cheap prices Compazine no prescription needed | Order Compazine in UK</a> <a href=>buy Tenormin next day no prescription needed | Buy Tenormin in ENGLAND</a> <a href=>fast delivery Permethrin shipped with no prescription | Order Permethrin in CANADA</a> <a href=>purchase cheapest Viagra Strips overnight delivery no r x | Buy Viagra Strips in UK</a>
13 apr. 2020 01:14
lowest price of generic Furazolidone in UK/GB saturday delivery


<a href=> <u><b>>>> QUALITY PILLS HERE! <<<</b></u> </a>


drugs Furazolidone in UK
cheap price Furazolidone from pharmacy no prescription
buy Furazolidone no prior prescription USA
cost Furazolidone online no prescription overnight
Furazolidone quick delivery no prescription
buy safety Furazolidone no prescriptions needed
Furazolidone no script required express delivery
low price online Furazolidone no rx
Furazolidone no prescription quick delivery
where can i buy generic Furazolidone no prescription fast delivery
Furazolidone online no prescription fedex
<a href=>cheap prices Fenofibrate pharmacy without a prescription | Order Fenofibrate in ENGLAND</a> <a href=>cheap Avanafil no prescription quick delivery | Buy Avanafil in ENGLAND</a> <a href=>where can i buy Labetalol with credit card no prescription | Purchase Labetalol in AUSTRALIA</a> <a href=>purchase Bupropion fast shipping no prescription | Buy Bupropion in UK</a> <a href=>cheapest prices Cymbalta pharmacy without prescription | Purchase Cymbalta in ENGLAND</a> <a href=>cheap generic Eriacta no script next day delivery | Order Eriacta in UK</a> <a href=>i want to order Testosterone Booster without script pharmacy | Order Testosterone Booster in USA</a> <a href=>purchase online Rhinocort overnight delivery without a rx | Purchase Rhinocort in AUSTRALIA</a> <a href=>ordering at lowest price Garcinia Cambogia no prior prescription | Buy Garcinia Cambogia in ENGLAND</a> <a href=>low prices Sumatriptan in no prescription | Order Sumatriptan in AUSTRALIA</a> <a href=>buying Minocin no prescription | Order Minocin in ENGLAND</a>
Please register or log in to leave a reply.