Webgl chrome blank canvas - javascript

I am trying to render as much triangles as possible in webgl. Everything works pretty well with all webbrowser except with chrome. After 57000 triangles I get a blank canevas. So I check the chrome task manager and I saw that the GPU takes 2 700 000ko before this blank screen. Is it possible that the problem come from this ? Here the code : http://gogotriangl.orionhub.org:8000/triangles/ch04-05_BlueTriangles.html

You are creating too many buffers. Get the webGL inspector, and running your app for a few seconds and I see you already created over 1.6k glBuffers:
But when you are drawing, you are only using the most recent:
Either re-use the glBuffers with gl.BufferSubData or delete the previous glBuffers via gl.deleteBuffer.

Related

three.js leaks pixels from the videocard when rendering a png with alpha channel

I had a hard time figuring a proper title for this question..
I am loading PNG files from external URL, but with one particular PNG, no-power-of-two, alpha-chanel, created with gimp, when I loaded and use as texture in a plane, It renders mixed with what it looks like screenshots portions of the current screen. in the attached screenshot you will see that it looks like if the cat had a layer on top with inverted parts of the chromium developer inspector window, that is opened at the right.
I notice that it says that as the image is not power of two, has to be resized, but I had not noticed that behavior with other textures.
using three.js R77, Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
Yikes, that's a bug in the browser. Could you please post a self-contained sample showing the problem? If it's not too much trouble please create a bug on crbug.com/ and attach it, but otherwise please just put the test case somewhere and send me a link. Thanks. (I work on Chrome's WebGL implementation.)

Chrome image rendering issue

We are developing an image viewer with zoom and cet...We are developing with angular js and using matrix3d transformations on the images so we can manipulate them.
When opening our project with Firefox with 30 1MB pics it renders them quite easily, while in google chrome it makes problems with even 4 1MB images. I feel Like we are missing a few css lines which will solve it all.
What might be the causes for this kind of thing?

three.js memory leak / browser crash

I am building an app with a spherical panorama photo with a jpg size about 4Mb. During development I am constantly refreshing the page I am working on to see changes, as well as opening multiple other three.js example pages to get tips. When Firefox first starts up, it uses around 250MB (I have a few tabs that open by default since it keeps crashing). When I refresh the page it jumps to around 420MB, then tapers slowly back down, but usually not to where it started from. If I refresh 2 times in 15 seconds or so, it will climb to nearly 500MB.
Usually I am not paying attention to my memory usage singe I have 32GB, but when firefox gets up around 2.5GB of memory used, along with around 15% processor usage, it starts bogging down and will crash. I would understand if my scene were particularly complicated, but it isn't, for the most part it is a single spherical pano, and one additional element I am working on at the time.
Is there something I should be adding to my code to clear out buffers between refreshes?
Seems this is a problem with TextGeometry without a solution.
https://github.com/mrdoob/three.js/issues/8478

Does GPGPU with WebGL work on any current mobile GPUs?

I've put together a fairly barebones example with Three.js - http://jsfiddle.net/4kehk2xv/7/ not very exciting but simple. If GPGPU works a square of randomly placed red coloured points should show, otherwise they'll all be positioned at the origin. The devices I'm testing on (Nexus 5 and iPad3) support the OES_texture_float extension and have MAX_VERTEX_TEXTURE_IMAGE_UNITS greater than 0. They don't support (as most mobile GPUs appear not to) the OES_texture_float_linear extension, but we should be able to get around that by using NEAREST filtering.
The error I'm coming across is below, Three.js also reports that OES_texture_float_linear isn't supported but this appears to be a check in the WebGLRenderer and not to do with the code I'm running.
[.WebGLRenderingContext]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete (check)

Kineticjs stops rendering

Using kinetic js for a searchable directory listing on a kiosk. It works great!! except for one issue. I am in chrome and have an a,b,c,d etc list on the side a user can click for names starting with that letter. When a letter is clicked, it re-renders the whole stage. After 10-15 times of doing that, the stage comes up blank, but I can still click where a name would be and get its detail "lightbox" or click where a letter would be and get a new listing, but still a blank stage, ie no fill or color on any rects or text. Whats worse is that if I go to an entirely different kiosk page that uses KineticJS for something else, it does not render either and never will again unless I leave the domain (localhost) and go to google or something and come back, or open a new tab or restart Chrome. I am totally lost now and redoing it without Kinetic is going to be a huge loss if I can't figure this out.
I have gone through and tried to be sure my memory management was ok and pretty sure it is. My system memory does grow, but Chrome seems to gargbage collect it fairly quickly. I have even tried calling destroy() on every kineticjs object I create when re-rendering with no luck.
There is a known issue in Chrome 29 in regards to canvas rendering. The issue is not present in version 28 or 30. Join the party and help draw eyes to the issue. :) https://code.google.com/p/chromium/issues/detail?id=280153&thanks=280153&ts=1377616231#makechanges
As a temp workaround you can turn off the 2d canvas acceleration by setting 'Disable accelerated 2D canvas' flag to enable.

Categories