twgl.js 使用 es6 模块加载纹理时遇到问题

Question

我正在尝试将纹理加载到 2d 平面中，如此 post 。

像这样包含脚本标签时效果很好<script src="https://twgljs.org/dist/twgl-full.min.js"></script>

但是当尝试使用与 es6 模块完全相同的代码时，我收到以下错误 [.WebGL-0x7f90b084f000]RENDER WARNING: Render count or primcount is 0.

像这样使用 gulp 和 browserify

    "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"
    }
}

我的gulp任务

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
    
})

使用 import * as twgl from 'twgl.js'

导入

我是不是做错了什么？

Answer 1

示例使用的是 twgl 1.x，而您的 gulp 使用的是 4.x，情况发生了变化。特别是 twgl.drawBufferInfo 由

更改

twgl.drawBufferInfo(gl, primitiveType, bufferInfo)

至

twgl.drawBufferInfo(gl, bufferInfo, optionalPrimitiveType)

我编辑了那个答案以使用 4.x

twgl.js 使用 es6 模块加载纹理时遇到问题

twgl.js trouble loading texture using es6 modules

webgl

ecmascript-6

gulp

babeljs

twgl.js