vislite 1.2.0 → 1.2.1-alpha.0

package/src/common/webgl/buffer.ts

@@ -1,80 +1,80 @@
-// 缓冲区分为两种：
-// 1.缓冲区中保存了包含顶点的数据
-// 2.缓冲区保存了包含顶点的索引值
-
-// 获取一个新的缓冲区
-// isElement默认false，创建第一种缓冲区，为true创建第二种
-const newBuffer = (painter: WebGLRenderingContext) => {
-    return painter.createBuffer()
-}
-
-// 数据写入缓冲区
-// data是一个类型化数组，表示写入的数据
-// usage表示程序如何使用存储在缓冲区的数据
-const writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
-    const TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
-    painter.bufferData(TYPE, data, usage)
-}
-
-// 使用缓冲区数据
-// location指定待分配的attribute变量的存储位置
-// size每个分量个数
-// type数据类型，应该是以下的某个：
-//      gl.UNSIGNED_BYTE    Uint8Array
-//      gl.SHORT            Int16Array
-//      gl.UNSIGNED_SHORT   Uint16Array
-//      gl.INT              Int32Array
-//      gl.UNSIGNED_INT     Uint32Array
-//      gl.FLOAT            Float32Array
-// stride相邻两个数据项的字节数
-// offset数据的起点字节位置
-// normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
-const useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
-
-    // 把缓冲区对象分配给目标变量
-    painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
-
-    // 连接目标对象和缓冲区对象
-    painter.enableVertexAttribArray(location)
-}
-
-class BufferObject {
-
-    private __painter: WebGLRenderingContext
-    private __isElement: boolean
-
-    private __buffer: WebGLBuffer
-    private __type: number
-    private __fsize: number
-
-    constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
-        this.__painter = painter
-        this.__isElement = isElement
-
-        this.__buffer = newBuffer(painter) as WebGLBuffer
-        this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
-    }
-
-    // 使用这个缓冲区对象
-    // （先于写入和分配）
-    use() {
-        this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
-        return this
-    }
-
-    // 写入数据
-    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
-        writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
-        this.__fsize = data.BYTES_PER_ELEMENT
-        return this
-    }
-
-    // 分配使用
-    // 第2～4位参数分别表示：一个完整数据的长度、一组数据的长度、读取位置偏移
-    divide(location: number, size: number, stride: number, offset: number = 0) {
-        useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
-        return this
-    }
-}
-
+// 缓冲区分为两种：
+// 1.缓冲区中保存了包含顶点的数据
+// 2.缓冲区保存了包含顶点的索引值
+
+// 获取一个新的缓冲区
+// isElement默认false，创建第一种缓冲区，为true创建第二种
+const newBuffer = (painter: WebGLRenderingContext) => {
+    return painter.createBuffer()
+}
+
+// 数据写入缓冲区
+// data是一个类型化数组，表示写入的数据
+// usage表示程序如何使用存储在缓冲区的数据
+const writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
+    const TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    painter.bufferData(TYPE, data, usage)
+}
+
+// 使用缓冲区数据
+// location指定待分配的attribute变量的存储位置
+// size每个分量个数
+// type数据类型，应该是以下的某个：
+//      gl.UNSIGNED_BYTE    Uint8Array
+//      gl.SHORT            Int16Array
+//      gl.UNSIGNED_SHORT   Uint16Array
+//      gl.INT              Int32Array
+//      gl.UNSIGNED_INT     Uint32Array
+//      gl.FLOAT            Float32Array
+// stride相邻两个数据项的字节数
+// offset数据的起点字节位置
+// normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
+const useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
+
+    // 把缓冲区对象分配给目标变量
+    painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
+
+    // 连接目标对象和缓冲区对象
+    painter.enableVertexAttribArray(location)
+}
+
+class BufferObject {
+
+    private __painter: WebGLRenderingContext
+    private __isElement: boolean
+
+    private __buffer: WebGLBuffer
+    private __type: number
+    private __fsize: number
+
+    constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
+        this.__painter = painter
+        this.__isElement = isElement
+
+        this.__buffer = newBuffer(painter) as WebGLBuffer
+        this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    }
+
+    // 使用这个缓冲区对象
+    // （先于写入和分配）
+    use() {
+        this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
+        return this
+    }
+
+    // 写入数据
+    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
+        writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
+        this.__fsize = data.BYTES_PER_ELEMENT
+        return this
+    }
+
+    // 分配使用
+    // 第2～4位参数分别表示：一个完整数据的长度、一组数据的长度、读取位置偏移
+    divide(location: number, size: number, stride: number, offset: number = 0) {
+        useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
+        return this
+    }
+}
+
 export default BufferObject

