this.projectionMatrix.fromPerspective is not a function

[baptistebriel]

Hi Nathan,

I wanted to try the module on a site with browserify. I'm seeing some errors that don't show up on your demos. It seems that projectionMatrix from the Camera component is just an array instead of being a Mat4.

Do you have any ideas why it wouldn't work on a build file? Also, I had to download the repository and load it in a folder of my site instead of node_modules.

On your demos, you import the files with relative paths:

import {Renderer, Camera, Transform, Program, Mesh} from './Core.js';
import {Box} from './Extras.js';

Could I do this using npm instead? Something like this...

import { Renderer, Camera, Transform, Program, Mesh, Box } from 'ogl';

Thank you, it's amazing work!

[gordonnl]

Hey mate,

The Mat4 class (and each Math class) extends Array, so I'm assuming the issue is something to do with that. What pipeline steps are you using? Are you able to check each step's output to see where the issue starts?

For the import when using npm, you can do that, absolutely!

[baptistebriel]

What do you mean by pipeline? With a simple html file with a script type="module", the Mat4 class does have the Array prototype. If I use it on one of my projects, the Mat4 is just a regular Array.

I just tried using npm and I have the error 'import' and 'export' may appear only with 'sourceType: module'. But I do have babelify along presets: ['es2015'].

[gordonnl]

By pipeline I mean the build steps to generate the final js code that runs in the browser.

The import/export error also sounds like a pipeline issue.

[baptistebriel]

Oh, sure. I use gulp, and this is the task for JavaScript files. If you see something that looks wrong...
I know this is definitely not related to the code from ogl so I might just close the issue and figure out another build process. Thanks!

import gulp from 'gulp'
import watch from 'gulp-watch'
import vinyl from 'vinyl-source-stream'
import browserify from 'browserify'
import watchify from 'watchify'
import aliasify from 'aliasify'
import envify from 'envify/custom'
import pckg from '../../package.json'
import project from '../../project.json'
import opts from '../options'
import time from '../utils/time-elapsed'
import onError from '../utils/on-error'
import globify from 'require-globify';
import folderify from 'folderify';
import glslify from 'glslify';
import jstfy from 'jstify';

const timeElapsed = time('js')

gulp.task('scripts', function() {
  let bundler = browserify({
    entries: 'src/index.js',
    cache: {},
    packageCache: {},
    fullPaths: opts.debug,
    debug: opts.debug,
    insertglobals: true // for globals like FB, YT...
  })

  if (opts.watch) {
    bundler = watchify(bundler)
    bundler.on('update', bundle)
    watch(['package.json'], bundle) // Rebuild if changing stuff in package.json (like environments)
    // watch(['src/svg/**/*.svg'], bundle)
  }

  applyTransform(bundler)

  return bundle()

  function bundle() {
    timeElapsed.start()

    return bundler.bundle()
      .on('error', onError)
      .pipe(vinyl('main.js'))
      .pipe(gulp.dest('static/build'))
      .on('end', timeElapsed.end)
  }
})

function applyTransform(bundler) {
/*
    Pass some flags to the build

    if (App.ENV === 'dev') { ... do something in dev mode ... }
    if (App.ENV === 'live') { ... do something in live mode ... }

    Any variable in project.json will be added here
*/

  const paths = project.env[opts.env]

  bundler.transform('babelify', {
    presets: ['es2015'],
    plugins: ['transform-decorators-legacy']
  })
  bundler.transform(globify)
  bundler.transform(folderify)
  bundler.transform(jstfy)
  bundler.transform(glslify)
  bundler.transform(aliasify, pckg.aliasify)
  bundler.transform(envify({
    ENV: opts.env,
    paths: paths
  }))
}

[gordonnl]

I haven't used browserify, but searching quickly (browserify/browserify#1186) it look like it might not support es6 module syntax yet? I see a couple comments about waiting until Node also supports it.

[gordonnl]

It looks like good old Matt DesLauriers has already written a solution to add support! https://github.com/mattdesl/esmify

[baptistebriel]

That is weird, because I use import and export on all my files. Thanks for searching on it! Merci!