[x3dom-developers] aliasing and other effects

[Wegerich, D. (O. S. GmbH) <Weg...@or...>]

Hi all,

Recently I was trying to improve output quality of x3dom renderings. I started with the aliasing effects and solved this problem as follows:


1.     Use a high render resolution by setting width and height attributes of the canvas element

2.     Set the canvas itself invisible

3.     Copy rendered Image (high resolution) to a smaller Image which is displayed (code example is attached)

X3DOM.css:

x3dom-canvas {
  border:none;
  cursor:pointer;
  cursor:-webkit-grab;
  cursor:grab;
  width:3200px;
  height:2400px;
  float:left;
  display:none;
}

You can see the difference in car_ori.PNG and car_ms.PNG (ms like multisampling).

Next thing I wanted to fix is the contrast and saturation of renderings. So I applied CSS-Filters to my Image element:

<img src="" id="picture" width="800" height="600" style="-webkit-filter: contrast(150%) saturate(150%); filter: contrast(150%) saturate(150%);"/>
You can see the result in car_fil.png. Unfortunatly this produces aliasing again.
So, my question is: How do you handle these things? And I suggest to set render resolution by a separate attribute instead of width and heigth.
Regards,
Danilo Wegerich