41.htm 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  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/b4.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>4.1. Точное
  54. <!-- Article -->
  55. <p>Задача текстурирования формулируется таким образом: есть грань - согласно
  56. предположениям, треугольная - с наложенной на нее текстурой. То есть каждая
  57. точка грани окрашена цветом соответствующей ей точки в текстуре. Текстура
  58. накладывается линейным образом. Есть точка экрана с координатами на экране
  59. (sx,sy), принадлежащая проекции грани. Требуется найти ее цвет, то есть
  60. цвет соответствующей этой точке экрана точки текстуры. А для этого надо
  61. найти координаты текстуры для этой точки - точнее, для той точки, проекцией
  62. которой на экран является наша (sx,sy).
  63. <p>Пусть вершины грани есть точки A(Ax,Ay,Az), B(Bx,By,Bz) и C(Cx,Cy,Cz), а
  64. соответствующие им точки текстуры - (Au,Av), (Bu,Bv) и (Cu,Cv). Найдем
  65. координаты текстуры для точки, проекцией которой является (sx,sy).
  66. <p>Для точек (x,y,z), проекцией которых является (sx,sy) имеем:
  67. <p class=expression>sx = xSize/2+x*dist/(z+dist),<br>
  68. sy = ySize/2-y*dist/(z+dist).<br>
  69. <p>Для упрощения формул будем использовать обозначения
  70. <p class=expression>i = sx-XSize/2,<br>
  71. j = YSize/2-sy,<br>
  72. Z = z+dist.<br>
  73. <p>Тогда эти формулы примут вид
  74. <p class=expression>i = x*dist/Z,<br>
  75. j = y*dist/Z,<br>
  76. <p>или, что равносильно:
  77. <p class=expression>i*Z = x*dist,<br>
  78. j*Z = y*dist.<br>
  79. <p>Рассмотрим точку D, принадлежащую грани. Для нее D = A+a*(B-A)+b*(C-A), так
  80. как она лежит в грани. D однозначно задается парой (a,b). Для нее координаты
  81. текстуры (из того, что текстура накладывается линейно) будут такие:
  82. <p class=expression>Du = Au+a*(Bu-Au)+b*(Cu-Au),<br>
  83. Dv = Av+a*(Bv-Av)+b*(Cv-Av).<br>
  84. <p>Пусть проекция D на экран как раз и имеет координаты (sx,sy), тогда для нее
  85. выполнены написанные выше соотношения:
  86. <p class=expression>i*DZ = Dx*dist,<br>
  87. j*DZ = Dy*dist.<br>
  88. <p>Подставим сюда координаты D, выраженные через координаты A, B и неизвестные
  89. коэффициенты a, b:
  90. <p class=expression>i*(Az+a*(Bz-Az)+b*(Cz-Az)+dist) = dist*(Ax+a*(Bx-Ax)+b*(Cx-Ax)),<br>
  91. j*(Az+a*(Bz-Az)+b*(Cz-Az)+dist) = dist*(Ay+a*(By-Ay)+b*(Cy-Ay)),<br>
  92. <p>т.к. мы договорились, что AZ = Az+dist, и, кстати, поэтому BZ-AZ = Bz-Az,
  93. это можно чуть укоротить:
  94. <p class=expression>i*(AZ+a*(BZ-AZ)+b*(CZ-AZ)) = dist*(Ax+a*(Bx-Ax)+b*(Cx-Ax)),<br>
  95. j*(AZ+a*(BZ-AZ)+b*(CZ-AZ)) = dist*(Ay+a*(By-Ay)+b*(Cy-Ay)).<br>
  96. <p>Выделим a и b:
  97. <p class=expression>a*(i*(BZ-AZ)-dist*(Bx-Ax))+b*(i*(CZ-AZ)-dist*(Cx-Ax)) = dist*Ax-i*AZ,<br>
  98. a*(j*(BZ-AZ)-dist*(By-Ay))+b*(j*(CZ-AZ)-dist*(Cy-Ay)) = dist*Ay-j*AZ.<br>
  99. <p>Получили систему двух линейных уравнений, из которой можно найти a и b, а
  100. по ним немедленно вычисляются u и v. Введем вектор M = BA (Mx = Bx-Ax и т.д.)
  101. и вектор N = CA, обозначим d = dist (все это для краткости записи). Тогда
  102. эти два уравнения перепишутся в виде:
  103. <p class=expression>a*(i*Mz-d*Mx)+b*(i*Nz-d*Nx) = d*Ax-i*AZ,<br>
  104. a*(j*Mz-d*My)+b*(j*Nz-d*Ny) = d*Ay-j*AZ,<br>
  105. <p>и решая систему (например, по формулам Крамера) получаем:
  106. <pre class=formula>
  107. (dAx-iAZ)(jNz-dNy)-(dAy-jAZ)(iNz-dNx)
  108. a = ------------------------------------- =
  109. (iMz-dMx)(jNz-dNy)-(iNz-dNx)(jMz-dMy)
  110. djAxNz-ddAxNy-ijAZNz+idAZNy-diAyNz+ddAyNx+ijNzAZ-djAZNx
  111. = ------------------------------------------------------- =
  112. ijMzNz-idMzNy-djMxNz+ddMxNy-ijMzNz+idNzMy+djNxMz-ddNxMy
  113. dj(AxNz-AZNx)+dd(AyNx-AxNy)+id(AZNy-AyNz)
  114. = ----------------------------------------- =
  115. id(MyNz-MzNy)+dj(NxMz-MxNz)+dd(MxNy-NxMy)
  116. i(AZNy-AyNz)+j(AxNz-AZNx)+d(AyNx-AxNy)
  117. = --------------------------------------
  118. i(MyNz-MzNy)+j(NxMz-MxNz)+d(MxNy-NxMy)
  119. </pre>
  120. <p>аналогично получаем
  121. <pre class=formula>
  122. i(AZMy-AyMz)+j(AxMz-AZMx)+d(AyMx-AxMy)
  123. b = --------------------------------------
  124. i(MyNz-MzNy)+j(NxMz-MxNz)+d(MxNy-NxMy)
  125. </pre>
  126. </p>Знаки умножения здесь везде опущены, иначе читать это все совсем невозможно.
  127. <p>Осталось немного, подставить Mx = Bx-Ax и так далее, а потом подставить эти
  128. a и b в формулы для Du и Dv. В процессе подстановок что-то сократится,
  129. что-то упростится, но формулы для Du и Dv все равно получатся длиной в
  130. несколько строк.
  131. <p>Но из этих формул видно кое-что интересное. А именно, то, что
  132. <p class=expression>u = (C1*sx+C2*sy+C3) / (C4*sx+C5*sy+C6),<br>
  133. v = (C7*sx+C8*sy+C9) / (C4*sx+C5*sy+C6),<br>
  134. <p>причем C1, ..., C9 - просто какие-то коэффициенты, зависящие от грани. То
  135. есть, можно посчитать эти коэффициенты один раз на грань, а потом считать
  136. u, v по написанным пару строк выше формулам. Но все равно получается как
  137. минимум одно деление на точку. Это слишком медленно. Поэтому все методы
  138. текстурирования на самом деле используют приближенные вычисления, хотя и
  139. именно по этим формулам.
  140. <p>Стоит отметить тот факт, что на самом деле здесь грань не обязательно
  141. должна быть треугольной - можно взять любые три вершины многоугольной грани.
  142. То же самое справедливо и для остальных описанных методов текстурирования.
  143. </div>
  144. </td></table>
  145. <!-- Bottom Navigation -->
  146. <img src="../img/b.gif" width=500 height=1 alt=""><br><img src="../img/t.gif" width=500 height=2 alt=""><br>
  147. <table width=500 cellpadding=0 cellspacing=0 border=0>
  148. <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>
  149. <td><p class=pagetitle><img src="../img/t.gif" width=265 height=1 alt=""><br>demo.design<br>3D programming FAQ</td>
  150. <td align=center><p class=navy><a href="36.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>
  151. <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>
  152. <td align=center><p class=navy><a href="42.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>
  153. </table>
  154. <img src="../img/t.gif" width=500 height=4 alt=""><br>
  155. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  156. <img src="../img/t.gif" width=500 height=1 alt=""><br>
  157. <img src="../img/b.gif" width=500 height=1 alt=""><br>
  158. </center></body>
  159. </html>