I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).
The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.
The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.
http://visiblegeology.com/renderingProblem/
This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.
I was wondering if anyone had any advice, work-arounds, or thoughts.
Thanks for any help,
Rowan
I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.
This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html
A few suggestions:
check if you are using the latest three code.
try removing the final equals sign of the data uri. It is used for padding and may not be necessary.
try disabling your add ons one by one, as they may interfere as well
Related
I have been able to get almost everything I need into the editor, But cannot figure out how to get a collada model that was imported to play it's keyframes.
Since I am not doing loader.load (collada) blah blah like in the examples. I cannot figure out how to get the animations. Animations is always undefined, but I know keyframes exist. Any ideas?
as far as i know, animations in the editor are not fully implemented yet.
the corresponding code in the viewport is commented out (line564+)
i think your best shot is to modify the editor (and eventually create a PR) or go back to coding everything.
the editor in its current form only shows the basic functions but the code is quite well structured to allow implementing custom features.
A quick update that animations in the Three.js Editor are now supported. Below is a gif from the linked PR demonstrating usage.
We are using a png/8 sprite on a client's website. He is reporting the image is appearing distorted for him and on other computers on the company.
Here's how it should look:
http://i.imgur.com/wfV7ReR.jpg
And here is the print screen the client sent us:
http://i.imgur.com/sWKDYKU.jpg
I have tried donloading and exporting it again, uploading again. The problem is: On our computers it looks fine, so it's hard to test it. Our client is viewing it in IE: 11 and Google chrome: 41.0.272.118.
Has anyone seen this type of error before?
It may be the device-pixel-ratio is better than 160dpi; that'd throw off some CSS used for spriting.
If this shows "1" for you and a different value for them, I'd dig farther on that one. You could probably test this by hitting the site with an iPhone or newer Android device; they have >1.0 pixel ratios.
http://www.devicepixelratio.com/
Edit: this would also show up across-browsers on their end, as it's tied to the hardware, and not IE11.
My bet in that case is the PNG is somehow broken.
graphicdesign.stackexchange.com might be more useful; I don't know if this is fixable in CSS. (Might be; look for hacks around image backgrounds as well.)
Looking around, if you have Photoshop, you might try saving the original image, then creating a copy and changing this setting:
Image -> Mode -> Check "RGB Color"
Alternatively, try opening the image in pixlr.com, change anything however slightly, then save and use that one.
My strong suspicion is something in the way the PNG/8 is saved (maybe the alpha channel) is the issue, not any CSS you've written. Good luck!
I have a website that incorporates a logo in to the header. This logo has a background that is the same colour as the background of the header, yet in Firefox the colour is different.
I can find various articles alluding that the 'colour profile' being the culprit, but I cannot find out how to fix this issue.
Quite why anyone would think that changing the colour of an image is the way forward I don't know, but it looks very poor, so I'd be grateful for some suggestions on how to fix this.
To create the original image I used GIMP, and it has been exported as a PNG.
Here is a section of the header so that you can visually see what I mean -
Since you do not provide the original image, I have to make an educated guess:
Your image most likely has a (broken, incorrect) color profile embedded. Fix or remove the color profile and you should be good. See the documentation of your favorite tool on how to do that.
You should use some tool like tweakpng to check if the PNG has a color profile, and remove it.
I'm trying to animate text with RaphaelJS, but I'm encountering a choppy animation ("judder"?). I've looked around for other issues regarding this, but I've only been able to find jQuery-specific or non-SVG topics so far. Please let me know if I overlooked a similar question!
Essentially, I'm attempting to visually wrap a text element in a rect element and translate them simultaneously through an animation. I know about the 'g' element, but I don't want to use it since older versions of Internet Explorer don't support it. Instead, I'm using separate Raphael animations for the text and the rectangle:
var raphRect = paper.rect(
(paperWidth/2)-rectWidth/2
,paperHeight-rectHeight
,rectWidth
,rectHeight
,rectHeight/2
)
...
,raphText1 = paper.text(
paperWidth/2
,paperHeight-(2*fontSize)
,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');
I'm assuming that the judder is caused by rounding pixels in each animation frame for the text element. Is there any way to mitigate or prevent this judder? (Reducing the animation time is not an option...and it doesn't even look like it helps.)
(I have an example of what I'm trying to do here. I've included two lines of text and a bold stroke for the rect to emphasize the judder.)
I had the same problem and have tried to differentways to solve it. I have found few hacks that works for me. But they all have the same idea: you should make text not so straight.
"transform" : "R 0.01"
For example, it rotates your text on small angle. Here is the result:
jsfiddle.
I can't garantue that it will work in your browser. In stable Chrome 36 it works good, in beta or canary worse.
You could also try no so straigth font jsfiddle. It works good for FF.
"font-family" : "Comic Sans MS"
Other things worse to be tried:
inreasing font size
using bold font
using a text path
This idea is actually borrowed from Robert Longson's information about the text-rendering property. It's true that Raphael doesn't provide direct access to this functionality, but it does provide you with a link to the dom node -- so it is but a second step to apply this style yourself, and it does indeed produce better results in Firefox at least.
Using jquery:
$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );
Staged here.
Basically, I want to save a certain DOM element of my page as an image, and store this on a server (and also allow the user to save the image to a local disk). I reckon the only way of doing this currently is to render a canvas, which allows me to send the image data via AJAX and also make image elements in the DOM. I found a promising library for this, however my DOM element has
multiple transparent backgrounds
css 3d tranforms
And html2canvas simply fails there. Is there currently any way to neatly save an image representation of the current state of a DOM element, with all its CSS3 glory?
Browsers may never allow a DOM element to be truly rendered as it is to a canvas, because there are very serious security concerns around being able to do that.
Your best bet is html2canvas plus your own hacks. You may simply need to implement your own render code in a customised way. Multiple backgrounds should be doable with drawImage calls, and you may be able to work in css3 transforms when canvas 2D gets setTransform() (which I think is only in the next version of the spec).
In this stage of CSS3 development and crossbrowser support is this probably not possible without writing your own html2canvas extension.
You can try dig into Google Chrome bug reporter as they allow you to send current snapshot of web page. But I think it's some internal function which isn't available in JS api.
Also, I think this can be easily abused for spying on users, so don't expect any official support from browser development teams.