I have a scene where one light is present, and diamonds.
Light properties:
Point light, position: 0 0 30, intensity: 1, distance 60, color: White.
The diamonds material is Phong, color:Red, no emissive, specular: White, shininess 10.
On Chrome, the diamons shine as suppose to, but on Firefox the diamonds not shine at all, and looks very dark (like have something black on it).
I have tried to use both Firefox on desktop Windows and Android mobile phone.
I would like to ask what I am missing?
Below are the settings in my code:
// Renderer:
ren=new THREE.WebGLRenderer({ antialias:true,alpha:true });
ren.shadowMap.enabled=true;
elm.appendChild(ren.domElement); // the renderer is added to a DOM element "elm"
// Light
var o=new THREE.PointLight(0xffffff,1,60);
o.position.set(0,0,30);
o.name="sun"; // light will be later added to the scene, and use "update materials" flag to update the materials of the entire scene.
// The diamond's material: (I gave a new parameter "name", for later use. I guess it should not makes trouble to the engine....)
var mt=new THREE.MeshPhongMaterial({ name:"RedDiamond", transparent:true, opacity:0.85, fog:false, color:0xff0020, specular:0xffffff, shininess:10 });
Live example can see here: https://www.crazygao.com/VideoGames/Lamps, since the first level (loading may takes a bit time only for the first time, the opening scene though is yet not complete). The lighting difference issue can be seen even in the progress scene (with the flash one)
My question: What should I do to make the diamonds shine in Firefox, but not make the entire scene too bright in Chrome? (I tried adding Ambient light to the scene, then in Chrome it becomes too bright....)
Is the problem comes from my settings, or it is the nature of Firefox? What are the best steps I can take to solve this issue?
Thanks a lot
My guess is that you're missing that the webgl canvas is composited with the HTML behind it. By default the browser expects the values of the pixels in the canvas to represent premultiplied alpha values. That means there are many possible invalid colors
Example RGBA = 1,1,1,0
That's an invalid color because since alpha = 0 and multiplying by 0 = 0 then R, G, and B also have to be zero
When the values are invalid the results are undefined and so you'll get different results on different browsers
This answers covers some of the solutions.
Related
My refracted objects flicker as the object rotates. When zoomed in, the effect is rarer, but still present.
My refraction is achieved with a simple transmission:1, thickness:0.2.
Is there some sort of a setting/map I can increase that would help it?
Edit: Here's a live example & full screen (please close the error pop-up, it's from loading GLTF) I forked a tutorial so there are other glass primitives and a control panel. If we reduce the roughness close to 0, the flickering becomes visible in the sphere primitive as well.
Indeed there is a setting. Do you have antialias set on your renderer?
let renderer = new THREE.WebGLRenderer({antialias: true});
A solution that worked for me was setting .setPixelRatio(2) to 2 or higher on my renderer. Flickering stopped and refracted objects look really good.
I am using three js and need a way to draw lines that have a thickness greater that 1px. Whenever I use LineBasicMaterial and try to change the lineWidth property, nothing happens. There is already a reason related to Windows Chrome versions so I am asking if there are any good, working alternatives that can help me achieve thick lines.
Here is the material:
const material = new THREE.LineBasicMaterial({
color: "red",
lineWidth: 20
});
https://threejs.org/docs/#api/en/materials/LineBasicMaterial.linewidth
As in the above link said :
.linewidth : Float
Controls line thickness. Default is 1.
Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.
What's the trick for getting anti-aliasing to work properly on smaller scenes - which are overlaid on top of big scenes?
Check out this fiddle here:
https://jsfiddle.net/gilomer88/j974zmq0/6/
When you tap on any of the cubes you see there a new smaller "detailsScene" opens up on top of the main scene - and the cube in that "detailsScene" is not looking good. (It may not look all that bad here, but trust me, in my real project I'm loading a ".glb" model and it looks really terrible there. And it's not the model that's off. I know that because when I load it into my main scene it looks 100% perfect. Unless I have to re-load it for some reason into this smaller scene...?)
Otherwise I'm pretty sure I set the renderer for this smaller scene the right way, using:
detailsRenderer.setPixelRatio( window.devicePixelRatio );
(You'll find that bit on line 192 in the JS of the fiddle code.)
Any thoughts?
Anti-aliasing is working fine. The scene is just a bit blurred, because the canvas is scaled up while the renderer renders on a smaller size. You should always set the size of the renderer, such that it matches the canvas size. Just passing the canvas element to the renderer is obviously not enough in order to let the renderer know on which size it should render the scene.
detailsRenderer.setSize(detailsCanvas.offsetWidth, detailsCanvas.offsetHeight);
https://jsfiddle.net/sg3fn0tk/
I'm trying to get lensflare to work in ThreeJS.
It seem to function okay when there is distance to camera but if I camera is moved to about 50 units or less distance to lensflare the flare disappears! Why?
Update:
After further investigation I noticed that lensflare works fine in webgl_lensflares.html example. The problem is when I try to add it to ThreeJS Editor. Adding it to Editor causes 3 problems:
Rendering becomes painfully slow.
When I rotate the scene the lensflare rotates fine, but when I move the scene the lensflare moved the opposite direction.
If I put the lensflare at (0,0,0) it disappears when I get too close to it, but if I put it in locations away from origin such as (0,10,0) it doesn't have that problem.
Here is the code that I added to Editor in Viewport.js:
var textureLoader = new THREE.TextureLoader();
var textureFlare0 = textureLoader.load("textures/lensflare/lensflare0.png");
var flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(0.55, 0.9, 0.5 + 0.5);
var lensFlare = new THREE.LensFlare(textureFlare0, 100, 1.0, THREE.AdditiveBlending, flareColor);
lensFlare.position.set(0, 0, -10);
scene.add(lensFlare);
I figured out the answer to all my 3 problems:
Netbean debugger was slowing down the rendering. Once I turned off Netbean debugger it became much faster. I still notice flare rendering slows down rendering a little but it's at least usable now.
The reason lensfare would move the opposition direction was because I passed 1.0 as its 3rd parameter. Should've been 0.0
The reason why at (0,0,0) I don't see the flare is because there is another shape located on that position. Apparently flare is not visible if it is position insider another shape. I had wrongly assumed that flare is rendered last and hence always visible.
I am trying to implement webgl for my game. The problem is I use multiple canvases, and my webgl enabled canvas is semi-transparent over my terrain canvas (which is drawn once and just moves with the player). Here is a picture:
I've searched for the past 2 hours on google and can't find anything that has helped.
I have tried:
getContext("experimental-webgl",{alpha: false});
This just hides the terrain completely (now all black), but my webgl drawn objects have the correct color.
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);
Neither of these did anything noticeable.
gl.clearColor(0, 0, 0, 0)
Didn't affect the outcome, still looks like the screenshot above.
Everything else here: http://games.greggman.com/game/webgl-and-alpha/
Nothing seems to work. Why is what is drawn on the canvas semi transparent? There is no CSS affecting the canvas element.
Figured it out! I am using WebGL-2D, which is a javascript file that adds the context2D API to webGL. So if I call drawImage, it actually handles that with webgl. In the getContext definition I had to change:
gl.colorMask(1,1,1,0);
to
gl.colorMask(1,1,1,1);
The colorMask() method specifies whether red, green, blue, and alpha can or cannot be written into the frame buffer.
I have no idea why it was 0 before.