ngl: Shader error when upgrading to Three.js r112 (WebXR)

Your IDE may well know more about this than I do…

I’ve just submitted an issue to nglview and if that doesn’t raise any flags hopefully we can merge this soon.

@giagitom: How are you building your app at the moment - is it a javascript project with a package.json? If so you would be able to add ngl (and possibly three*) as deps and either use require('ngl') or import { Something } from 'ngl' depending on whether you’re using node-style or ES6 imports.

*My change would mean that adding ngl as a dep automatically brings in a compatible version of three - you could be explicit about which version of three you want by adding it as a dep and I think npm will try to use the same copy if versions are compatible, so your code would then be:

import { Stage } from 'ngl'   // Or var ngl = require('ngl')
import { Stuff } from 'three' // Or var three = require('three')

and they’d share a three instance (unless you specify an incompatible version)

You could test by replacing/adding the ngl dependency in your project as “fredludlow/ngl#pr-737”

@garyo - looking forward to hear if it works or not 😃

We’d also need to coordinate with nglview (cc’ing @hainm). It looks like nglview uses ES6 imports and webpack, the end result should be the same but when developing nglview npm would install three separately and webpack should bundle it in (if I understand it right) - this is definitely something that would need to work in order to proceed.

I guess our current situation stems from the fact that back in the day JS build tools were a lot less mature and not all the big libraries played nicely with npm/yarn

There are a few ways you might want to deploy NGL but I think it comes down to:

1. A script tag pointing to a ngl.js including Three.js (either because you’re keeping it simple or want to make sure ngl is cached or whatever)
2. Imported into your own project (either ES6 module import or the older require(‘ngl’) syntax) in which case supplying Three.js should be a concern of npm/yarn - by default it should ‘just work’ but give you the flexibility to declare Three as external/global/specific version or whatever

Proposal:

We move Three.js to a dependency (not a devDependency) with an appropriately specified version range. This means that when you npm install ngl, three will get installed alongside (and if versions are compatible your other code that uses Three will use the same instance).

We create three build targets:

• A UMD modlue (.js file) including Three.js - (reproducing the current behaviour of ngl[.dev].js and still the quickest way to get “something” working in a web-page)
• A UMD module (.js file) without Three.js - (cf. @garyo’s patch, but this becomes the ‘main’ entry in package.json too. so you can require(‘ngl’) from within node)
• An ES6 module (.esm.js file) without Three.js - and leave it up to npm/yarn etc to satisfy the dependency - this allows e.g. import { Stage } from 'ngl' in an ES6 project

I made a quick attempt at this here: https://github.com/fredludlow/ngl/tree/pr-737

You can add this in npm as a git dependency if you want to try it: npm install -D fredludlow/ngl#pr-737 OR npm install -D fredludlow/ngl#82feda5 (the exact commit at time of writing)

Very minimal usage example here: https://github.com/fredludlow/ngl-module-test

If people are in favour of this approach there are a few TODOs

• rollup.config.js needs a tidy
• Naming of the built files in dist (and updating package.main and package.module)
• Checking this doesn’t break 101 other things 😃 (like typescript in downstream projects!)

(If people aren’t in favour please speak up - I’m by no means an expert on this)

Indeed – you have to add three.js to your project (npm or yarn) and probably import Three from 'three' yourself. NGL just has Three set as a global dependency, so it doesn’t try to import it itself. If you look at the generated Javascript in (e.g.) build/js/ngl.esm.js you’ll see import lines like

import {Vector2, Vector3, ... Color, ...} from 'three';

so you have to provide three in your node_modules so it can be imported.

If I get some time I’ll try to put together a small webpack/three/NGL project but I’m pretty busy right now.