Develop Reference

Threejs - browser freezes when I load 80000 words what is the more efficient way of rendering plain 2d Text?

I tried to render 80,000 different words using WebGL specifically by three.js
however, once I try to render this amount of words,
my web browser was frozen.
Is there a better way to render a ton of words as 2D context?
I used an add-on of three.js called 'three-spritetext'
and how I added the words to be rendered is like below.
then((d) => {
for (let i = 0; i < characters.length; i++) {
const SimpleText = new SpriteText(`${characters[i]}`, 5);
SimpleText.color = 'orange';
SimpleText.position.x = -200 + Math.random() * 10;
SimpleText.position.y = 15 + Math.random() * 10
lotsofText.push(SimpleText)
}
})
To get the limit of the performance roughly,
I tried to scale down of the length of words to be rendered.
When I run this in my local host, it worked comparably okay when I went with length/3.
my sample code is here with the data.
https://codepen.io/jotnajoa/project/editor/AQOvpy
Thank you in advance.

Three.js: Takes too much time to render first frame

I use Three.js (with WegGL) to render alternating scenes of many image tiles (a few thousands) animating at space. Animations are handled by Tween.js. I use Chrome for testing.
To optimize the image loading, I preload all the texture images before the first scene is displayed. All textures are then saved in memory as THREE.Texture. Now when I prepare a scene for display, I do something like this:
let tile = null, tweens = [], cameraZ = 1000;
for (let y = 0; y < rows; y++){
for (let x = 0; x < columns; x++){
tile = await this.createTile(x, y, [textureSize]);
tile.position.x = x * this.tileWidth - this.picWidth / 2;
tile.position.y = -y * this.tileHeight + this.picHeight / 2;
tile.position.z = cameraZ * 1.1;
tweens.push(new TWEEN.Tween(tile.position)
.to({z: 0}, 4000)
.delay(200 + x * 120 + Math.random() * 1000)
.easing(TWEEN.Easing.Cubic.InOut));
this.scene.add(tile);
}
}
tweens.map(t => t.start());
The scene preparation also include camera and a point light, and takes about 400 ms to complete.
I then render the scene like this:
function render(){
requestAnimationFrame(render);
TWEEN.update();
renderer.render(this.scene, this.camera);
}
render();
Everything is displayed properly by when measuring some processing durations, I see that the first rendering call takes about 1400 ms! Other calls take between 70 to 100 ms.
My final goal is to have multiple scenes like this, play one after another without any freezes. Given that all the required assets are already loaded, what might be the problem and how can I optimize that?
Thanks

During the first frame of rendering, all of your assets and shaders are being compiled and uploaded to the GPU. If you want to avoid that, you'll have to do some tricks behind the scenes.. like forcibly rendering each object once after you load it, perhaps by adding it to a single scene, and calling renderer.render on it. Depending on what the bottleneck is (shader compilation vs asset uploading) this may or may not help.. but the workaround is doing some kind of pre-rendering to force the uploads to the card one at a time, rather than all at once.
Also, as a previous commenter noted, your render loop above has a typo in it.
it should be requestAnimationFrame(render);

CreateJS caching object - object now does not animate on stage

I am using CreateJS to add graphics (shapes) and bitmaps to my stage, and add that to my HTML5 canvas.
After moving the circle graphic around the screen (20px in size), there was severe lag after a little while.
I followed this article to figure out performance issues: http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/
So I tried caching... now when I press the keys, the circle does not move. Am I caching incorrectly?
world = new createjs.Container();
segment = new createjs.Shape();
segment.graphics.beginFill("red").drawCircle(0, 0, 20);
segment.x = 100;
segment.y = 100;
segment2 = new createjs.Shape();
segment2.graphics.beginFill("black").drawCircle(0, 0, 20);
segment2.x = 150;
segment2.y = 150;
ContainerOfPeople = new createjs.Container();
ContainerOfPeople.addChild(segment, segment2);
world.addChild(ContainerOfPeople); //add container of people to world container (which will contain all objects in a container)
world.cache(0, 0, 1000, 1000); //cache all objects within world container
stage.addChild(world);
Edit:
If I don't cache the tiles after creating the map, I can see them rendered to the canvas:
function createWorld() {
background = new createjs.Container();
for (var y = 0; y < mapWidth; y++) {
for (var x = 0; x < mapHeight; x++) {
var tile = new createjs.Bitmap('images/tile.png');
tile.x = x * 28;
tile.y = y * 30;
background.addChild(tile);
}
}
//background.cache(0, 0, mapWidth, mapHeight);
stage.addChild(background);
}
If I do cache the background container of tile children, it won't render
function createWorld() {
background = new createjs.Container();
for (var y = 0; y < mapWidth; y++) {
for (var x = 0; x < mapHeight; x++) {
var tile = new createjs.Bitmap('images/tile.png');
tile.x = x * 28;
tile.y = y * 30;
background.addChild(tile);
}
}
background.cache(0, 0, mapWidth, mapHeight);
stage.addChild(background);
}
Why?

