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

【问题标题】：twgl.js trouble loading texture using es6 modulestwgl.js 使用 es6 模块加载纹理时遇到问题
【发布时间】：2020-11-05 13:52:53
【问题描述】：

我正在尝试将纹理加载到二维平面中，就像这篇文章 How to draw 2D image with TWGL (WebGL helper Library) 中演示的那样。

像<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.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'导入

我做错了吗？

【问题讨论】：

标签： ecmascript-6 gulp babeljs webgl twgl.js

【解决方案1】：

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

twgl.drawBufferInfo(gl, primitiveType, bufferInfo)

到

twgl.drawBufferInfo(gl, bufferInfo, optionalPrimitiveType)

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

【讨论】：