From 7f5bc2442a719777ac2bf7958ecba7b7b24d3a54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E8=AA=89=E8=AF=9A?= Date: Sun, 27 Sep 2020 16:05:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=EF=BC=8C?= =?UTF-8?q?=E5=88=86=E7=A6=BBglsl=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gulpfile.js | 77 ++--- package-lock.json | 263 +++++++++++++++++- package.json | 8 +- src/renderers/generalWebglRenderer.js | 32 +-- src/renderers/glsl/generalFragmentShader.glsl | 9 + src/renderers/glsl/generalVertexShader.glsl | 16 ++ 6 files changed, 342 insertions(+), 63 deletions(-) create mode 100644 src/renderers/glsl/generalFragmentShader.glsl create mode 100644 src/renderers/glsl/generalVertexShader.glsl diff --git a/gulpfile.js b/gulpfile.js index 8c6fb55..bd612fb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,14 +1,19 @@ const gulp = require('gulp'); + const bro = require('gulp-bro'); const uglify = require('gulp-uglify'); const rename = require("gulp-rename"); const header = require('gulp-header'); const jsdoc = require('gulp-jsdoc3'); const jeditor = require('gulp-json-editor'); -const fs = require('fs-extra'); +const glsl = require('gulp-glsl'); const sourcemaps = require('gulp-sourcemaps'); const babel = require("gulp-babel"); const eslint = require('gulp-eslint'); +const addsrc = require('gulp-add-src'); + +const fs = require('fs-extra'); + const buildConfig = require('./build.json'); const packageConfig = require('./package.json'); @@ -21,40 +26,46 @@ gulp.task('doc', (cb) => { gulp.task('es6', gulp.series(gulp.parallel(() => { return gulp.src("./build.json") - .pipe(jeditor({ - 'buildDate': new Date().toUTCString(), - 'version': packageConfig.version - })) - .pipe(gulp.dest('dist')) + .pipe(jeditor({ + 'buildDate': new Date().toUTCString(), + 'version': packageConfig.version + })) + .pipe(gulp.dest('dist')) }, () => { return gulp.src('src/lib/resources.json') - .pipe(gulp.dest('dist/lib')) + .pipe(gulp.dest('dist/lib')) }), -() => { - return gulp.src(['src/**/*.js', '!src/lib/JS-Interpreter/acorn_interpreter.js', '!src/lib/JS-Interpreter/demos/**/*']) - .pipe(sourcemaps.init()) - .pipe(babel({ - presets: [ - [ - '@babel/preset-env', - { - useBuiltIns: 'usage', - corejs: 3 - } - ] - ], - shouldPrintComment: (val) => /^\*/.test(val) - })) - .pipe(sourcemaps.write()) - .pipe(gulp.dest('dist')); -})); + () => { + return gulp.src('src/**/*.glsl') + .pipe(sourcemaps.init()) + .pipe(glsl({ + es6: true + })) + .pipe(addsrc([ + 'src/**/*.js', + '!src/lib/JS-Interpreter/acorn_interpreter.js', + '!src/lib/JS-Interpreter/demos/**/*'])) + .pipe(babel({ + presets: [ + [ + '@babel/preset-env', + { + useBuiltIns: 'usage', + corejs: 3 + } + ] + ], + shouldPrintComment: (val) => /^\*/.test(val) + })) + .pipe(sourcemaps.write()) + .pipe(gulp.dest('dist')); + })); gulp.task('browserify', () => { let license = fs.readFileSync('./LICENSE').toString(); return gulp.src('dist/app.js') .pipe(bro({ - debug: true, - require: './openBSE.js' + debug: true })) .pipe(rename(`${buildConfig.name}.all.js`)) .pipe(sourcemaps.init({ loadMaps: true })) @@ -88,7 +99,7 @@ gulp.task('eslint', () => { gulp.task('copy', () => { return gulp.src('src/openBSE.d.ts') - .pipe(gulp.dest('dist')) + .pipe(gulp.dest('dist')) }); gulp.task('build', gulp.parallel( @@ -98,10 +109,10 @@ gulp.task('build', gulp.parallel( gulp.task('changename', () => { return gulp.src("./package.json") - .pipe(jeditor({ - 'name': "@iamscottxu/openbse" - })) - .pipe(gulp.dest('./')) + .pipe(jeditor({ + 'name': "@iamscottxu/openbse" + })) + .pipe(gulp.dest('./')) }); -gulp.task('default', gulp.parallel('build','doc')); \ No newline at end of file +gulp.task('default', gulp.parallel('build', 'doc')); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index afcb976..2b0f810 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "openbse", - "version": "3.2.4", + "version": "3.2.5", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2045,6 +2045,16 @@ } } }, + "browserify-transform-tools": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/browserify-transform-tools/-/browserify-transform-tools-1.7.0.tgz", + "integrity": "sha1-g+J3Ih9jJZvtLn6yooOpcKUB9MQ=", + "dev": true, + "requires": { + "falafel": "^2.0.0", + "through": "^2.3.7" + } + }, "browserify-zlib": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz", @@ -2573,6 +2583,15 @@ } } }, + "cssauron": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz", + "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=", + "dev": true, + "requires": { + "through": "X.X.X" + } + }, "d": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", @@ -2874,6 +2893,12 @@ "domhandler": "^3.0.0" } }, + "duplexer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", + "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", + "dev": true + }, "duplexer2": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", @@ -3283,6 +3308,29 @@ "es5-ext": "~0.10.14" } }, + "event-stream": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.1.7.tgz", + "integrity": "sha1-tMVAAS0P4UmEIPPYlGAI22OTw3o=", + "dev": true, + "requires": { + "duplexer": "~0.1.1", + "from": "~0", + "map-stream": "~0.1.0", + "pause-stream": "0.0.11", + "split": "0.2", + "stream-combiner": "~0.0.4", + "through": "~2.3.1" + }, + "dependencies": { + "map-stream": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz", + "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=", + "dev": true + } + } + }, "events": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/events/-/events-2.1.0.tgz", @@ -3489,6 +3537,26 @@ } } }, + "falafel": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.2.4.tgz", + "integrity": "sha512-0HXjo8XASWRmsS0X1EkhwEMZaD3Qvp7FfURwjLKjG1ghfRm/MGZl2r4cWUTv41KdNghTw4OUMmVtdGQp3+H+uQ==", + "dev": true, + "requires": { + "acorn": "^7.1.1", + "foreach": "^2.0.5", + "isarray": "^2.0.1", + "object-keys": "^1.0.6" + }, + "dependencies": { + "isarray": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", + "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", + "dev": true + } + } + }, "fancy-log": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz", @@ -3744,6 +3812,12 @@ "for-in": "^1.0.1" } }, + "foreach": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz", + "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=", + "dev": true + }, "fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -3753,6 +3827,12 @@ "map-cache": "^0.2.2" } }, + "from": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", + "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=", + "dev": true + }, "fs-extra": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz", @@ -3957,6 +4037,16 @@ "sparkles": "^1.0.0" } }, + "glsl-man": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/glsl-man/-/glsl-man-1.1.14.tgz", + "integrity": "sha512-yM/+5DCpHGIDO+qtMTDp2PLgl+g+4WbqmJlA4baCRkNwuOZbpNDyBaS1gfGaJIV/BrMKDuFBr6niOeRHV1iAeg==", + "dev": true, + "requires": { + "cssauron": "^1.4.0", + "tree-traversal": "^1.1.1" + } + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -4003,6 +4093,69 @@ } } }, + "gulp-add-src": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gulp-add-src/-/gulp-add-src-1.0.0.tgz", + "integrity": "sha512-wmqf71/V/W4Ffi9lduaWAgNFcJW60TRqgc2lRv94d6I7j4rjHtVMHjnbwDH8RF0czGfJqYbs+ruecZXmwJopCQ==", + "dev": true, + "requires": { + "event-stream": "~3.1.5", + "streamqueue": "^0.1.1", + "through2": "~0.4.1", + "vinyl-fs": "~3.0.2" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=", + "dev": true + }, + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + }, + "through2": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz", + "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=", + "dev": true, + "requires": { + "readable-stream": "~1.0.17", + "xtend": "~2.1.1" + } + }, + "xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=", + "dev": true, + "requires": { + "object-keys": "~0.4.0" + } + } + } + }, "gulp-babel": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/gulp-babel/-/gulp-babel-8.0.0.tgz", @@ -4289,6 +4442,20 @@ } } }, + "gulp-glsl": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/gulp-glsl/-/gulp-glsl-1.2.4.tgz", + "integrity": "sha512-sK6t+vHR1khHJQvawgcJQBD0a+Elos8P1MX/RLQm7ACjD/wjmbjOTFS9BI4cVYCYa2cogPhxIo21bwc9zyyJdg==", + "dev": true, + "requires": { + "glsl-man": "^1.1.7", + "object-assign": "^4.1.1", + "object-keys": "^1.0.11", + "plugin-error": "^1.0.1", + "through2": "^2.0.1", + "vinyl": "^2.1.0" + } + }, "gulp-header": { "version": "2.0.9", "resolved": "https://registry.npmjs.org/gulp-header/-/gulp-header-2.0.9.tgz", @@ -5011,6 +5178,12 @@ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", "dev": true }, + "isstream": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", + "dev": true + }, "js-beautify": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.13.0.tgz", @@ -5274,6 +5447,12 @@ "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "dev": true }, + "lodash-node": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/lodash-node/-/lodash-node-2.4.1.tgz", + "integrity": "sha1-6oL3sQDHM9GkKvdoAeUGEF4qgOw=", + "dev": true + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -6048,6 +6227,15 @@ "pinkie-promise": "^2.0.0" } }, + "pause-stream": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz", + "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=", + "dev": true, + "requires": { + "through": "~2.3" + } + }, "pbkdf2": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz", @@ -6088,6 +6276,16 @@ "pinkie": "^2.0.0" } }, + "pkgify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/pkgify/-/pkgify-1.1.0.tgz", + "integrity": "sha1-4H6PVh2RQHnFBq13nXfbjrL7Vmk=", + "dev": true, + "requires": { + "browserify-transform-tools": "^1.2.2", + "lodash-node": "^2.4.1" + } + }, "plugin-error": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz", @@ -6949,6 +7147,15 @@ "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", "dev": true }, + "split": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/split/-/split-0.2.10.tgz", + "integrity": "sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc=", + "dev": true, + "requires": { + "through": "2" + } + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -7001,6 +7208,15 @@ "readable-stream": "^2.0.2" } }, + "stream-combiner": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz", + "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=", + "dev": true, + "requires": { + "duplexer": "~0.1.1" + } + }, "stream-combiner2": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz", @@ -7058,6 +7274,42 @@ "readable-stream": "^2.0.2" } }, + "streamqueue": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/streamqueue/-/streamqueue-0.1.3.tgz", + "integrity": "sha1-sQ1lFYr1ec46X0jJJ20B2yPU+LU=", + "dev": true, + "requires": { + "isstream": "~0.1.1", + "readable-stream": "~1.0.33" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + } + } + }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -7338,6 +7590,15 @@ "through2": "^2.0.3" } }, + "tree-traversal": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tree-traversal/-/tree-traversal-1.1.1.tgz", + "integrity": "sha1-cUg7PL4BxcMhT1pYODuqoM8dzL4=", + "dev": true, + "requires": { + "async": "^1.4.2" + } + }, "tslib": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", diff --git a/package.json b/package.json index c2dcf0b..7bdb98a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openbse", - "version": "3.2.4", + "version": "3.2.5", "description": "openBSE 是一个高性能 JavaScript 弹幕引擎。同屏弹幕1000+ A high-performance JavaScript bullet screen (danmaku) engine. ", "main": "./dist/openBSE.js", "scripts": { @@ -39,9 +39,11 @@ "eslint": "^7.8.1", "fs-extra": "^9.0.1", "gulp": "^4.0.2", + "gulp-add-src": "^1.0.0", "gulp-babel": "^8.0.0", "gulp-bro": "^2.0.0", "gulp-eslint": "^6.0.0", + "gulp-glsl": "^1.2.4", "gulp-header": "^2.0.9", "gulp-jsdoc3": "^3.0.0", "gulp-json-editor": "^2.5.4", @@ -50,5 +52,7 @@ "gulp-uglify": "^3.0.2", "typescript": "^4.0.2" }, - "dependencies": {} + "dependencies": { + "core-js": "^3.6.5" + } } diff --git a/src/renderers/generalWebglRenderer.js b/src/renderers/generalWebglRenderer.js index df978de..89ed320 100644 --- a/src/renderers/generalWebglRenderer.js +++ b/src/renderers/generalWebglRenderer.js @@ -1,5 +1,7 @@ import GeneralCanvasBaseRenderer from './generalCanvasBaseRenderer' import BrowserNotSupportError from '../errors/browserNotSupportError' +import VertexShaderSource from './glsl/generalVertexShader' +import FragmentShaderSource from './glsl/generalFragmentShader' /** * WebGL 渲染器类 @@ -147,37 +149,13 @@ class GeneralWebglRenderer extends GeneralCanvasBaseRenderer { } gl.deleteProgram(program); }; - //顶点着色器代码 - let vertexShaderSource = 'attribute vec2 a_position;'; - vertexShaderSource += 'attribute vec2 a_texcoord;'; - vertexShaderSource += 'uniform vec2 u_resolution;'; - vertexShaderSource += 'varying vec2 v_texcoord;'; - vertexShaderSource += 'void main() {'; - // 从像素坐标转换到 0.0 到 1.0 - vertexShaderSource += 'vec2 zeroToOne = a_position / u_resolution;'; - // 再把 0->1 转换 0->2 - vertexShaderSource += 'vec2 zeroToTwo = zeroToOne * 2.0;'; - // 把 0->2 转换到 -1->+1 (裁剪空间) - vertexShaderSource += 'vec2 clipSpace = zeroToTwo - 1.0;'; - vertexShaderSource += 'gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);'; - // 传递纹理坐标到片断着色器 - vertexShaderSource += 'v_texcoord = a_texcoord;'; - vertexShaderSource += '}'; - //片段着色器代码 - let fragmentShaderSource = 'precision mediump float;'; - // 从顶点着色器中传入的值 - fragmentShaderSource += 'varying vec2 v_texcoord;'; - // 纹理 - fragmentShaderSource += 'uniform sampler2D u_texture;'; - fragmentShaderSource += 'void main() {'; - fragmentShaderSource += 'gl_FragColor = texture2D(u_texture, v_texcoord);'; - fragmentShaderSource += '}'; + _webglContext = _canvas.getContext('webgl'); _webglContext.enable(_webglContext.BLEND); //开启混合功能 _webglContext.clearColor(0, 0, 0, 0); //设置清除颜色 _webglContext.blendFunc(_webglContext.SRC_ALPHA, _webglContext.ONE_MINUS_SRC_ALPHA); - let vertexShader = createShader(_webglContext, _webglContext.VERTEX_SHADER, vertexShaderSource); //创建顶点着色器 - let fragmentShader = createShader(_webglContext, _webglContext.FRAGMENT_SHADER, fragmentShaderSource); //创建片段着色器 + let vertexShader = createShader(_webglContext, _webglContext.VERTEX_SHADER, VertexShaderSource); //创建顶点着色器 + let fragmentShader = createShader(_webglContext, _webglContext.FRAGMENT_SHADER, FragmentShaderSource); //创建片段着色器 let program = createProgram(_webglContext, vertexShader, fragmentShader); //创建着色程序 _webglContext.useProgram(program); _positionAttributeLocation = _webglContext.getAttribLocation(program, 'a_position'); diff --git a/src/renderers/glsl/generalFragmentShader.glsl b/src/renderers/glsl/generalFragmentShader.glsl new file mode 100644 index 0000000..38eb34d --- /dev/null +++ b/src/renderers/glsl/generalFragmentShader.glsl @@ -0,0 +1,9 @@ +//片段着色器代码 +precision mediump float; +// 从顶点着色器中传入的值 +varying vec2 v_texcoord; +// 纹理 +uniform sampler2D u_texture; +void main() { + gl_FragColor = texture2D(u_texture, v_texcoord); +} \ No newline at end of file diff --git a/src/renderers/glsl/generalVertexShader.glsl b/src/renderers/glsl/generalVertexShader.glsl new file mode 100644 index 0000000..aa064cf --- /dev/null +++ b/src/renderers/glsl/generalVertexShader.glsl @@ -0,0 +1,16 @@ +//顶点着色器代码 +attribute vec2 a_position; +attribute vec2 a_texcoord; +uniform vec2 u_resolution; +varying vec2 v_texcoord; +void main() { + // 从像素坐标转换到 0.0 到 1.0 + vec2 zeroToOne = a_position / u_resolution; + // 再把 0->1 转换 0->2 + vec2 zeroToTwo = zeroToOne * 2.0; + // 把 0->2 转换到 -1->+1 (裁剪空间) + vec2 clipSpace = zeroToTwo - 1.0; + gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); + // 传递纹理坐标到片断着色器 + v_texcoord = a_texcoord; +} \ No newline at end of file