You wouldn't want to cache the whole world if you are animating/moving its child objects. Think of caching as taking a snapshot of the DisplayObject and all of its children. While an item is cached, you won't see any changes you make to the children until you update the cache again as explained in the EaselJS docs:
http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#method_cache
cache ( x y width height [scale=1] )
Defined in cache:735
Draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.
To expand on the explanation, let's say you have a game character that is a Container made up of 6 child shapes, 2 arms, 2 legs, a body and a head. During gameplay, the character's arms and legs flail around. In this scenario, you DON'T want to cache the character as you would be forced to update the cache each time the arms and legs moved, removing any performance gain from caching.
However, let's say once the character dies, he freezes in a dead position, and alpha fades off the screen. In this case you WOULD cache the character. This is because alpha animations become increasingly CPU intensive with the greater number of shapes it has to consider. By caching the character, you are effectively telling the CPU to tween just one shape instead of 6. You can then uncache once your alpha tween is complete and you want to return the player for round 2.
Update
easeljs loads images asynchronously when they are first referenced. Because you aren't preloading your image, the image data isn't yet loaded into memory when you are caching your background.
http://jsfiddle.net/8EvUX/
Here's a fiddle where the image is embedded as a base64 encoded string and is therefore available to cache immediately to prove the caching works as expected. My suggestion would be to use the preloadjs library to load your image first before adding it to the stage.

Is there any way to get these 'canvas' lines drawn in one loop?

I am simulating a page turn effect in html5 canvas.
On each page I am drawing lines to simulate lined paper.
These lines are drawn as the page is turned and in order to give natural perspective I am drawing them using quadratic curves based of several factors (page turn progress, closeness to the center of the page etc.. etc...)
The effect is very natural and looks great but I am looking for ways to optimize this.
Currently I am drawing every line twice, once for the actual line and once for a tiny highlight 1px below this line. I am doing this like so:
// render lines (shadows)
self.context.lineWidth = 0.35;
var midpage = (self.PAGE_HEIGHT)/2;
self.context.strokeStyle = 'rgba(0,0,0,1)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX), foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX));
}
self.context.stroke();
// render lines (highlights)
self.context.strokeStyle = 'rgba(255,255,255,0.5)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX+2);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX) + 1, foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX) + 1);
}
self.context.stroke();
As you can see I am opening a path, looping through each line, then drawing the path. Then I repeat the whole process for the 'highlight' lines.
Is there any way to combine both of these operations into a single loop without drawing each line individually within the loop which would actually be far more expensive?
This is a micro-optimization, I am well aware of this. However this project is a personal exercise for me in order to learn html5 canvas performance best practices/optimizations.
Thanks in advance for any suggestions/comments

Paths can be stroked as many times as you like, they're not cleared when you call .stroke(), so:
create your path (as above)
.stroke() it
translate the context
change the colours
.stroke() it again
EDIT tried this myself - it didn't work - the second copy of the path didn't notice the translation of the coordinate space :(
It apparently would work if the path was created using new Path() as documented in the (draft) specification instead of the "current default path" but that doesn't appear to be supported in Chrome yet.

JS Canvas- Put Image Data With Alpha?

I've got an ipad webapp I'm working on where you can draw on a canvas and save it. Like a more basic paint program. I need to be able to upload and image to the background and draw on it. Right now that wouldn't be too difficult since I got the drawing functionality and it wouldn't be hard to just print the image to the background and draw on it. The problem I'm having is that it also needs to have manageable layers. This means it needs to support alpha pixels.
So what I've done is written a panel class that when paint is called it moves down through it's child panels and paints their buffered images to the temp image. Then I take that and paint it over the parent- continueing until the image is flattened to a temporary image.
This works fine- especially on a desktop. But to accomplish this I had to write the putImageData code from scratch which loops through the array of pixels and paints them taking the alpha in account. Like so-
var offset = (canvasW*4*y)+x*4;
for(var r = 0; r < newHeight; r++)
{
var lineOffset = (size.width*4 - columns)*r + offset;
for(var c = 0; c < columns; c+=4)
{
var start = (r*columns)+c;
var destStart = start+lineOffset;
var red = imageData[start];
var green = imageData[start+1];
var blue = imageData[start+2];
var alpha = imageData[start+3];
var destRed = canvasData[destStart];
var destGreen = canvasData[destStart+1];
var destBlue = canvasData[destStart+2];
var destAlpha = canvasData[destStart+3];
var opacity = alpha/255;
var destOpacity = destAlpha/255;
var invOpacity = 1-opacity;
var newRed = Math.abs(red - ((red-destRed)*invOpacity));
var newGreen = Math.abs(green - ((green-destGreen)*invOpacity));
var newBlue = Math.abs(blue - ((blue-destBlue)*invOpacity));
canvasData[start+lineOffset] = newRed;
canvasData[start+lineOffset+1] = newGreen;
canvasData[start+lineOffset+2] = newBlue;
canvasData[start+lineOffset+3] = 255;
}
}
This takes about 50 miliseconds per layer. Not very good for a desktop. Takes a whopping 1200 miliseconds for the ipad! So I tested it with the original putImageData (which doesn't support alpha) and it was still not very impressive but it's the best I got I'm thinking.
So here is my problem. I know there is an overal opacity for drawing with canvases but it needs to be able to draw some pixels completely opaque and some completely transparent. Is there an putImageData that includes opacity?
If not any recommendations on how I can accomplish this?

As #Jeffrey Sweeney mentioned, try stacking canvases on top of each other. For one of my Javascript library, CInk (search there for z-index), I did the same thing.
I had one container div, which I stuffed with many canvas DOMs to mimic the layers. All canvas DOMs are absolutely positioned and their z-index define the order of the layers. In your case you will have to apply style at specific layers to set its opacity.