I will assume content of desired html tags are third party data such as image or iframe, and cannot be used with webgl, so it must be html tag and cannot be sprite.
There is cookbook for GPU computation. Repeat each time scene changes. Sorry I can't do it for Three.js (don't know the engine).
Stage 1, Construct image with tags visibility
Create array (and index) buffer containing size of the html tags, tag IDs (int numbers from 0) and tag positions.
Create renderbuffer and new WebGL program, that will be used to render into it. Shaders of this program will render simplified scene including "shadows of tags". Now the simplified algoritm for fragment shader is following: for any object render white color. Except for tag, render color based on tag ID.
If your current program has fog, transparent objects, height maps or some procedural logic, it might be also contained in shaders (depends if it can cover tag or not).
Result could look like this (but it is not important):
If color is different then white, there is tag. (Assuming I have 3 tags only, then my colors are #000000, #010000, #020000, which all look like black, but is not. )
Stage 2, Collect transparency data about tags in image
We need another WebGL program and renderbuffer. We will render points into renderbuffer, each point is one pixel large and is next to each other. Points represent tags. So we will need array buffer with tag positions (and tag IDs, but this can be deduced in shader). We also bind texture from previous stage.
Now the code of vertex shader will do following, based on tag ID attribute, it will set position of the point. Then it calculate transparency with texture lookup, pseudocode:
attribute vec3 tagPosition;
attribute float tagId;
float calculateTransparency(vec2 tagSize, vec2 tagPosition) {
float transparency = 0;
for(0-tagSize.x+tagPosition.x) {
for(0-tagSize.y+tagPosition.y) {
if(textureLookup == tagId) transparency++; // notice that texture lookup is used only for area where tag could be
}
}
return transparency/totalSize;
}
vec2 tagSize2d = calculateSize(tagPosition);
float transparency = calculateTransparency(tagSize2d, tagPosition.xy);
Point position and transparency will enter as varying to FS. FS will render some color based on transparency (for example white for full visible, black for invisible and shades of grey for partialy visible).
Result of this stage is image, where each pixel present one tag and color of the pixel is tag transparency. Depending on how many tags you have, some pixels might mean nothing and has clearColor value. Pixel position coresponds to tag ID.
Stage 3, read values with javascript
To read data back use readPixels (or might use texImage2D?). Simple way to do it.
Then you use forloop based on tag IDs and write data from typed array to your javascript state machine for example. Now you have transparency values in javascript and you can change CSS values.
Ideas
In stage 1, reducing size of renderbuffer will cause significant performance boost (it lowers also texture lookups in stage 2) with almost zero cost.
If you use readPixels directly after stage 1 and try to read data from screen with javascript, even if you use renderbuffer only 320*200px large, js have to do as many iterations as the resolution is. So in case scene will change every moment, then just empty forloop:
var time = Date.now();
for(var i=0;i<320*200*60;i++) { // 64000*60 times per second
}
console.log(Date.now() - time);
tooks ~4100ms on my machine. But with stage 2, you must do only as many iterations as you have tags in visible area. (For 50 tags it might be 3000*60).
The biggest problem I see is complexity of the implementation.
The bottleneck of this technique is readpixels and texture lookups. You might consider to not call stage 3 at FPS speed, but at slower predefined speed instead.
