I recently started working in three.js and i am trying to render a human model. i have two objects that are transparent in nature the hair and face and the transparency is taken from a .png image texture. I,m using three.js version r82 and it works perfectly in firefox. But I have an issue with the same code in Google Chrome as the transparent objects act in a bizzare manner.
im getting the files locally and using THREE.TextureLoader to load the png image files
Kindly help me resolve this issue. Thank you in advance
Related
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.)
While loading a SVG file on a FabricJs Canvas I found out that it was rendering it with different colours than what it was actually designed for.
This is how it looks if i open it on browser.
This is how it renders on the canvas.
Here is the gist of my code.
I found a similar post on SVG here where the problem was solved with removing the fill-rule="evenodd"; however that trick did not work for me.
I am struggling with this for past 2 days. Need a fresh angle on this.
I would really appreciate any inputs.
Turns out I was using the same id two different paths. Renamed them, works fine now.
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?
Please see my project:
http://webgl.unilimes.com/project/3dhouse/
On desktop, images are uploaded fine using the camera button:
However, unfortunately, on IOS this is not the case:
the image is cropped, there's lots of weird lines across it and it in no way represents the background image uploaded. Furthermore, the desktop app successfully reads the images EXIF data and moves the model accordingly, whilst IOS does not
here are two example images
Picture of the scene.
Picture for location
Any pointers as to what is going wrong would be greatly appreciated. I've seen background imagery uploaded with three.js on IOS before, so im hoping there is a solution, as for the exif reader I don't know. Thanks
I am playing around with webGL just for fun and have made a simple 3d graphic at
https://www.cs.mtsu.edu/~jrm6u/webGL/ex5.html
but it shows up with a while background when viewed on the iPhone. Any idea what is causing that? You can view the source from the webpage itself so I will not post it here.
Because there's a bug in iOS8 that when you ask for no-alpha you don't actually get no alpha.
It's failing this test
https://www.khronos.org/registry/webgl/sdk/tests/conformance/context/context-attributes-alpha-depth-stencil-antialias.html
:(
You should file a bug at http://bugs.webkit.org or see if one is already filed.
Basically Three.js is asking for an RGB canvas. An RGB canvas shows up as black. But iOS is wrongly giving it an RGBA canvas. Change your clear color to 0,0,0,1
renderer.setClearColor(0x000000, 1);
Hopefully that will fix it until Apple gets around to fixing the bug