时间戳

首页 > 解决方案 > twgl.js 使用 es6 模块加载纹理时遇到问题

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

问题描述

我正在尝试将纹理加载到 2d 平面中，如这篇文章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-6gulpbabeljswebgltwgl.js

解决方案

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

twgl.drawBufferInfo(gl, primitiveType, bufferInfo)

至

twgl.drawBufferInfo(gl, bufferInfo, optionalPrimitiveType)

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

推荐阅读