Azzegzi n tiszri tamedrut n 3D

Tasuqilt agi ur temmid ara. Ma ulac aɣilif, mudd afus di tsuqilt n umagrad agi si teglizit.

Amagrad agi yezzegzey meṛṛa tiszrit n taffa ig wulmen att tissinem mara tebdum leqdic s 3D.

Anagraw n tismsidegt

3D d tumasant deg sebggen n tallɣa deg tallunt n 3D,s unagraw ig tt wasqedcen iw siḍan n tadeɣṛa.

Coordinate system

WebGL iseqdac anagraw n tamsidegt n yefus-agellus n x sweṛen ɣer yefus,agellus n y sweṛen d sawen,,agellus n z  sweṛen beṛṛa n wagdil,am akka ne ttwali deg adyagram agi safella.

Taɣawsa

Imeẓliyen n inawen tɣawsiwin ttwassalin s tallat n Vertex.d yiwen n ired deg tallunt ɣuṛes tadeɣṛa ines 3D deg anagraw n tamsidegt u tikkwal n isallen yernnan i ti sesbadu.yal ired yett wasen s wayla yagi.

  • Tadeɣra: yumagit deg tallunt 3D  (x, y, z).
  • Ini: Ini yesesfel tawaṭfa wazal RGBA (R,G ed B i yibuda azeggaɣ,azyza d asẓerwal,Alpha i tafrawent -meṛṛa azalen teddun seg 0,0 à 1,0).
  • Amagnu:S wammek ara tglemeḍ talmehla i deg tella vertex.
  • Tasuddest:Tugna 2D ig zmmer att s waseqdec deg vertex i lmend n udleg n tasna,ye kkad seg ini afrari.

tzemmrem a tesalim tanzeggit s useqdec n isal agi. — Atan umedya n agasas.

Cube

Udem n talɣa ye llan daɣawas ger vertices.amedya yiwen ugasas n 8 tikyutin yemgaraden (ired deg tallunt) d 6 udmawen yemgaraden, yalta tett wasers ɣef 4 n vertices.tagnut tesbadu tamehla ideg udem yett wanil.u yerna,s tuqqna n irden,nesnulfuyed idisan n ugasas.tanzeggit tett wasers seg takyut ed wudem, mad angawi d tasuddest,ig seqdacen ini neɣ tugna.ma sdded tanzeggit ɣer tasuddest,ad nesufeɣ tindar.

Iqadusen n tikci

iqadusenn n tikci d akala iseg tugniwin ttwaheggant u ttefɣent-ed deg wagdil.iqadusen n tikci tudlift tettaṭaf tiɣawsiwin 3D yett wasersen seg timenza yeglemen s tallat n vertices,sisnes asekker,ssiḍan ticlextin u arriten ɣer 2D s iferdisen.

Rendering pipeline

Tasniremt ig ttwa sqedcen deg zenziɣ agi safella ttagi:

  •  Tammenzut: Anekcum deg qadusen-tett wasres seg vertices izmmer ad yilli d akerdis,d ired neɣ d izirig.
  • Ticelxet:Yiwet n tigri 3D n tindar,ig sɛan meṛṛa d ayla yiwet n tindar.
  • Tindar:  Ired ɣef ugdil yersen deg iẓiki 2D,ig ṭefen ini RGBA.

Asekker (vertex) n tikyutin ed ticelxet ttussihel. —tzemmrem a ttarum i schaders nwen ig sqerdcen tuffɣa.

Asekker n vertex

Asekker n vertex ttwagan iw sdukkel n isalen ɣef vertices tisemdanin iw sdabu n imsidag deg tallunt n 3D iw akken ameshanay a ten iẓeṛ.am tuṭfa n tugna n wadlag id heggam
-ye seffk a tesersem tiɣawsiwin timezwura,swel kameṛa,dɣa ṭefed tugna.

Vertex processing

4 imecwaṛen ig llan deg asekker: tamezwarut tga iw tuddsa n tiɣawsiwin deg amaḍal,sawelen-as asseɣwel n wafrun.ticki, yella usseɣwel n iẓeri ig ttḥadaren ɣef tasdeɣṛiwt ed uslugen n taɣda n kamera deg tallunt 3D.Takamerat ɣuṛes kṛad imesktayen-asun,tanila ed taɣda-yesefk ad ttwa sbadunt iw sayes id yett wasnulfan tura.

Camera

Aseɣwel n tigri (sawelen-as daɣen aseɣwel n tasmuɣlit) tes unmil iɣewwaṛen n taweṣṣaft .yesiswel ayen tezmmer atẓeṛ takamerat —Tawila ɣuṛes tahri n tmuɣli, assaɣ n timeszrit ed Tixtiɣiyin i qarben u i yuden. iw akken a ttissinem ugar eɣret Taseddart kamera ye llan deg magrad  Three.js.

Camera settings

Amecwaṛ aneggaru n usfaylu,ig gllan stufɣa u tinɣers  aqadus n usuɣel.

Isisirew

Isisirew iselkit timenza (ye llan deg takyut yedduden) deg tiẓri n icelxen.

Rasterization

Ticlextin agi-ig llan d isenẓaṛen 3D iferdisen n tugna 2D-myedrasen ɣef iẓiki n iferdisen n tugna,iw akken ad yezmmir asiggez ɣef  wagdil 2D deg mecwar n wazday tuffɣa.

Asekker n icelxan

Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.

Fragment processing

Tasuddest

Textures are 2D images used in the 3D space to make the objects look better and more realistic. Textures are combined from single texture elements called texels the same way picture elements are combined from pixels. Applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by wrapping and filtering it if necessary.

Texture wrapping allows us to repeat the 2D image around the 3D object. Texture filtering is applied when the original resolution or the texture image is different from the displayed fragment — it will be minified or magnified accordingly.

Tafat

The colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. Light might be absorbed or reflected. The standard Phong Lighting Model implemented in WebGL has four basic types of lighting:

  • Snezwi: A distant directional light, like the sun.
  • Specular: A point of light, just like a light bulb in a room or a flash light.
  • Isweɣ: The constant light applied to everything on the scene.
  • Asgel: The light emitted directly by the object.

Azday n tufɣa

During the output manipulation stage all the fragments of the primitives from the 3D space are transformed into a 2D grid of pixels that are then printed out on the screen display.

Output merging

During output merging some processing is also applied to ignore information that is not needed — for example the parameters of objects that are outside of the screen or behind other objects, and thus not visible, are not calculated.

Tarayt

Now you know the basic theory behind 3D manipulation. If you want to move on to practice and see some demos in action, follow up with the tutorials below:

Go ahead and create some cool cutting-edge 3D experiments yourself!

Tibzimin akked imttekkiyen icuddden ɣer isemli

 Imttekiyen deg usebter agi: faridatcemlulaqbayli
 Asnifel anneggaru sɣur: faridatcemlulaqbayli,