twgl.js trouble loading texture using es6 modules

Question

I'm trying to load a texture into a 2d plane like demonstrated on this post How to draw 2D image with TWGL (WebGL helper Library).

It works fine when including the script tag like so <script src="https://twgljs.org/dist/twgl-full.min.js"></script>

But when when trying to do so with the exact same code with es6 modules I get the following error [.WebGL-0x7f90b084f000]RENDER WARNING: Render count or primcount is 0.

Using gulp and browserify like so

    "dependencies": {
        "animejs": "^3.2.1",
        "twgl.js": "^4.16.1"
    },
    "devDependencies": {
        "@barba/core": "^2.9.7",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0",
        "babelify": "^8.0.0",
        "browserify": "^17.0.0",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^4.0.0",
        "gulp-livereload": "^4.0.2",
        "gulp-rename": "^2.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-sourcemaps": "^2.6.5",
        "tinyify": "^3.0.0",
        "vinyl-buffer": "^1.0.1",
        "vinyl-source-stream": "^2.0.0"
    }
}

My gulp task

gulp.task('js', function () {
    
    const options = {
        basedir: '.',
        debug: !is_prod,
        entries: [paths.listen.js + 'app.js'],
        cache: {},
        packageCache: {}
    }
    
    const b =  browserify(options)
    b.transform(babelify.configure({"presets": ["env"]}))
    if(is_prod) b.plugin('tinyify', { flat: false })
    b.bundle()
    .on('error', swallowError)
    .pipe(source('app.min.js'))
    .pipe(gulp.dest(paths.output.js))
    .pipe(livereload())
    
    return b
    
})

importing with import * as twgl from 'twgl.js'

Am I doing something wrong ?

Answer 1

The example was using twgl 1.x and your gulp is using 4.x, things changed. In particular twgl.drawBufferInfo changed from

twgl.drawBufferInfo(gl, primitiveType, bufferInfo)

to

twgl.drawBufferInfo(gl, bufferInfo, optionalPrimitiveType)

I edited that answer to use 4.x