I opened the browser yesterday and all of my three.js projects are rendered with little or no color, in a white fog. I checked the Three.js website and noticed that some of their examples are also rendered this way. This happens only on Chrome browser, Safari and Firefox are ok. Both use webGL renderer.
Update: I checked on linux and windows, apparently the problem is only on Mac, I'm using OS X YOSEMITE 10.10.5
Solution: Apparently it was a problem with alpha, i noticed that all projects that have white fog have setClearColor() function, after changing the renderer alpha:true the fog disappeared
Link to problem
My Project
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.)
I have a slowly rotating cube that works in Chrome, FF, IE on ThreeJS r67-r70 but breaks in Chrome and FF when I use ThreeJS r71, r72, r73.
In the broken version, the cube itself doesn't seem to render, although it does seem to cast a shadow on the axes.
http://codepen.io/jpflathead/pen/vNaBZa (r70) (working)
http://codepen.io/jpflathead/pen/bVjbRP (r71) (broken in Chrome & FF, working in IE)
I've linked to two codepens, one forked from the other, the only difference is the version of three.js they include. The original was taken from a Microsoft three.js tutorial, but like several other tutorials I've encountered, it breaks when I change it from the original three.js version to the current one. And more precisely, the break seems to occur moving from r70 to r71, but it is still broken in r73 (the latest release.)
The break seems probably related to the lighting and rendering of Lambert Materials but I am not certain of that.
I can't find any announcement that things would break and why, so I am wondering what happened in r71 to break things? How has three.js changed, and what do I have to do now to render this simple cube?
The biggest clue I have is that
github.com/mrdoob/three.js/wiki/Migration#r70--r71 says:
r70 → r71
Removed ambient from Material.
But at my n00b stage, I don't know what that means and it doesn't tell me how to fix it.
So what did I do wrong and/or is this a bug in Three.JS?
I'm trying to render a BloomPass on my current scene, and have the background show through from the body of the containing page. However, when the BloomPass is applied, the background becomes black.
My example is here:http://plnkr.co/edit/0mp0jaGVF6it52HY7aq2?p=preview
I tried following the suggestions in this quite old thread here https://github.com/mrdoob/three.js/issues/1080 on my local version of the plunkr (e.g Changing the ClearAlpha flags in RenderPass), but these have no effect. This black background also persists regardless of which shaders I use (Tried also with FilmPass and FXAA)
Running Chrome 45.0.2454.101 (64-bit) on Yosemite 10.10.5
If you plan to use EffectComposer extensively, you will likely have to invest the time to understand it completely. There are a lot of subtleties.
You want the post-processing effect to be transparent.
To do so, you need to make sure the render targets used by the Composer have an alpha channel -- that is, are of THREE.RGBAFormat.
composer.renderTarget1.format = THREE.RGBAFormat;
composer.renderTarget2.format = THREE.RGBAFormat;
effectBloom.renderTargetX.format = THREE.RGBAFormat;
effectBloom.renderTargetY.format = THREE.RGBAFormat;
three.js r.73
I have a scene in threejs that worked perfectly in Firefox two weeks ago. Today, after updating Firefox recently, I opened up the exact same file, and now I see a very brief flash of the image and then I get a completely blank, white page. It's all local code, relying on a local, downloaded version of three.min.js, so I'm positive there have been no changes to the files.
The examples on the three.js website work fine, so I don't know why my local files would be misbehaving in the latest version of Firefox.
Does anyone know of any changes recently to Firefox that interact poorly with three.js? How to fix it?
[Working fine in Internet Explorer 11. In Chrome, scene appears, but the textured cubes are missing or invisible.]
I created a simple multiplayer math game which uses KineticJS on the client side. I developed it in Linux and everything seemed to work fine and all the coding went smoothly. I noticed the other day, that when running it on OS X 10.8 (Mountain Lion) at work, my submission button and enter events on the input would not work. It did work on the iMac I tested it with that had 10.7 (Lion) installed. Today I booted my laptop into Windows 8 which I do not do often and tried to run my app.
Here is a link to my live web app: Get24
Here is a link to the Github project: CoryG89/Get24
I have also opened a Github issue about this.
However, when I tried to run my app in Chrome on Windows 8, the layout of the page is all messed up. The buttons aren't colored and the target areas for the mouseover events are not lined up with the buttons. The game is not usable. There are no errors in the console. Using Firefox in Windows gives similar results to any browser running under Linux, it works perfectly.
Can anyone tell me why my app seems to be so operating system / browser dependent. Am I doing something wrong? Has anyone else had this experience with KineticJS not working the same under different browsers and operating systems?
Update March 6, 2013
After further messing around with my simple game, I noticed that the mouseover and click events on my buttons were only working at the fill in Chrome Windows 8. I created this simple jsFiddle which when viewed in Chrome on Windows 8 on my computer only renders the fill of the rectangle objects. The bottom rectangles show that when using draggable or the click event only the stroke of the rectangles will react to the mouse. Finally, I went looking around the web and this official tutorial the KineticJS Shape fill property has the same problem when viewed in Chrome on Windows 8. Firefox renders it just fine.
Does anyone have a workaround to get the fill property working in Chrome?
OK, so I feel pretty stupid because when I posted this question the newer version of KineticJS was already out. They do not list this bug being fixed in the change log, however, updating from v4.3.1 to v4.3.3 fixed this for me. My web app is now up and running just fine in Chrome Win8 for me. The tutorials that are linked to from the official KineticJS page are still running an older version and fill is broken in Chrome Win8. If anyone runs into this problem in the future, simply make sure you are on the latest version of Kinetic.
As well there are a few changes in syntax between versions. Not really aware from witch version the shape syntax changed but updating from 4.0.5 to 4.4.0 you need to make the following changes to make it work
update to 4.4.0 and then...
var circle = new Kinetic.Shape({
//4.0.5 returns context instead of canvas
drawFunc: function(canvas) {
/*set var context geting that from canvas, As i said the new drawFunc returns canvas instead of context*/
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.arc(0, 0, (that.parameters.radius/2)-10, Math.PI*take_PI_from_o(angle.end.value), Math.PI*take_PI_from_o(angle.start.value), true);
context.closePath();
//the following two commands are droped
//this.fill(context);
//this.stroke(context);
//and replaced with this one
canvas.fillStroke(this);
},
fill: "#54CAFF",
stroke: "#858585",
strokeWidth: 4,
rotationDeg:-90,
x: angle.stage.getWidth() / 2,
y: angle.stage.getHeight() / 2,
});