Dönüşüm (Transformation) Matrisi

Dikkat

Eğer graphic notlarımı ilk defa okuyorsanız. İlk önce Giriş belgesini okumanızı tavsiye ederim.

Not

• Kod örneklerinde, matris hesaplamaları için WebGL-Math kullanıldı.
  Başka bir seçenek olarak glMatrix de kullanılabilir.
• Örnekler CSS transform özelliğinin matrix3d() fonksiyonu üzerinden verildi.

Öteleme (Translation)

Uzayda, bir noktayı T vektorü boyunca hareket ettirmek için kullanılır ve şu şekilde gösterilir:

$$\begin{bmatrix} 1 & 0 & 0 & \color{red}T_x\\ 0 & 1 & 0 & \color{green}T_y\\ 0 & 0 & 1 & \color{blue}T_z\\ 0 & 0 & 0 & 1\\ \end{bmatrix}$$

Örnekte nesne (50, -75, 0) vektörü ile öteleniyor.

Canlı Düzenleyici

() => { const idendity = GLMath.Matrix.idendity(4); const translationMatrix = GLMath.Transform.translate( idendity, Float32Array.of(50, -75, 0) ); return <TransformViewer matrix={translationMatrix}/>; }

() => {
  const idendity = GLMath.Matrix.idendity(4);
  const translationMatrix = GLMath.Transform.translate(
    idendity,
    Float32Array.of(50, -75, 0)
  );

  return <TransformViewer matrix={translationMatrix}/>;
}

Sonuç

Loading...

Döndürme (Rotation)

Uzayda, bir noktayı R ekseninde θ derece dönürmek için kullanılır.

Örnekte nesne Z ekseni boyunca 45° derece döndürülüyor.

Canlı Düzenleyici

() => { const idendity = GLMath.Matrix.idendity(4); const angle = degreesToRadians(45); const axis = Float32Array.of(0, 0, 1); const rotationMatrix = GLMath.Transform.rotate( idendity, angle, axis ); return <TransformViewer matrix={rotationMatrix}/>; }

() => {
  const idendity = GLMath.Matrix.idendity(4);
  const angle = degreesToRadians(45);
  const axis = Float32Array.of(0, 0, 1);
  const rotationMatrix = GLMath.Transform.rotate(
    idendity,
    angle,
    axis
  );

  return <TransformViewer matrix={rotationMatrix}/>;
}

Sonuç

Loading...

Ölçekleme (Scaling)

Uzayda, bir noktayı S vektorüne göre ölçeklemek için kullanılır ve şu şekilde gösterilir:

$$\begin{bmatrix} \color{red}S_x & 0 & 0 & 0\\ 0 & \color{green}S_y & 0 & 0\\ 0 & 0 & \color{blue}S_z & 0\\ 0 & 0 & 0 & 1\\ \end{bmatrix}$$

Örnekte X ekseninde 1.5, Y ekseninde 0.75 katına çıkarılıyor. Z ekseninde ise aynı ölçekte kalıyor.

Canlı Düzenleyici

() => { const idendity = GLMath.Matrix.idendity(4); const scalingMatrix = GLMath.Transform.scale( idendity, Float32Array.of(1.5, 0.75, 1) ); return <TransformViewer matrix={scalingMatrix}/>; }

() => {
  const idendity = GLMath.Matrix.idendity(4);
  const scalingMatrix = GLMath.Transform.scale(
    idendity,
    Float32Array.of(1.5, 0.75, 1)
  );

  return <TransformViewer matrix={scalingMatrix}/>;
}

Sonuç

Loading...

Dönüşüm İşlemlerini Birleştirmek

İki dönüşüm matrisine, çarpım işlemi uygulanarak aynı dönüşümü yapan tek bir matris elde edilebilir.

Önemli

• Matris çarpımının değişme özelliği yoktur.
• Bu yüzden matrislerin çarpım sırasının değişmesi sonuçta çıkacak dönüşümü de değiştirecektir.
• Dönüşümlerin nesneye uygulanma sıralaması, çarpım işlemlerinin sıralaması ile ters olacaktır.

Örnekte dönüşümlerin Ölçekleme, Döndürme ve Öteleme sıralaması ile uygulandığı görülüyor.
Çarma işlemlerini sırasını değiştirerek sonucun nasıl değiştiği görülebilir.

Canlı Düzenleyici

() => { const idendity = GLMath.Matrix.idendity(4); const angle = degreesToRadians(45); const axis = Float32Array.of(0, 0, 1); const translationMatrix = GLMath.Transform.translate( idendity, Float32Array.of(50, -75, 0) ); const rotationMatrix = GLMath.Transform.rotate( idendity, angle, axis ); const scalingMatrix = GLMath.Transform.scale( idendity, Float32Array.of(1.5, 0.75, 1) ); const modelMatrix = GLMath.Matrix.multiply( GLMath.Matrix.multiply( translationMatrix, rotationMatrix ), scalingMatrix ); return <TransformViewer matrix={modelMatrix}/>; }

() => {
  const idendity = GLMath.Matrix.idendity(4);
  const angle = degreesToRadians(45);
  const axis = Float32Array.of(0, 0, 1);
  
  const translationMatrix = GLMath.Transform.translate(
    idendity,
    Float32Array.of(50, -75, 0)
  );

  const rotationMatrix = GLMath.Transform.rotate(
    idendity,
    angle,
    axis
  );

  const scalingMatrix = GLMath.Transform.scale(
    idendity,
    Float32Array.of(1.5, 0.75, 1)
  );

  const modelMatrix = GLMath.Matrix.multiply(
    GLMath.Matrix.multiply(
      translationMatrix,
      rotationMatrix
    ),
    scalingMatrix
  );

  return <TransformViewer matrix={modelMatrix}/>;
}

Sonuç

Loading...