package/src/common/webgl/getWebGLContext.ts

@@ -1,46 +1,46 @@
-import type { WebGLmodeType } from "../../../types/getWebGLContext"
-
-interface OptsType {
-    preserveDrawingBuffer?: boolean
-}
-export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}, mode: WebGLmodeType = "scaleToFill") {
-    const names = ["experimental-webgl", "webkit-3d", "moz-webgl"]
-    let painter = canvas.getContext("webgl", opts) as WebGL2RenderingContext
-    for (let i = 0; i < names.length; i++) {
-        try {
-            painter = canvas.getContext(names[i], opts) as WebGL2RenderingContext
-        } catch (e) { }
-        if (painter) break
-    }
-    if (!painter) throw new Error('Non canvas or browser does not support webgl.')
-
-    const width = painter.canvas.width, height = painter.canvas.height
-
-    let scaleX = scale, scaleY = scale
-    if (mode == "aspectFit") {
-        if (width > height) {
-            scaleX *= height / width
-        } else if (height > width) {
-            scaleY *= width / height
-        }
-    } else if (mode == "aspectFill") {
-        if (width > height) {
-            scaleY *= width / height
-        } else if (height > width) {
-            scaleX *= height / width
-        }
-    }
-
-    const viewWidth = width * scaleX
-    const viewHeight = height * scaleY
-
-    painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight)
-
-    // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/depthFunc
-    painter.depthFunc(painter.LEQUAL)
-
-    // 开启深度计算
-    painter.enable(painter.DEPTH_TEST)
-
-    return painter
+import type { WebGLmodeType } from "../../../types/getWebGLContext"
+
+interface OptsType {
+    preserveDrawingBuffer?: boolean
+}
+export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}, mode: WebGLmodeType = "scaleToFill") {
+    const names = ["experimental-webgl", "webkit-3d", "moz-webgl"]
+    let painter = canvas.getContext("webgl", opts) as WebGL2RenderingContext
+    for (let i = 0; i < names.length; i++) {
+        try {
+            painter = canvas.getContext(names[i], opts) as WebGL2RenderingContext
+        } catch (e) { }
+        if (painter) break
+    }
+    if (!painter) throw new Error('Non canvas or browser does not support webgl.')
+
+    const width = painter.canvas.width, height = painter.canvas.height
+
+    let scaleX = scale, scaleY = scale
+    if (mode == "aspectFit") {
+        if (width > height) {
+            scaleX *= height / width
+        } else if (height > width) {
+            scaleY *= width / height
+        }
+    } else if (mode == "aspectFill") {
+        if (width > height) {
+            scaleY *= width / height
+        } else if (height > width) {
+            scaleX *= height / width
+        }
+    }
+
+    const viewWidth = width * scaleX
+    const viewHeight = height * scaleY
+
+    painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight)
+
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/depthFunc
+    painter.depthFunc(painter.LEQUAL)
+
+    // 开启深度计算
+    painter.enable(painter.DEPTH_TEST)
+
+    return painter
 }

package/src/common/webgl/shader.ts

