71.htm 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!--
  2. demo.design 3D programming FAQ
  3. Idea, texts, screenshots:
  4. Andrew A. Aksyonoff,
  5. shodan@chat.ru
  6. Web-design, illustrations:
  7. Andrey Samoilov,
  8. asy@sense.simbirsk.su
  9. -->
  10. <html>
  11. <head>
  12. <title>demo.design 3D programming FAQ. Разное. Субпиксельная точность.</title>
  13. <link rel=stylesheet href="../style.css" type="text/css">
  14. </head>
  15. <script language="javascript">
  16. <!--//
  17. browser = navigator.appName;
  18. version = parseFloat(navigator.appVersion);
  19. if (browser == "Netscape" && version >= 3.0) { jsenabled = 1; } else
  20. if (browser == "Microsoft Internet Explorer" && version >= 3.0) { jsenabled = 1; } else { jsenabled = 0; }
  21. function swap(img,ref) { if (jsenabled) {document.images[img].src = ref;} }
  22. function loadtocache(img,ref) { cache[img] = new Image(); cache[img].src = ref; }
  23. if (jsenabled) {
  24. cache = new Array();
  25. loadtocache(0,"../img/xdl.gif");
  26. loadtocache(1,"../img/xfaq.gif");
  27. loadtocache(2,"../img/xlinks.gif");
  28. loadtocache(3,"../img/xauthor.gif");
  29. loadtocache(4,"../img/xe.gif");
  30. loadtocache(5,"../img/xprev.gif");
  31. loadtocache(6,"../img/xnext.gif");}
  32. //-->
  33. </script>
  34. <body bgcolor=white><center>
  35. <!-- Title -->
  36. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  37. <img src="../img/t.gif" width=500 height=1 alt=""><br>
  38. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  39. <img src="../img/t.gif" width=500 height=2 alt=""><br>
  40. <table width=500 cellpadding=0 cellspacing=0 border=0>
  41. <td><img src="../img/t.gif" width=5 height=1 alt=""><a href="../main.htm" onmouseover="swap('logo','../img/xe.gif');" onmouseout="swap('logo','../img/e.gif');"><img src="../img/e.gif" name=logo width=60 height=50 hspace=10 border=0 alt=" в самое начало "></a></td>
  42. <td><p class=pagetitle><img src="../img/t.gif" width=265 height=1 alt=""><br>demo.design<br>3D programming FAQ</td>
  43. <td align=center><p class=navy><a href="../download.htm" onmouseover="swap('dl','../img/xdl.gif');" onmouseout="swap('dl','../img/dl.gif');"><img src="../img/dl.gif" name=dl width=40 height=40 border=0 hspace=5 alt=" download "></a><br>download</td>
  44. <td align=center><p class=navy><a href="../links.htm" onmouseover="swap('links','../img/xlinks.gif');" onmouseout="swap('links','../img/links.gif');"><img src="../img/links.gif" name=links width=40 height=40 border=0 hspace=5 alt=" коллекция линков "></a><br>links</td>
  45. <td align=center><p class=navy><a href="../author.htm" onmouseover="swap('author','../img/xauthor.gif');" onmouseout="swap('author','../img/author.gif');"><img src="../img/author.gif" name=author width=40 height=40 border=0 hspace=5 alt=" автора! "></a><br>author</td>
  46. </table>
  47. <img src="../img/t.gif" width=500 height=4 alt=""><br><img src="../img/b.gif" width=500 height=1 alt=""><br>
  48. <!-- Head -->
  49. <table width=500 cellpadding=0 cellspacing=10 border=0><td><div align=justify>
  50. <p class=title>
  51. <img src="../img/b7.gif" width=70 height=70 align=left hspace=0 alt="">
  52. <img src="../img/t.gif" width=5 height=70 align=left hspace=0 alt="">
  53. РАЗНОЕ<br>7.1. Субпиксельная точность
  54. <!-- Article -->
  55. <p>Субпиксельная точность означает следующее: только те пикселы, центры которых
  56. лежат внутри данного многоугольника, должны быть нарисованы. На самом деле,
  57. в этом определении можно использовать любую (зафиксированную) точку внутри
  58. пиксела, единственным последствием этого будет сдвиг всего экрана меньше, чем
  59. на 0.5 пиксела.
  60. <p>Необходимость в субпиксельной точности появляется только из-за того, что
  61. дисплеи дискретны, состоят из пикселов. Чем меньше становятся пикселы (то
  62. есть, чем выше разрешение), тем меньше важна эта точность. Однако разницу
  63. можно почувствовать даже на разрешениях порядка 1280x1024, а тем более при
  64. обычных для 3D engine 320x200 или 640x480.
  65. <p>Реализовать субпиксельную точность на редкость просто. Представьте себе, что
  66. мы рисуем грань. Обычно мы начинаем рисовать ее с какого-то нецелого start_y,
  67. так как при преобразованиях (например, проецировании) у нас получаются вовсе
  68. не целые числа. Обычно их просто округляют. В результате типичная процедура
  69. рисования треугольника, которая начинает отрисовку с самой верхней точки A и
  70. идет вниз по строкам, на каждой строке пересчитывая координаты начала и конца
  71. рисуемого отрезка как
  72. <pre class=source>
  73. sx_start += dx_start;
  74. sx_end += dx_end;
  75. </pre>
  76. <p>теряет субпиксельную точность из-за этого самого округления, так как sx_start
  77. инициализируется как A.sx, A.sx соотвествует линии y = A.sy, а рисовать мы
  78. начинаем с какого-то округленного значения. Кстати, ни один из примеров к
  79. FAQ'у потерей субпиксельной точности не страдает, так как для каждой строки
  80. sx_start и sx_end заново вычисляются по точной формуле.
  81. <p>Точная формула для расчета sx_start выглядит как
  82. <p class=expression>sx_start = A.sx + dx_start * (current_sy - A.sy),<br>
  83. <p>и для самой первой линии мы тоже должны ее честно применить, а не просто
  84. положить sx_start = A.sx. Получаем, что
  85. <pre class=source>
  86. sx_start = A.sx + dx_start * (ceil(A.sy) - A.sy);
  87. sx_end = A.sx + dx_end * (ceil(A.sy) - A.sy);
  88. </pre>
  89. <p>Ту же самую операцию надо сделать и со всем остальными переменными, которые
  90. мы будем интерполировать по ребрам (например u, v, интенсивность для Гуро);
  91. и то же самое надо сделать при переходе с ребра на ребро.
  92. <pre class=source>
  93. // ...
  94. u_start += du_start * (ceil(start_y) - start_y);
  95. u_end += du_end * (ceil(start_y) - start_y);
  96. // ...
  97. </pre>
  98. <p>Ну и, разумеется, рисовать начинать надо с той строки, которую мы использовали
  99. в формулах. То есть, ceil(start_y).
  100. <p>Вот и все. На скорость работы это не влияет вообще, а грани сразу перестают
  101. мелко и противно дрожать при перемещении, особенно сильно это заметно при
  102. маленьких поворотах (в доли градуса).
  103. </div>
  104. </td></table>
  105. <!-- Bottom Navigation -->
  106. <img src="../img/b.gif" width=500 height=1 alt=""><br><img src="../img/t.gif" width=500 height=2 alt=""><br>
  107. <table width=500 cellpadding=0 cellspacing=0 border=0>
  108. <td><img src="../img/t.gif" width=5 height=1 alt=""><a href="../main.htm" onmouseover="swap('logo2','../img/xe.gif');" onmouseout="swap('logo2','../img/e.gif');"><img src="../img/e.gif" name=logo2 width=60 height=50 hspace=10 border=0 alt=" в самое начало "></a></td>
  109. <td><p class=pagetitle><img src="../img/t.gif" width=265 height=1 alt=""><br>demo.design<br>3D programming FAQ</td>
  110. <td align=center><p class=navy><a href="64.htm" onmouseover="swap('prev','../img/xprev.gif');" onmouseout="swap('prev','../img/prev.gif');"><img src="../img/prev.gif" name=prev width=40 height=40 border=0 hspace=5 alt=" предыдущая статья "></a><br>previous</td>
  111. <td align=center><p class=navy><a href="../content.htm" onmouseover="swap('faq','../img/xfaq.gif');" onmouseout="swap('faq','../img/faq.gif');"><img src="../img/faq.gif" name=faq width=40 height=40 border=0 hspace=5 alt=" содержание "></a><br>content</td>
  112. <td align=center><p class=navy><a href="72.htm" onmouseover="swap('next','../img/xnext.gif');" onmouseout="swap('next','../img/next.gif');"><img src="../img/next.gif" name=next width=40 height=40 border=0 hspace=5 alt=" следующая статья "></a><br>next</td>
  113. </table>
  114. <img src="../img/t.gif" width=500 height=4 alt=""><br>
  115. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  116. <img src="../img/t.gif" width=500 height=1 alt=""><br>
  117. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  118. </center></body>
  119. </html>