Sfera

• ← Animacija

Do sada je u primeru kori??ena kocka koja je prili?no inutitivna za modeliranje. U nastavku ?e biti prikazana implementaija sfere kao predstavnika objekata sa krivim povr?inama.

Prvi problem koji se name?e kod iscrtavanja sfere je kako predstaviti njene vertex-e. Sfera se, kao i sve ostalo, mo?e modelirati na razli?ite na?ine. Me?utim, postoji nekoliko naj?e??ih tehnika i jedna od njih je da se sfera predstavi preko poligona koji se dobijaju ukr?tanjem linija longituda i latituda.

Na slede?oj slici je prikazana sfera modelirana na ovaj na?in. ?to je gustina linija ve?a kona?an rezltat ?e biti bolji.

Svako ukr?tanje ?e predstavljati jedan vertex, a prilikom iscrtavanja, svaki od dobijenh poligona ?e biti iscrtan sa dva trougla.

Matemati?kom teorijom i postupcima se mo?e se pokazati da se koordinate vertex-a dobijenih na ovakav na?in mogu izra?unati kao ?to je prikazano u nastavku. ?to se ti?e rasporeda koordinata za teksturu, vrednosti ?e u ovom primeru biti dobijene tako ?to ?e se pravougaona slika koja se koristi kao tekstura podeliti paralelnim horizontalnim i vertikalnim linijama analogno na?inu na koji je podeljena sfera na poligone. Sva potreban izra?unavanja su prikazana ispod.

x = rsinΘcosφ

x kooridnata vertex-a

y = rcosΘ

y kooridnata vertex-a

z = rsinΘsinφ

z kooridnata vertex-a

nx = rsinΘcosφ

x kooridnata normale

ny = rcosΘ

y kooridnata normale

nz = rsinΘsinφ

z kooridnata normale

u = 1 - (j/n)

u kordinata fragmenta teksture

v = 1 - (i/m)

v kordinata fragmenta teksture

gde je

r

radius

Θ = iπ/m

φ = j2π/n

m

broj latituda

i

redni broj latitude (0 <= i <= m)

n

broj longituda

j

redni broj longitude (0 <= j <= n)

Kod koji generi?e nizove na osnovu kojih se kreiraju baferi koordinata vertex-a, normala i teksture je dat na slede?em listingu.

var latitudeBands = 30;
var longitudeBands = 30;
var radius = 2;

var vertices = [];
var vertexNormals = [];
var textureCoordinates = [];
var triangles = [];

for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
   var theta = latNumber * Math.PI / latitudeBands;
   var sinTheta = Math.sin(theta);
   var cosTheta = Math.cos(theta);

   for (var longNumber = 0; longNumber <= longitudeBands; longNumber++)  {
      var phi = longNumber * 2 * Math.PI / longitudeBands;
      var sinPhi = Math.sin(phi);
      var cosPhi = Math.cos(phi);

      var x = cosPhi * sinTheta;
      var y = cosTheta;
      var z = sinPhi * sinTheta;
      var u = 1 - (longNumber / longitudeBands);
      var v = 1 - (latNumber / latitudeBands);

      vertices.push(radius * x);
      vertices.push(radius * y);
      vertices.push(radius * z);

      vertexNormals.push(x);
      vertexNormals.push(y);
      vertexNormals.push(z);

      textureCoordinates.push(u);
      textureCoordinates.push(v);
   }
}

for (var latNumber = 0; latNumber < latitudeBands; latNumber++) {
   for (var longNumber = 0; longNumber < longitudeBands; longNumber++) {
      var first = (latNumber * (longitudeBands + 1)) + longNumber;
      var second = first + longitudeBands + 1;
      triangles.push(first);
      triangles.push(second);
      triangles.push(first + 1);

      triangles.push(second);
      triangles.push(second + 1);
      triangles.push(first + 1);
   }
}
                

Potrebno je jo? generisati indekse vertex kooridnata koji ?ine bafer za iscrtavanje trouglova, odnosno potrebno je obezbediti mehanizam koji dobrim redosledom unesi ove indekse u bafer.

var a = (latNumber * (longitudeBands + 1)) + longNumber;
var b = a + longitudeBands + 1;
var c = a + 1;
var d = b + 1;

triangles.push(a);
triangles.push(b);
triangles.push(c);

triangles.push(b);
triangles.push(d);
triangles.push(c);
                

Gotovo!

Ovim je zavr?en tutorijal. Osim lekcija, u glavnom meniju mo?ete prona?i jo? dodatnih informacija.

Pogledaj, na primer:

Ograni?enja u radu sa WebGL-om