@@ -1,76 +1,76 @@
-// 着色器分为两类：顶点着色器 + 片段着色器
-// 前者用于定义一个点的特性，比如位置，大小，颜色等
-// 后者用于针对每个片段（可以理解为像素）进行处理
-
-// 着色器采用的语言是：GLSL ES语言
-
-// 把着色器字符串加载成着色器对象
-const loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
-
-    // 创建着色器对象
-    const shader = painter.createShader(type)
-    if (shader == null) throw new Error('Unable to create shader!')
-
-    // 绑定资源
-    painter.shaderSource(shader, source)
-
-    // 编译着色器
-    painter.compileShader(shader)
-
-    // 检测着色器编译是否成功
-    if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
-        throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader))
-
-    return shader
-}
-
-//  建立着色器
-const useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
-
-    // 分别加载顶点着色器对象和片段着色器对象
-    const vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
-    const fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
-
-    // 创建一个着色器程序
-    const glProgram = painter.createProgram() as WebGLProgram
-
-    // 把前面创建的两个着色器对象添加到着色器程序中
-    painter.attachShader(glProgram, vertexShader)
-    painter.attachShader(glProgram, fragmentShader)
-
-    // 把着色器程序链接成一个完整的程序
-    painter.linkProgram(glProgram)
-
-    // 检测着色器程序链接是否成功
-    if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
-        throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram))
-
-    return glProgram
-}
-
-class ShaderObject {
-
-    private __painter: WebGLRenderingContext
-
-    program: WebGLProgram
-
-    constructor(painter: WebGLRenderingContext) {
-        this.__painter = painter
-    }
-
-    // 使用这个程序
-    // （后于编译）
-    use() {
-        this.__painter.useProgram(this.program)
-        return this
-    }
-
-    // 编译着色器程序
-    compile(vshaderSource: string, fshaderSource: string) {
-        this.program = useShader(this.__painter, vshaderSource, fshaderSource) as WebGLProgram
-        return this
-    }
-
-}
-
+// 着色器分为两类：顶点着色器 + 片段着色器
+// 前者用于定义一个点的特性，比如位置，大小，颜色等
+// 后者用于针对每个片段（可以理解为像素）进行处理
+
+// 着色器采用的语言是：GLSL ES语言
+
+// 把着色器字符串加载成着色器对象
+const loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
+
+    // 创建着色器对象
+    const shader = painter.createShader(type)
+    if (shader == null) throw new Error('Unable to create shader!')
+
+    // 绑定资源
+    painter.shaderSource(shader, source)
+
+    // 编译着色器
+    painter.compileShader(shader)
+
+    // 检测着色器编译是否成功
+    if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
+        throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader))
+
+    return shader
+}
+
+//  建立着色器
+const useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
+
+    // 分别加载顶点着色器对象和片段着色器对象
+    const vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
+    const fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
+
+    // 创建一个着色器程序
+    const glProgram = painter.createProgram() as WebGLProgram
+
+    // 把前面创建的两个着色器对象添加到着色器程序中
+    painter.attachShader(glProgram, vertexShader)
+    painter.attachShader(glProgram, fragmentShader)
+
+    // 把着色器程序链接成一个完整的程序
+    painter.linkProgram(glProgram)
+
+    // 检测着色器程序链接是否成功
+    if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
+        throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram))
+
+    return glProgram
+}
+
+class ShaderObject {
+
+    private __painter: WebGLRenderingContext
+
+    program: WebGLProgram
+
+    constructor(painter: WebGLRenderingContext) {
+        this.__painter = painter
+    }
+
+    // 使用这个程序
+    // （后于编译）
+    use() {
+        this.__painter.useProgram(this.program)
+        return this
+    }
+
+    // 编译着色器程序
+    compile(vshaderSource: string, fshaderSource: string) {
+        this.program = useShader(this.__painter, vshaderSource, fshaderSource) as WebGLProgram
+        return this
+    }
+
+}
+
 export default ShaderObject

package/src/common/webgl/texture.ts

