Написать 3D Soft Engine с нуля: Часть 1

  /// <reference path = "babylon.math.ts" /> 
  модуль SoftEngine { 
       класс экспорта Device { 
         // размер заднего буфера равен количеству пикселей для рисования 
         // на экране (ширина * высота) * 4 (значения R, G, B и Alpha).  
         приватный буфер: ImageData; 
         частная рабочая Canvas: HTMLCanvasElement; 
         приватный рабочийContext: CanvasRenderingContext2D; 
         частная рабочаяШирина: число ; 
         частный рабочийВысота: номер ; 
         // равно backbuffer.data 
         приватные backbufferdata; 
          конструктор (canvas: HTMLCanvasElement) { 
             this .workingCanvas = canvas; 
             this .workingWidth = canvas.width; 
             this .workingHeight = canvas.height; 
             this .workingContext = this .workingCanvas.getContext ( "2d" ); 
         } 
          // Эта функция вызывается для очистки заднего буфера с определенным цветом 
         public clear (): void { 
             // Очистка с черным цветом по умолчанию 
             this .workingContext.clearRect (0, 0, this .workingWidth, this .workingHeight); 
             // после очистки с черными пикселями мы возвращаем связанные данные изображения в  
             // очищаем задний буфер 
             this .backbuffer = this .workingContext.getImageData (0, 0, this .workingWidth, this .workingHeight); 
         } 
          // Как только все будет готово, мы можем очистить задний буфер 
         // в передний буфер.  
         public present (): void { 
             this .workingContext.putImageData ( this .backbuffer, 0, 0); 
         } 
          // Вызывается поставить пиксель на экран с определенными координатами X, Y 
         public putPixel (x: число , y: число , цвет: BABYLON.Color4): void { 
             this .backbufferdata = this .backbuffer.data; 
             // Поскольку у нас есть 1-D массив для нашего заднего буфера 
             // нам нужно знать эквивалентный индекс ячейки в 1-D 
             // на 2D координатах экрана 
             var index: number = ((x >> 0) + (y >> 0) * this .workingWidth) * 4;
   
                    
             // Цветовое пространство RGBA используется холстом HTML5 
             this .backbufferdata [index] = color.r * 255; 
             это .backbufferdata [index + 1] = color.g * 255; 
             this .backbufferdata [index + 2] = color.b * 255; 
             this .backbufferdata [index + 3] = color.a * 255; 
         } 
          // Проект берет несколько трехмерных координат и преобразует их 
         // в 2D координатах с использованием матрицы преобразования 
         общественный проект (координаты: BABYLON.Vector3, transMat: BABYLON.Matrix): BABYLON.Vector2 { 
             // преобразование координат 
             var point = BABYLON.Vector3.TransformCoordinates (координировать, transMat); 
             // Преобразованные координаты будут основаны на системе координат 
             // начиная с центра экрана.  Но рисование на экране обычно начинается 
             // сверху слева.  Затем нам нужно преобразовать их снова, чтобы в верхнем левом углу были значения x: 0, y: 0. 
             var x = point.x * this .workingWidth + this .workingWidth / 2.0 >> 0; 
             var y = -point.y * this .workingHeight + this .workingHeight / 2.0 >> 0; 
             return ( новый BABYLON.Vector2 (x, y)); 
         } 
          // drawPoint вызывает putPixel, но выполняет операцию отсечения до 
         public drawPoint (point: BABYLON.Vector2): void { 
             // Отсечение того, что видно на экране 
             if (point.x> = 0 && point.y> = 0 && point.x < this .workingWidth 
  && point.y < this .workingHeight) { 
                 // Рисуем желтую точку 
                 this .putPixel (point.x, point.y, новый BABYLON.Color4 (1, 1, 0, 1)); 
             } 
         } 
          // Основной метод движка, который пересчитывает каждую проекцию вершины 
         // во время каждого кадра 
         публичный рендер (камера: камера, сетки: сетка []): void { 
             // Чтобы понять эту часть, пожалуйста, ознакомьтесь с необходимыми ресурсами 
             var viewMatrix = BABYLON.Matrix.LookAtLH (camera.Position, camera.Target, BABYLON.Vector3.Up ()); 
             var projectionMatrix = BABYLON.Matrix.PerspectiveFovLH (0,78, 
  this .workingWidth / this .workingHeight, 0.01, 1.0); 
              для ( var index = 0; index <meshes.length; index ++) { 
                 // текущая сетка для работы 
                 var cMesh = meshes [index]; 
                 // Остерегайтесь применять вращение перед переводом 
                 var worldMatrix = BABYLON.Matrix.RotationYawPitchRoll ( 
                         cMesh.Rotation.y, cMesh.Rotation.x, cMesh.Rotation.z) 
                         .multiply (BABYLON.Matrix.Translation ( 
                             cMesh.Position.x, cMesh.Position.y, cMesh.Position.z)); 
                  var transformMatrix = worldMatrix.multiply (viewMatrix) .multiply (projectionMatrix); 
                  for ( var indexVertices = 0; indexVertices <cMesh.Vertices.length; indexVertices ++) { 
                     // Сначала мы проецируем 3D-координаты в 2D-пространство 
                     var projectedPoint = this .project (cMesh.Vertices [indexVertices], transformMatrix); 
                     // Тогда мы можем рисовать на экране 
                     это .drawPoint (projectedPoint); 
                 } 
             } 
         } 
     }