Статьи

WebGL Hello World в IE11

Сентябрь 12, 2018

Если вы отсутствовали некоторое время, вы, возможно, не слышали о том, что WebGL поддерживается в Internet Explorer, начиная с версии 11, в настоящее время доступен как предварительный выпуск, либо как часть предварительного просмотра Windows 8.1 , либо как отдельный релиз для Windows 7 . И у меня есть доказательство прямо здесь:

CanIUse_WebGL

Для получения дополнительной информации, вы можете прочитать объявление IE11 здесь , и обязательно посетите сайт IE Test Drive для множества примеров того, что вы можете сделать с новой версией.

ПРИМЕЧАНИЕ. На момент написания этой статьи IE 11 находится в предварительном выпуске. Таким образом, вы можете ожидать, что некоторые вещи могут не работать идеально, а производительность не является представительной для окончательного выпуска.

Моя цель в этом посте — представить WebGL для тех, кто, как и я, может быть новичком в этой технологии. Короткая версия заключается в том, что WebGL предоставляет API-интерфейс для трехмерной графики (очень похожий на OpenGL) в элемент HTML5 Canvas. Итак, если вы ознакомились с моей серией по началу работы с HTML5 Canvas , вы уже знаете, что Canvas изначально включает только контекст 2D-рисования. И хотя в Canvas можно было сыграть несколько трюков и получить псевдо-3D, это не было настоящим 3D. WebGL меняет все это.

Теперь, если вы — тот, кто сделал какой-либо объем 3D-рендеринга в нативном коде, вы, вероятно, знаете, что переход от 2D к 3D может добавить мир сложности, не говоря уже о большем количестве кода для выполнения даже простых задач. Поэтому, хотя я мог бы попытаться показать вам базовую демонстрацию, используя только API WebGL, это, вероятно, будет болезненно для нас обоих, поэтому забудьте об этом. Вместо этого я собираюсь воспользоваться доступной библиотекой JavaScript 3D под названием three.js , которая предоставляет (среди других средств визуализации) средство визуализации для WebGL. Вы можете скачать three.js, а также просмотреть исходный код на Github .

Привет мир!

Ну, это не было бы знакомство без примера с приветом. Конечно, в большинстве языков мы используем это буквально, распечатывая текст «Hello, World!». В других средах это либо невозможно, либо действительно неинтересно. Например, в мире микроконтроллеров (Arduino, Netduino и т. Д.) Hello world обычно состоит из мигания светодиода. Для нашего привет-мира WebGL мы покажем вращающийся куб.

И люди three.js были даже достаточно любезны, чтобы включить пример кода в файл readme для библиотеки . Вот как это выглядит:

<script>

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

</script>

Вы можете посмотреть рабочий пример здесь .

Приведенный выше код создает все необходимые переменные для простой трехмерной сцены, включая камеру, которую она инициализирует и помещает в сцену, саму сцену (к которой будут добавлены другие объекты), трехмерный куб, материал, с помощью которого рендеринг куба (в данном случае основной сетки) и рендерера. В функции animate куб слегка поворачивается при каждом вызове функции, а затем сцена перерисовывается. Обратите внимание, что библиотека three.js автоматически добавляет необходимый элемент Canvas в DOM со следующим кодом:

document.body.appendChild( renderer.domElement );

Если у вас острые глаза, вы, возможно, заметили, что чего-то не хватает в примере кода. Приведенный выше код использует CanvasRenderer. Вместо этого мы хотим использовать WebGLRenderer, который может обеспечить лучшую производительность. Таким образом, мы изменили бы строку 21 кода выше, чтобы она выглядела так:

renderer = new THREE.WebGLRenderer();

Сделав это изменение, мы должны быть готовы к простой демонстрации WebGL в стиле Hello World, которая будет работать с любым браузером, поддерживающим WebGL (см. Диаграмму выше).

ПРИМЕЧАНИЕ. В дополнение к преимуществу простоты, еще одним большим преимуществом использования three.js вместо кодирования непосредственно в API WebGL является то, что поскольку three.js поддерживает другие средства визуализации, код, который вы пишете с использованием three.js, может работать браузеры, которые не поддерживают WebGL, хотя и с низкой производительностью.

Но подождите, это еще не все!

Даже круче, для тех, кто создает приложения для Windows 8, потому что приложения WinJS автоматически получают функции в Internet Explorer 11, это означает, что вы также можете использовать WebGL для создания приложений и игр для Windows 8, используя тот же код, что и вы. использовать для Интернета.

Так, например, я мог бы запустить Visual Studio 2013 Preview, создать новое пустое приложение JavaScript для Магазина Windows и вставить приведенный выше пример кода в файл default.html с несколькими изменениями (я изменил код для запуска init функция из события onload элемента body, и увеличил размер куба), и через несколько коротких минут запустите следующую программу в Windows Simulator (обратите внимание, что Simulator не даст вам наилучшую производительность, но он действительно предлагает возможность тестирования при разных разрешениях и ориентациях, а также другие полезные функции):

имитатор

Конечно, есть еще много чего, в том числе различные типы материалов, освещения и т. Д., И вы можете прочитать о них все в документации three.js .

Вы можете скачать код для моей реализации Windows 8.1 демонстрации куба three.js, а также другой демонстрации куба, которую я сделал пару недель назад, которая включает в себя точечный свет и BasicLambertMaterial, здесь:

http://aka.ms/threejswinjs

Другие библиотеки

Хотя я бы определенно рекомендовал не пытаться скинуть код WebGL без вспомогательной библиотеки (если вы не злой 3D-гуру или мазохист), three.js не единственная игра в городе. Некоторые мои коллеги из DPE работали над собственной структурой под названием Babylon.js . Они также работают над сопутствующей структурой для упрощения разработки игр, которая называется GameFX . Оба все еще находятся в стадии разработки, но вы можете попробовать их и следить за проектами в следующих блогах:

Резюме

Это прекрасное время для веб-разработчика. Есть отличные клиентские библиотеки для всего, от манипуляций с DOM до разработки игр, и мощные инструменты, которые помогут вам разрабатывать свои сайты и приложения. Благодаря поддержке WebGL в IE 11 веб-разработчики могут более уверенно передавать 3D-изображения на свои сайты, а разработчики приложений для Windows могут использовать тот же код, который работает в Интернете, для создания классных игр и приложений для Магазина Windows.

Говоря о Магазине Windows, вы подписались на AppBuilder ? Они только что выпустили крутые программы вознаграждений. Создавайте приложения, выполняйте квесты и зарабатывайте баллы за такие призы, как игры XBOX, бесплатные аккаунты разработчиков Магазина Windows или Магазина Windows Phone и многое другое.

35
Share: