Tabla de contenidos
Aprender WebGL y Babylon.js a su propio ritmo
no dude en visitar nuestra línea de golf en 3D con WebGL Programación y Babylon.js para principiantes en Zenva Academia. El curso cubre el marco Babylon.js y explica todo lo que necesita para empezar con el uso de esta fantástica biblioteca en proyectos nuevos o existentes.
Tutorial
Ya han visto cómo se puede aplicar algunas texturas de mallas, pero aquí van un paso más allá, con texturas más complejas como espejos, vídeos, bump mapping, y multi-textura.
Resultado final Los nuevo tipo de texturas se consideran avanzados porque no estamos acostumbrados a tratar con ellos, pero se podrán ver que es muy fácil de desarrollarlas en JavaScript! Espejos texturas se crearon para simular “espejos” (!) Lo que significa que babylon.js calcularán para que la reflexión y llenar la textura con los resultados. Un espejo de textura se debe establecer en el reflectionTexture canal de un standardMaterial a mirrorTexture se crea con un parámetro que especifica el tamaño del búfer de la representación (512 × 512 aquí, una mejor calidad de reflexión si aumento). Entonces usted tiene que definir el plano de reflexión y una lista render (la lista de mallas para rendir dentro del espejo). bump mapping es una técnica en gráficos por ordenador para hacer una mirada superficial prestado más realista, sin modificar la geometría de la superficie. Esta es sólo una modificación de textura, por lo que el cálculo es el mismo pero la representación es mucho mejor, tienen un aspecto: La protuberancia textura simula golpes y abolladuras utilizando un mapa llamado mapa normal. Un mapa normal Y ahora, vamos a código de esta textura increíble plazo de dos líneas de JavaScript: Primero creamos un nuevo material estándar, y luego, simplemente declarar una nueva textura bump: Eso es todo, los disturbios textura bump la normales para producir un resultado como este, donde se debe reconocer nuestro mapa normal: Si desea visualizar una película en la escena, el motor de Babilonia tiene una textura especial, que está trabajando como todos los demás, con unos pocos parámetros, incluyendo vídeos URL (una matriz URL), el tamaño de la textura de vídeo (en este caso es de 256), la escena y el último es un valor lógico, si desea utilizar mapas mIP o no. La VideoTexture objeto acepta una matriz de vídeos (para tomar en cuenta diversos codecs) y una vez un vídeo puede ser cargada, se utiliza como fuente de contenido. El objeto DOM vídeo interno es accesible a través de la propiedad VideoTexture.video que le permite controlar el estado del vídeo (reproducción / pausa / parada). También puede cambiar el parámetro de bucle o función de reproducción automática con una variable booleana. El uso de una textura dedicada, materiales múltiples se puede asignar a una única malla. Puede ser útil si se desea que la malla se ve diferente en función de la altura o profundidad, o P. ej … se puede ver a continuación un mapa con la textura de varios materiales (arena, roca y nieve). Para hablar de materiales múltiples, que tiene una fuerte entrada de blog en el blog de David Catuhe: http: //blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi- materials.aspx
¿Cómo puedo hacer esto?
var = new mirrorMaterial BABYLON.StandardMaterial ( «texture4», escena); mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture ( «espejo», 512, escena, true); mirrorMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane (0, -1.0 , 0, -10,0); mirrorMaterial.reflectionTexture.renderList = [sphere1, sphere2]; 1234varmirrorMaterial = newBABYLON.StandardMaterial ( «texture4», escena); mirrorMaterial.reflectionTexture = newBABYLON.MirrorTexture ( «espejo», 512, escena, true) ; mirrorMaterial.reflectionTexture.mirrorPlane = newBABYLON.Plane (0, -1.0,0, -10,0); mirrorMaterial.reflectionTexture.renderList = [sphere1, sphere2];
var bumpMaterial = new BABYLON.StandardMaterial ( «texture1», escena); bumpMaterial.bumpTexture = new BABYLON.Texture ( «normalMap.jpg», escena); 12varbumpMaterial = newBABYLON.StandardMaterial ( «texture1», escena); bumpMaterial.bumpTexture = newBABYLON.Texture ( «normalMap.jpg», escena);
ecran.material.diffuseTexture = new BABYLON.VideoTexture ( «video», [ «escenas / Flat2009 / babylonjs.mp4», «escenas / Flat2009 / babylonjs.webm»], 256, escena, true); 12ecran.material.diffuseTexture = newBABYLON.VideoTexture ( «video», [ «escenas / Flat2009 / babylonjs.mp4», «escenas / Flat2009 / babylonjs.webm»], 256, escena, true);
Mensajes relacionados