background preloader

3D Web

Facebook Twitter

Paladin : un nouveau projet de moteur de jeux en JavaScript, par la communauté Mozilla. « Paladin » est le nom d'un nouveau projet Open Source de moteur de jeux pour le Web crée par la communauté Mozilla.

Paladin : un nouveau projet de moteur de jeux en JavaScript, par la communauté Mozilla.

Paladin permet de faciliter les interactions 3D, notamment pour les jeux, en fournissant une bibliothèque de développement JavaScript. Les objectifs sont : - De rendre le Web (et Firefox) une plateforme plus attractive pour les jeux sur ordinateur comme sur téléphone portable ; - D'aider les développeurs à concevoir des jeux pour internet en concevant un moteur de jeu 3D facile à utiliser ; - D'encourager un développement amusant en utilisant les avantages des méthodes Agiles et de programmation extrême (c'est à dire: le développement conduit par les tests, la programmation par paire et la collaboration par communication vidéo).

Le moteur utilise actuellement CubicVR pour le rendu 3D et "ammo.js" (une compilation de Bullet utilisant Emscripten) pour la physique. Le chargement se fait à l'aide de "require.js". Le son est aussi d'actualité dans Paladin. Sources : Paladin : An Introduction to Shaders. Introduction I've previously given you an introduction to Three.js.

An Introduction to Shaders

If you've not read that you might want to as it's the foundation on which I will be building during this article. What I want to do is discuss shaders. WebGL is brilliant, and as I've said before Three.js (and other libraries) do a fantastic job of abstracting away the difficulties for you. But there will be times you want to achieve a specific effect, or you will want to dig a little deeper into how that amazing stuff appeared on your screen, and shaders will almost certainly be a part of that equation. I'll say up front as well that at the start I will be explaining the context for shaders, and that the latter part of this tutorial is where we will get into slightly more advanced territory. 1. WebGL does not offer the use of the Fixed Pipeline, which is a shorthand way of saying that it doesn't give you any means of rendering your stuff out of the box.

Vertex shaders Fragment shaders. Getting Started with Three.js. Introduction I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser.

Getting Started with Three.js

With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG. And since it's open source you could even get involved with the project. But right now I'll focus on what I've learned by playing with it as an engine, and talk you through some of the basics. For all the awesomeness of Three.js, there can be times where you might struggle. 1. I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript.

In our 3D world we will have some of the following, which I will guide you through the process of creating: A scene A renderer A camera An object or two (with materials) 2. Just a quick note on support in the browsers. 3. Not too tricky, really!