I have a cool project with three.js, and everything work as intended. It displays some mesh in different canvas, and there is my issue.
The project aimed to display many, many canvas, and each one have his own context, and it reach the deadly limit of 16 live webGL contexts. Since it's wanted to display more than that in a page, I'm searching to turn around this restriction, by disabling a context when it's not actually displayed on seen page. When the user will scroll, context will be disabled/enabled so I can put as many context as I want.
I've found this function : renderer.forceContextLoss() and with this one I can force the context disabling. But I didn't found anything to relaunch it. I manage to detect a loss of context, but not its restauration
If you got any idea of how I can achieve that, feel free to give me some tips.
Thanks in advance !
This has been covered elsewhere but the easiest way to make it appear like there are multiple canvases is to just use one instance of three.js, make it cover the entire window, put place holder divs where you want to draw things, and then use element.getClientBoundingRect to set the scissor and viewport for each scene you want to draw in each element
There's an example here.
Here's the answer in StackOverflow from which that sample originates
https://stackoverflow.com/a/30633132/128511
This will use far less memory than using multiple canvases, each of which would need it's own data, it's own shaders, etc...
Related
I am developing a website with React which has what we called "snippets", basically a modal window displaying some kind of media (audios, videos, slides, text quotations, pdfs). These media have "positions", as a page number, an image number, a playback position, or a scroll position. If she likes the user may store these snippets together with their positions in a "locker" and come back later to whatever is in there. Visually the locker will hold a "thumbnail" of the snippet representing the appearance of the snippet at the time of storing it. My question is how to go about making such a on-the-fly thumbnail. Two approaches come to my mind, however, if you have other ideas I am eager to hear them.
Component approach: Since I already have the component, I could reuse or rather clone it, scale it down, disable it for mouse interaction. Would React.cloneElement() be the way to go?
Advantage: Easy to do.
Disadvantage: Too many duplicates of potentially resource-heavy components may slow down website. Styling may become non-trivial as some embedded media (audio, video) bring their own potentially inaccessible styling with them.
Image generation approach: Since I only need an image, I could take a screenshot of the snippet area, scale it down and use it. Can this be done fully (from generation to usage) on the client side? Is there a good library which does the heavy-work for me?
Advantage: Resource-heavy only during the making of the thumbnail, resource-light in the locker. Accessible for any styling.
Disadvantage: Potentially difficult to do?
After some research I found a solution. Interestingly, it is a mixture of the two approaches I was able to think of. It is possible to access and rasterize the DOM elements which make up the snippets, draw them on a canvas and turn it into an image. The most popular library for this seems to be html2canvas, however, there are a number of others among which rasterizeHTML and html-to-image seem to stand out. Often wrappers for React exist, in the case of html2canvas, for example, use-react-screenshot.
I am trying to do a paint app. But that's not all. I want to extend it with possibility of layers like in gimp or photoshop. Some of layers can be visible and others not. It all depends of user needs.
I tried a lot. There are some of my ideas how to do it:
First i tried to add new canvases to html document and changing z-index of elements. The problem of this was that addEventListener didn't know what i did. I mean that it didn't know on which layer i am actually pressing.
Second idea was to take of all points (vertices) of line, put it in array and then redraw it. It all will happen in area of one canvas element.
The last one and i think the best idea was to have multiple 2d contexts. But i don't know how to make it invisible. I saw only ctx.globalAlpha property but it needs to be configured before drawing.
Maybe someone knows what is actually the best method to achieve it. I will be very thankful for every response.
Before posting this question I did many tries and searched everywhere for alternatives, but I gave up and I'm asking here..
What is the easiest way to create an interactive map controlled by functions?
Here are details:
I have a div with fixed width/height, without a background, and I need to dynamically add things (images/text) inside of it, at any position, and they can also overlap each other if needed.
An example is better than thousand words:
- assuming the div is 500w 500h, I need to create an image at (200,200) with a size of 50x50
Here are the thousand words:
I tried with canvas, but it's too hard to remove something without touching the other things (for example if images #1 and #2 are overlapped and I want to delete the #1, I'll delete part of img #2 in the process. Of course the best thing would be to save things stored to when I need to delete something I can redraw all the rest, but it's a huge pain, if something easier exist would be better)
Tried also with http://leafletjs.com/index.html, but it seems too powerful to solve my problem, and I don't even know if it works without a background.
Maybe the best solution would be to use simple divs with good positioning, so I can change through functions their content easily, but I suck at div positioning.
Thank you to everyone that can help me :)
I really recommend the MapBox JavaScript API. It's a nifty utility that I have used in various instances. https://www.mapbox.com/blog/mapbox-javascript-api/ Extremely extendable API.
A line graph is necessary for the purpose of my extension in an web game online.
I want to do something like this:
The intention is that this graph should be OUTSIDE of the DOM/browser, because if I put this inside the game document, they will know that this line has been put into the DOM with a simple call $("#rareLineGraph").length > 0 and they will detect it, and they should not know.
I tried it with frames, but are very uncomfortable (windows)
Some suggestions please ?. Thank you very much
You can in principle draw outside the browser with a separate program operated via Native Messaging, but that would be quite difficult and over-complicated. That is, however, the only approach that fully corresponds to your requirements.
As a suggestion, you can hide your graph from such a simple inspection by using a random ID, or even skipping using an ID and just keeping a reference to the created element in a variable. Also, inserting your node into random places in the document structure and using absolute positioning will obfuscate it further. It will be harder (but not impossible) to detect.
Other than that, I don't think there are many ideas that can help. Chrome renderer looks only at the DOM, and there's no API to create any kind of overlay. DOM can be hidden from the outer document with Shadow DOM techniques, but as far as I know the shadow root element will still be visible to the page.
I'm trying to build something in HTML5/Canvas to allow tracing over an image and alert if deviating from a predefined path.
I've figured out how to load an external image into the canvas, and allow mousedown/mousemovement events over it to draw over the image, but what I'm having trouble getting my head around is comparing the two.
Images are all simple black on white outlines, so from what I can tell a getPixel style event can tell if there is black underneath where has been drawn upon or underneath where the mouse is on.
I could do it with just the mouse position, but that would require defining the paths of every image outline (and there are a fair number, hence ideally wanting to do it by analyzing the underlying image)..
I've been told that its possible with Flash, but would like to avoid that if possible so that compatability with non-flash platforms (namely the ipad) can be maintained as they are the primary target for the page to run.
Any insight or assistance would be appreciated!
I think you already touched upon the most straight-forward approach to solving this.
Given a black and white image on a canvas, you can attach a mousemove event handler to the element to track where the cursor is. If the user is holding left-mouse down, you want to determine whether or not they are currently tracing the pre-defined path. To make things less annoying for the user, I would approach this part of the problem by sampling a small window of pixels. Something around 9x9 pixels would probably be a good size. Note that you want your window size to be odd in both dimensions so that you have a symmetric sampling in both directions.
Using the location of the cursor, call getImageData() on the canvas. Your function call would look something like this: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size) so that you get a sample window of pixels with the center right over the cursor. From there, you could do a simple check to see if any non-white pixels are within the window, or you could be more strict and require a certain number of non-white pixels to declare the user on the path.
The key to making this work well, I think, is making sure the user doesn't receive negative feedback when they deviate the tiniest bit from the path (unless that's what you want). At that point you run the risk of making the user annoyed and frustrated.
Ultimately it comes down to one of two approaches. Either you load the actual vector path for the application to compare the user's cursor to (ie. do point-in-path checks), or you sample pixel data from the image. If you don't require the perfect accuracy of point-in-path checking, I think pixel sampling should work fine.
Edit: I just re-read your question and realized that, based on your reference to getPixel(), you might be using WebGL for this. The approach for WebGL would be the same, except you would of course be using different functions. I don't think you need to require WebGL, however, as a 2D context should give you enough flexibility (unless the app is more involved than it seems).