Skip to content
This repository has been archived by the owner on Oct 20, 2020. It is now read-only.

Coming from OSG (Desktop)

Jump to bottom
Jordi Torres edited this page Jul 8, 2016 · 4 revisions

Work in progress...( feel free to change/add whatever you think it should be here)

Introduction

If you are reading this, probably you already know what is OpenSceneGraph (OSG) and what kind of things you can do with it. You will find that OSG.js maybe is not that powerful, but definitely is not a toy.

If you also are a newcomer to modern web development you will need some effort to feel yourself comfortable while coding with osgj.js. I mean probably all of us did play with html, javascript, css, etc.. but coding libraries, class hierarchies, using dependencies, webGL and so on is a bit different. Think in the first time you took contact with OSG: tons of documentation, learn CMake, searching dependencies, running the examples, etc.

TODO explain a bit:

  • You need a server
  • Async Programming/ Promises
  • More...

At the moment OSG.js documentation needs a bit of love, but we are on it ( if you're reading this is a good signal)

Building and running OSG.js locally

The first thing you need is to install Node.js. If you already know about grunt, webpack etc, you might want to start right now! Then follow the instructions in the Readme.md file. Be aware, you will need to use a command-line tool and also a git client.

If you prefer to know what's going on under the hoods:

  • npm
  • Grunt
  • Webpack

The .osgjs format

Explain binaries, server, headers, etc. and link to convert models from OSG.

Some differences between OSG and OSG.js

Even though OSG.js is pretty similar to OSG, there are some differences you should know before you get crazy: ( TODO:explain).

  • Node is also a Group, so Group class does not exist.
  • Math classes are static classes ( i.e. to do a typicall Vector multiplication osg.Vec3.mult( vec1, vec2, result ) );
  • Matrix multiplication behaves different as in OSG, be careful about that.
  • There is no fixed pipeline in WebGL so osgjs implements a shader graph
  • Blocking code is implemented using promises, so it becomes asynchronous.
  • Math precision is configurable( Float or Double )
  • State managing ON|OFF not always work as in OSG, as GL and webGL state stuff is managed differently.
  • Text rendering is adapted to be like in OSG, but some aspects could differ.
  • PagedLOD and DatabasePager.
  • Reading files.
  • OSG.js is not complete, so you can miss some classes that you eventually would need to implement yourself.

Debugging OSG.js

There are a lot of tools you can use to debug your javascript/webGL code. Here you have some of them that you will find essential:

  • Chrome developer tools
  • Shader Editor chrome extension
  • WebGL insight chrome extension

Add more stuff

Clone this wiki locally