@@ -1,98 +1,98 @@
-// 初始化一个纹理对象
-// type = gl.TEXTURE_2D 二维纹理
-// type = gl.TEXTURE_CUBE_MAP 立方体纹理
-// unit表示开启的纹理单元编号
-const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
-
-    // 创建纹理对象
-    const texture = painter.createTexture()
-
-    // 开启纹理单元，unit表示开启的编号
-    painter.activeTexture(painter['TEXTURE' + unit])
-
-    // 绑定纹理对象到目标上
-    painter.bindTexture(type, texture)
-
-    return texture
-}
-
-// 链接资源图片
-// level默认传入0即可，和金字塔纹理有关
-// format表示图像的内部格式：
-//      gl.RGB(红绿蓝)
-//      gl.RGBA(红绿蓝透明度)
-//      gl.ALPHA(0.0,0.0,0.0,透明度)
-//      gl.LUMINANCE(L、L、L、1L:流明)
-//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
-// textureType表示纹理数据的格式：
-//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
-//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
-//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
-//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
-const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
-    painter.texImage2D(type, level, format, format, textureType, image)
-}
-
-const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
-
-    const types = [
-        painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
-        painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
-        painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
-    ]
-    let target: number
-
-    for (let i = 0; i < types.length; i++) {
-        if (images[i]) {
-            target = types[i]
-            painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
-            painter.bindTexture(type, texture)
-            painter.texImage2D(target, level, format, format, textureType, images[i])
-        }
-    }
-
-    painter.generateMipmap(type)
-}
-
-class TextureObject {
-
-    private __painter: WebGLRenderingContext
-    private __type: number
-
-    private __texture: WebGLTexture
-
-    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
-        this.__painter = painter
-        this.__type = {
-            "2d": painter.TEXTURE_2D,
-            "cube": painter.TEXTURE_CUBE_MAP
-        }[type] as number
-
-        // 创建纹理
-        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
-
-        // 配置纹理
-        painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
-        painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
-        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
-        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
-    }
-
-    // 链接图片资源(单一)
-    useImage(image: TexImageSource) {
-        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
-        return this
-    }
-
-    // 链接图片资源（多张）
-    useCube(images: TexImageSource[], width: number, height: number) {
-        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
-        return this
-    }
-
-}
-
+// 初始化一个纹理对象
+// type = gl.TEXTURE_2D 二维纹理
+// type = gl.TEXTURE_CUBE_MAP 立方体纹理
+// unit表示开启的纹理单元编号
+const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
+
+    // 创建纹理对象
+    const texture = painter.createTexture()
+
+    // 开启纹理单元，unit表示开启的编号
+    painter.activeTexture(painter['TEXTURE' + unit])
+
+    // 绑定纹理对象到目标上
+    painter.bindTexture(type, texture)
+
+    return texture
+}
+
+// 链接资源图片
+// level默认传入0即可，和金字塔纹理有关
+// format表示图像的内部格式：
+//      gl.RGB(红绿蓝)
+//      gl.RGBA(红绿蓝透明度)
+//      gl.ALPHA(0.0,0.0,0.0,透明度)
+//      gl.LUMINANCE(L、L、L、1L:流明)
+//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
+// textureType表示纹理数据的格式：
+//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
+//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
+//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
+//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
+const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
+    painter.texImage2D(type, level, format, format, textureType, image)
+}
+
+const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
+
+    const types = [
+        painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
+        painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
+        painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
+    ]
+    let target: number
+
+    for (let i = 0; i < types.length; i++) {
+        if (images[i]) {
+            target = types[i]
+            painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
+            painter.bindTexture(type, texture)
+            painter.texImage2D(target, level, format, format, textureType, images[i])
+        }
+    }
+
+    painter.generateMipmap(type)
+}
+
+class TextureObject {
+
+    private __painter: WebGLRenderingContext
+    private __type: number
+
+    private __texture: WebGLTexture
+
+    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
+        this.__painter = painter
+        this.__type = {
+            "2d": painter.TEXTURE_2D,
+            "cube": painter.TEXTURE_CUBE_MAP
+        }[type] as number
+
+        // 创建纹理
+        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
+
+        // 配置纹理
+        painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
+        painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
+        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
+        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
+    }
+
+    // 链接图片资源(单一)
+    useImage(image: TexImageSource) {
+        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
+        return this
+    }
+
+    // 链接图片资源（多张）
+    useCube(images: TexImageSource[], width: number, height: number) {
+        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
+        return this
+    }
+
+}
+
 export default TextureObject