Курсовой проект по предмету программирование

Вступление

Возможности языка

• 
  объекты, с возможностью интроспекции;
  
• 
  функции как объекты первого класса;
  
• 
  автоматическое приведение типов;
  
• 
  автоматическая сборка мусора;
  
• 
  анонимные функции.
  

• 
  модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;
  
• 
  стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода/вывода, базовых типов для бинарных данных;
  
• 
  стандартные интерфейсы к веб-серверам и базам данных;
  
• 
  система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.
  

Структура языка

• 
  ядро (ECMAScript),
  
• 
  объектная модель браузера (Browser Object Model или BOM (de)),
  
• 
  объектная модель документа (Document Object Model или DOM).
  

Встраивание в веб-страницы

Пользовательские скрипты в браузере

Виджеты

Версии

Библиотеки JavaScript

• 
  Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
  
• 
  Переход по дереву DOM, включая поддержку XPath как плагина;
  
• 
  События;
  
• 
  Визуальные эффекты;
  
• 
  AJAX-дополнения;
  
• 
  JavaScript-плагины.
  

Средства тестирования

WebGL

Принципы WebGL

Реализация WebGL

• 
  Mozilla Firefox — WebGL был включён во все платформы, у которых есть нужная графическая карта с актуальными драйверами, начиная с версии 4.0.
  
• 
  Google Chrome — WebGL включён по умолчанию во все версии начиная с 9.
  
• 
  Safari — поддерживает WebGL, но поддержка отключена по умолчанию.
  
• 
  Opera — WebGL реализован в версии Opera 12.00, но отключена по умолчанию.
  
• 
  Internet Explorer — Microsoft не заявляла об официальной поддержке WebGL, независимыми разработчиками выпущены плагины Chrome Frame и IEWebGL, предусматриваюющие опции, необходимые для поддержки WebGL в Internet Explorer. По-видимому, поддержка WebGL появится в IE 11.
  

Библиотеки WebGL

• 
  Для разработки WebGL используется несколько библиотек. Первой общедоступной стала библиотека WebGLU. Среди других библиотек для WebGL - GLGE, C3DL, Copperlicht, SpiderGL, gwt-g3d (обёртка для GWT), SceneJS, X3DOM, Processing.js, Three.js, Turbulenz, OSGJS, XB PointStream и CubicVR.js.
  
• 
  ANGLE (Almost Native Graphics Layer Engine) — программа, выпущенная под лицензией BSD, которая позволяет переводить содержимое WebGL в OpenGL ES 2.0, вызывать API DirectX 9, которые взаимодействуют с платформами Microsoft Windows без необходимости в дополнительных драйверах OpenGL.
  

Пример создания и анимации объекта.

1. 
   var renderer = new THREE.WebGLRenderer({antialias: true});
   
2. 
   renderer.setSize(document.body.clientWidth, document.body.clientHeight);
   

1. 
   document.body.appendChild(renderer.domElement);
   

1. 
   renderer.setClearColorHex(0xEEEEEE, 1.0);
   
2. 
   renderer.clear();
   

1. 
   var fov = 45; // угол обзора камеры
   
2. 
   var width = renderer.domElement.width; // ширина сцены
   
3. 
   var height = renderer.domElement.height; // высота сцены
   
4. 
   var aspect = width / height; // соотношение сторон экрана
   
5. 
   var near = 1; // минимальная видимость
   
6. 
   var far = 10000; // максимальная видимость
   

1. 
   var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
   
2. 
   camera.position.z = 300;
   

1. 
   var scene = new THREE.Scene();
   
2. 
   var cube = new THREE.Mesh(
   
3. 
   new THREE.CubeGeometry(50,50,50),
   
4. 
   new THREE.MeshBasicMaterial({color: 0x000000, opacity: 1})
   
5. 
   );
   
6. 
   scene.add(cube);
   
7. 
   renderer.render(scene, camera);
   

1. 
   function animate(t) {
   
2. 
   // задаем круговое движение камеры
   
3. 
   camera.position.set(
   
4. 
   Math.sin(t/1000)*300, 150, Math.cos(t/1000)*300);
   
5. 
   // очищаем рендер и обновляем lookAt каждый фрейм
   
6. 
   renderer.clear();
   
7. 
   camera.lookAt(scene.position);
   
8. 
   renderer.render(scene, camera);
   
9. 
   window.requestAnimationFrame(animate, renderer.domElement);
   
10. 
    animate(new Date().getTime());
    

1. 
   var light = new THREE.SpotLight();
   
2. 
   light.position.set( 170, 330, -160 );
   
3. 
   scene.add(light);
   

1. 
   var litCube = new THREE.Mesh(
   
2. 
   new THREE.CubeGeometry(50, 50, 50),
   
3. 
   new THREE.MeshLambertMaterial({color: 0xffffff}));
   
4. 
   litCube.position.y = 50;
   
5. 
   scene.add(litCube);