After sorting out the issues in this question, I was finally getting image data from my render target. BUT, that image data does not seem to use anti-aliasing. (It also doesn't seem to have any alpha values where 0 < a < 255, but that may be a different issue).
I saw in this thread that anti-aliasing isn't available for render targets, but that was in 2011. Is that still the case? Do I need to employ post-process anti-aliasing if I want it for my render target?
This issue is present in both r76 (what I'm using from my previous question) and even the latest, r86.
Here's an example image, if it helps. The gray background is the image rendered to the main canvas, while the transparent background comes from the render target. You can really see the aliasing on the edges between the faces.
this answer is some late (3 years later) but, in this discussion is the solution: https://discourse.threejs.org/t/why-is-a-custom-fbo-not-antialiased/1329.
With the next release of three.js (R101), it’s possible to use a new type of render-target to solve this problem. WebGLMultisampleRenderTarget enables the support of multisampled renderbuffers. You can now perform “render-to-texture” and have an antialiasing render result. A post-process AA like FXAA is not necessary anymore.
Important: It’s required to use a WebGL 2 rendering context since multisampled renderbuffers is a WebGL 2 feature. -
Related
Just trying to up the stroke width a little on the country polygons for three-globe.
There doesn't appear to be a helper function for this material or any settings beyond color.
I had the bright idea of looping through all the children of the globe object, very crude but:
for (let i in Globe.children[0].children[4].children){
const child = Globe.children[0].children[4].children[i];
child.children[1].material.linewidth = 3;
child.children[1].material.color = new THREE.Color('rgba(255,255,255,1)');
}
This appears to have no effect on the line width. It does, however, successfully change the color, so I think I'm close, though I really hope there's a better way than this.
I'm sorry to inform you that the .linewidth property is very poorly supported due to OpenGL limitations. You can see an explanation in the LineBasicMaterial.linewidth documentation
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.
You'll run into this issue if you're using THREE.Line or THREE.LineSegments. However, there is an alternative you could use with THREE.Line2, which circumvents the limitation by drawing lots of instanced gl.TRIANGLES instead of gl.LINE. You can see it in action in this example. In fact, there are 3 demos of fat lines, each one with a slightly different implementation. You would then have to substitute the outlines of the country with your own fat lines.
I am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. ((https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html))
The issue I am running in to is that this is occuring.
Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn't generally this dark.
This is another example with higher exposure and settings 1: https://i.stack.imgur.com/KUPW9.jpg
An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.
Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.
Github
Don't worry about how messy the code is im just trying everything here lol
VERY IMPORTANT
I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error
I am quite new to Blender and cannot figure out why the objects are not getting rendered. I have tried a lot of methods from various sites, but it didn't work for me, or maybe I missed some of it. I have enabled a white background for my animation, but upon rendering, I can only see a white image, this is due to the fact that the objects weren't rendered to even reach out to composite node.This is the link to my .blend file
At camera setting, you have too low Clip End distance.. And reduce sun strength, 1000 is pretty much, try 2.. :)
I m creating a THREE.js (latest version, r71) app, and sometimes I need to manually delete the 3D scene to display classic 2D content. So, what I do is clearing all variables like scene or renderer, and killing the WebGL context using renderer.forceContextLoss()
This method works fine on Firefox or Chrome, but it is not supported on Interner Explorer or Microsoft Edge, which cause multiple lags on my web page. I can't find a workaround to do this properly as I do in Firefox or Chrome.
If someone has a tip, feel free to tell me :)
Thanks
Try using two canvas tags and put one over the other as suggested here,
put them in a parent div tag then use the following css.
position:absolute;
left:0px;
top:0px;
EDIT:
In response to your comment, allow me to clarify my understanding.
You want to draw 2d and 3d.
You are resetting the webGL context.
You can't have 2 contexts to the same canvas simultaneously and I assume you want to use a a different context for your 2d content.
If this assumption is correct:
I am suggesting that you have 2 canvases and contexts simultaneously, one with your webGL context and 3d content, and another with the context you want to use for 2d content. Then you overlay these canvases by using absolute position, such that it looks like there is one canvas.
This means you never have to reload assets to switch contexts, just make sure you so the above canvas is transparent.
Also if you wrap the canvas in a div tag, it will not be at the top left of the page.
But If my assumption is wrong:
perhaps you don't want to use another context and just wish to clear the screen, in which case you should not call forceContextLoss()
If you wish to continue to use the webGL context, but clear the screen you should use clear()
Hi for some reason pie isnt working on my rounded corners, can anybody please help. Below is my CSS, in ie8 it doesnt show the background color either just the text within the button.
http://jsfiddle.net/doddsy1005/VcrGL/1/
may be due to a filter like this.filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4265b', endColorstr='#e10e49',GradientType=0 );
As per your remark in the question: yes, it may very well be due to the filter.
There is a well-known bug with gradients drawn using filter that messes up rounded corners. This bug is best known in IE9, because IE9 does support border-radius, but still needs filter gradients, so they often clash. I can easily see that it might break CSS3Pie's rounded corners as well though.
I guess the real question is why are you using filter at all for gradients? If you're using CSS3Pie for rounded corners, you can also use it for CSS gradients; it supports both features. The whole point of CSS3Pie is that you don't have to do things like use filter for gradients.
So the answer is simply to stop using filter for your gradients. Use CSS3Pie as you already do for border-radius, and the problem will go away.
Hope that helps.