From IT Skills
Jump to: navigation, search
(material)
 
(7 intermediate revisions by the same user not shown)
Line 45: Line 45:
  
 
= material =
 
= material =
 +
world is position-scale-rotation of the mesh
 +
view (or viewMatrix) [https://webglfundamentals.org/webgl/lessons/webgl-3d-camera.html got from camera (inverted position-target)]
 +
projection got from camera (viewport, field of view etc)
 +
viewProjection = view * projection = Scene.prototype.getTransformMatrix()
 +
worldViewProjection = world * viewProjection
 +
worldViewProjection is start matrix for [[BABYLON.ShaderMaterial]]
 +
 +
 +
[http://using-babylonjs.com/03_01_colors_and_textures.html Material Classes...]
 +
 
[[Effect]] [https://doc.babylonjs.com/how_to/optimizing_your_scene#use-transformnode-instead-of-abstractmesh-or-empty-meshes material.freeze(); Once frozen, the [[shader]] will remain unchanged even if you change material's properties... world matrix...is evaluated on every frame. You can improve [[:Category:Performance|performances]] by freezing this matrix... [[mesh]].freezeWorldMatrix();.. free the time spent by the CPU to determine active meshes: scene.freezeActiveMeshes()... Freezing active meshes list may cause some things on the scene to stop updating. One example is RenderTargetTexture... mesh.doNotSyncBoundingInfo = true;... use [[instance]]s... If your scene is set up in such a way that the viewport is always 100% filled with opaque geometry (if you're always inside a [[skybox]], for instance), you can disable the default scene clearing behavior]  
 
[[Effect]] [https://doc.babylonjs.com/how_to/optimizing_your_scene#use-transformnode-instead-of-abstractmesh-or-empty-meshes material.freeze(); Once frozen, the [[shader]] will remain unchanged even if you change material's properties... world matrix...is evaluated on every frame. You can improve [[:Category:Performance|performances]] by freezing this matrix... [[mesh]].freezeWorldMatrix();.. free the time spent by the CPU to determine active meshes: scene.freezeActiveMeshes()... Freezing active meshes list may cause some things on the scene to stop updating. One example is RenderTargetTexture... mesh.doNotSyncBoundingInfo = true;... use [[instance]]s... If your scene is set up in such a way that the viewport is always 100% filled with opaque geometry (if you're always inside a [[skybox]], for instance), you can disable the default scene clearing behavior]  
  
Line 129: Line 139:
 
[https://doc.babylonjs.com/extensions/grid Grid material]
 
[https://doc.babylonjs.com/extensions/grid Grid material]
  
[https://doc.babylonjs.com/extensions/mix Mix material]
+
[https://doc.babylonjs.com/extensions/mix mix material is based on the terrain material but works with up to 8 diffuse textures]
 
=== maps of Dynamic Terrain ===
 
=== maps of Dynamic Terrain ===
 
[https://doc.babylonjs.com/extensions/dynamic_terrain#installation The terrain is defined by its number of subdivisions what is the same on both its axes X and Z... Once created, this number never changes, neither the terrain number of vertices, but only its shape... when it reaches the map edges, then the terrain goes on moving as if the current map where repeated... By default, one terrain quad fits one map quad.. the cameraLODcorrection is the quantity to add to this initial LOD to adjust to the camera position or distance (default 0), the LOD limits are the limits in the perimetric terrain subdivisions... The terrain is updated each time the camera crosses a terrain quad]
 
[https://doc.babylonjs.com/extensions/dynamic_terrain#installation The terrain is defined by its number of subdivisions what is the same on both its axes X and Z... Once created, this number never changes, neither the terrain number of vertices, but only its shape... when it reaches the map edges, then the terrain goes on moving as if the current map where repeated... By default, one terrain quad fits one map quad.. the cameraLODcorrection is the quantity to add to this initial LOD to adjust to the camera position or distance (default 0), the LOD limits are the limits in the perimetric terrain subdivisions... The terrain is updated each time the camera crosses a terrain quad]
Line 156: Line 166:
  
 
== render loop ==
 
== render loop ==
there is standard textures generation in the same rythm with all scene:
+
standard textures generation is in the same rythm for whole scene:
 
=== how draw texture [[asynchronous]] to render loop? ===
 
=== how draw texture [[asynchronous]] to render loop? ===
 
2009-2011: [http://www.prog.org.ru/index.php?PHPSESSID=10a6tts678u2g17kelliks9vq1&topic=11508.msg72265#msg72265 рендерить все лучше из одного потока, особенно если физически GPU один.] [https://gamedev.ru/community/ogl/articles/multithreading Рендеринг в параллельном потоке может использоваться для генерации процедурных текстур и геометрии или для рендеринга текстур отражений, изображений из камер и других операций, пока в основном потоке идет рендеринг сцены... Создание общего контекста Для ОС Windows есть два способа: первый способ подходит для любых версий OpenGL... HGLRC rc = wglCreateContext( dc ); wglShareLists( previous_rc, rc );]
 
2009-2011: [http://www.prog.org.ru/index.php?PHPSESSID=10a6tts678u2g17kelliks9vq1&topic=11508.msg72265#msg72265 рендерить все лучше из одного потока, особенно если физически GPU один.] [https://gamedev.ru/community/ogl/articles/multithreading Рендеринг в параллельном потоке может использоваться для генерации процедурных текстур и геометрии или для рендеринга текстур отражений, изображений из камер и других операций, пока в основном потоке идет рендеринг сцены... Создание общего контекста Для ОС Windows есть два способа: первый способ подходит для любых версий OpenGL... HGLRC rc = wglCreateContext( dc ); wglShareLists( previous_rc, rc );]

Latest revision as of 17:14, 30 July 2020

was created in 2013 by Microsoft developers in their spare time


Once created models are rendered on an HTML 5 canvas element using a shader program which determines the pixel positions and colors on the canvas using the polygon models, the textures applied to each model, the scene camera and lights together with the 4 x 4 world matrices for each object... physical actions one of two physics engines need to be added as plugins, these are Cannon.js and Oimo. Animation involving, for example, changes in position or color of models is accomplished by key frame animation objects called animatables, while full character animation is achieved through the use of skeletons with blend weights.


Axises orientation#Y_babylon : Z is in opposite direction to Blender Y, and X is opposite to Blender X

FreeCamera looks on Z
ArcRotateCamera with alpha=0 looks on -X
For each rendered frame the current world matrix is used on the local space data to obtain the world data... Potential uses of BABYLON.Vector3.TransformCoordinates() may be: setting the position and speed of a mesh relative to another, without the use of parenting
meshes local transformation are in Axises orientation#Z_up like in Blender

Bones are computed using shaders

Morph targets are used by the GPU to create the final geometry by applying the following formula

requirements[edit | edit source]

http://babylonjs.com is open-source, wikipedia:List_of_WebGL_frameworks, supports TypeScript

BabylonJS uses pointer events rather than mouse events and so the PEP event system needs to be loaded as well

TypeScript[edit | edit source]

good aliases for types like Nullable<T>, float, int

ES6[edit | edit source]

our Babylon.js ES6 packages... you can not mix ES6 and our legacy packages

@babylonjs/core - Babylon's core.
@babylonjs/materials - a collection of Babylon-supported advanced materials.
@babylonjs/loaders - All of Babylon's official loaders (OBJ, STL, glTF)
@babylonjs/post-processes - Babylon's post processes.
@babylonjs/procedural-textures - Officially supported procedural textures
@babylonjs/serializers - Scene / mesh serializers.
@babylonjs/gui - BabylonJS GUI module.
@babylonjs/inspector - The BabylonJS Inspector for es 6.

deserialize a PBRMaterial... "@babylonjs/core/Materials/PBR/pbrMaterial"... folders starts with an upper case character where the files starts with a lower case

mesh creating[edit | edit source]

use the newer MeshBuilder method for creating shapes

rule should be : if you need a basic shape as it stands, then use the provided BJS basic shapes. if you need a shape made up of many basic shapes, then use Constructive Solid Geometry or merge provided BJS basic shapes. if you need a computed shape having a symetry axis, then use the Tube mesh or the extrusion, which don't require many maths. if you need something else, then use the Ribbon itself... and your maths skills.

material[edit | edit source]

world is position-scale-rotation of the mesh
view (or viewMatrix) got from camera (inverted position-target)
projection got from camera (viewport, field of view etc)
viewProjection = view * projection = Scene.prototype.getTransformMatrix()
worldViewProjection = world * viewProjection
worldViewProjection is start matrix for BABYLON.ShaderMaterial


Material Classes...

Effect material.freeze(); Once frozen, the shader will remain unchanged even if you change material's properties... world matrix...is evaluated on every frame. You can improve performances by freezing this matrix... mesh.freezeWorldMatrix();.. free the time spent by the CPU to determine active meshes: scene.freezeActiveMeshes()... Freezing active meshes list may cause some things on the scene to stop updating. One example is RenderTargetTexture... mesh.doNotSyncBoundingInfo = true;... use instances... If your scene is set up in such a way that the viewport is always 100% filled with opaque geometry (if you're always inside a skybox, for instance), you can disable the default scene clearing behavior


real-time in browser material editing https://nme.babylonjs.com/

Blend Modes

shaders[edit | edit source]

four ways of putting shader code into your scene:

  1. https://cyos.babylonjs.com/ - Use BabylonJS Create Your Own Shader (CYOS) and download a zip file -
  2. Write the Vertex and Fragment Shader Code into <script> tags
  3. Write, save and import a Vertex and Fragment Shader file of type .fx into your code
    В Babylon.js их также можно задавать в отдельных файлах формата ... basename.vertex.fx и basename.fragment.fx. Затем нужно будет создать материал ... BABYLON.ShaderMaterial("cloud", scene, "./myShader", { attributes: ["position", "uv", uniforms: ["worldViewProjection"] })... Затем можно напрямую задать значения uniform-переменных и семплеров]
  4. Use the ShaderBuilder extension of BabylonJS
    The format for writing a ShaderBuilder is fluent coding

Methods 1, 2 and 3 use BABYLON.ShaderMaterial

includes[edit | edit source]

Already loaded in the includes are all the common shader elements for babylons StandardMaterial, PBR Materials, ProceduralTextures and more. See the github

helperFunctions

standard material customization[edit | edit source]

default shaders: fragment, vertex

Samples for CustomMaterial

standard material colors[edit | edit source]

emissive and ambient are very resemble

diffuse color depends on light

The ambient color of a scene is a color available everywhere (no occlusion, no direction, no position)... goal of the ambient texture is to provide a support for lightmaps (textures that contains baked shadows). Mainly the value of the ambient texture is multiplied by the diffuse value... Reflection texture StandardMaterial object supports 4 kinds of reflection: Spherical Cubic Planar Projection... Bump texture... Opacity texture

procedural textures[edit | edit source]

2 types of procedural textures: code-only, and code that references some classic 2D images... advantage of procedural textures is that they are written using a fragment shader

Tiles[edit | edit source]

Texture Packer

Tiled Planes and Boxes

Mesh selecting[edit | edit source]

Highlight a Mesh

render edges on top of a mesh

Cameras, Controls[edit | edit source]

Every Babylon.js camera will automatically handle inputs for you, once you call the camera's attachControl function... inputs provide settings to customize the sensibility

Universal Camera[edit | edit source]

for first person... works with all the keyboard, mouse, touch and gamepads ... replaces the earlier Free Camera

collision with other objects in the scene

Arc Rotate Camera[edit | edit source]

geoview

Follow Camera[edit | edit source]

A follow camera takes a mesh as a target and follows it as it moves.

Device Orientation Cameras[edit | edit source]

designed to react to device orientation events such as a modern mobile device being tilted forward or back and left or right

modules[edit | edit source]

Texture Atlas

LOD

Baking Transformations... useful in the following situations: building a set of static geometry * randomizing a series of mesh copies * mirroring a mesh along an axis

uses Web worker in @babylonjs\core\Misc\basis.js

actions[edit | edit source]

action is launched when its trigger is fired. For instance, you can specify that when the user clicks (or touches) a mesh

need to use : import ‘@babylonjs/core/Culling/ray’ import ‘@babylonjs/core/Animations/animatable’

Math algorithms‎[edit | edit source]

Realistic Environments[edit | edit source]

water[edit | edit source]

water material needs at least only a bump texture ... To reflect and refract the world, you just have to add the wanted meshes

sky[edit | edit source]

dynamic and texture free effects for skyboxes... by Simon Wallner, improved by Martin Upitis and finally implmented in Three.js by zz85. The challenge for skyboxes is to reproduce and configure the sky taking care of the atmosphere state. In other words, for example, determine how the light (from sun) is scattered by particles... Day... Evening... horizon

Terrain[edit | edit source]

height map is simply a grayscale image... Each pixel’s color is interpreted as a distance of displacement or “height” from the “floor” of your mesh... use software such as “Terragen”, or ”Picogen”

command line tool is used to perform these tasks: Pack two distinct normal map and height map files into a single one, store the height in the alpha channel.
CreateGroundFromHeightMap

Grid material

mix material is based on the terrain material but works with up to 8 diffuse textures

maps of Dynamic Terrain[edit | edit source]

The terrain is defined by its number of subdivisions what is the same on both its axes X and Z... Once created, this number never changes, neither the terrain number of vertices, but only its shape... when it reaches the map edges, then the terrain goes on moving as if the current map where repeated... By default, one terrain quad fits one map quad.. the cameraLODcorrection is the quantity to add to this initial LOD to adjust to the camera position or distance (default 0), the LOD limits are the limits in the perimetric terrain subdivisions... The terrain is updated each time the camera crosses a terrain quad

good example https://www.babylonjs-playground.com/#FJNR5#264 with panorama

navigation mesh construction[edit | edit source]

recastjs is a port of recastnavigation and a thin abstraction layer using emscripten

buildings[edit | edit source]

a House from a Floorplan

Adding a Roof

Shader examples[edit | edit source]

diamond

render[edit | edit source]

rendering pipeline[edit | edit source]

RenderTarget[edit | edit source]

PostProcess API doesn't let you render a scene twice. That's where RenderTargetTexture (RTT) comes... use the rendered image as the texture of an object in your main render... strategies to improve performance: reduce the RTT size. render as few objects as you can on the RTT. use a simple shader on the RTT pass. prefer simpler meshes. use instances. If you have a large amount of copies of the same object, instances are a good optimization. You only change the material of the base mesh... better performance,by freezing materials before swapping them

render loop[edit | edit source]

standard textures generation is in the same rythm for whole scene:

how draw texture asynchronous to render loop?[edit | edit source]

2009-2011: рендерить все лучше из одного потока, особенно если физически GPU один. Рендеринг в параллельном потоке может использоваться для генерации процедурных текстур и геометрии или для рендеринга текстур отражений, изображений из камер и других операций, пока в основном потоке идет рендеринг сцены... Создание общего контекста Для ОС Windows есть два способа: первый способ подходит для любых версий OpenGL... HGLRC rc = wglCreateContext( dc ); wglShareLists( previous_rc, rc );

  1. in separate engine
  2. Multiple Canvases with one Engine... If the camera is undefined the render loop will be executed to the view without changing anything on the active scenes... views to render multiple cameras from the same scene or from different scenes
  3. multi scenes
    single canvas in separate scene with separate camera like GPUComputationRenderer
  4. in current scene by PostProcessManager... directRender
    problem with technical mesh-plane: what scene to place it in?

Performance[edit | edit source]

How To reduce memory footprint

with[edit | edit source]

Angular[edit | edit source]

dependencies might be needed (e.g. cannon.js or hand.js... Angular Provider...that will wrap our BabylonJS Engine...@Injectable = Unity exporter

Pixi[edit | edit source]

https://doc.babylonjs.com/resources/babylonjs_and_pixijs

tools[edit | edit source]

Inspector[edit | edit source]

import "@babylonjs/core/Debug/debugLayer"; // Augments the scene with the debug methods
import "@babylonjs/inspector"; // Injects a local ES6 version of the inspector to prevent automatically relying on the none compatible version
...
scene.debugLayer.show();

Subcategories

This category has only the following subcategory.

B

Pages in category "Babylon.js"

The following 8 pages are in this category, out of 8 total.