vislite 0.3.0 → 0.3.1

package/src/common/svg/tool.ts

@@ -1,44 +1,44 @@
-import { XLINK_ATTRIBUTE } from "./dictionary"
-import SVGConfigType from '../../../types/SVGConfig'
-
-// 新建节点
-export function toNode(tagname: string) {
-    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
-}
-
-// 设置属性
-let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
-
-    // 需要使用xlink命名空间的xml属性
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
-    }
-
-    // 否则
-    else {
-        el.setAttribute(key, value + "")
-    }
-}
-export let setAttribute = _setAttribute
-
-// 获取属性
-export function getAttribute(el: SVGElement, key: string) {
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
-    return el.getAttribute(key)
-}
-
-export function full(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+import { XLINK_ATTRIBUTE } from "./dictionary"
+import SVGConfigType from '../../../types/SVGConfig'
+
+// 新建节点
+export function toNode(tagname: string) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
+}
+
+// 设置属性
+let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
+
+    // 需要使用xlink命名空间的xml属性
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
+    }
+
+    // 否则
+    else {
+        el.setAttribute(key, value + "")
+    }
+}
+export let setAttribute = _setAttribute
+
+// 获取属性
+export function getAttribute(el: SVGElement, key: string) {
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
+    return el.getAttribute(key)
+}
+
+export function full(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", "none")
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
 }

package/src/common/webgl/buffer.ts

@@ -1,80 +1,80 @@
-// 缓冲区分为两种：
-// 1.缓冲区中保存了包含顶点的数据
-// 2.缓冲区保存了包含顶点的索引值
-
-// 获取一个新的缓冲区
-// isElement默认false，创建第一种缓冲区，为true创建第二种
-let newBuffer = (painter: WebGLRenderingContext) => {
-    return painter.createBuffer()
-}
-
-// 数据写入缓冲区
-// data是一个类型化数组，表示写入的数据
-// usage表示程序如何使用存储在缓冲区的数据
-let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
-    let 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]区间
-let 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)
-        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创建第二种
+let newBuffer = (painter: WebGLRenderingContext) => {
+    return painter.createBuffer()
+}
+
+// 数据写入缓冲区
+// data是一个类型化数组，表示写入的数据
+// usage表示程序如何使用存储在缓冲区的数据
+let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
+    let 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]区间
+let 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)
+        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/doDraw.ts

@@ -1,107 +1,107 @@
-import BufferObject from './buffer'
-
-import getTexture from './getTexture'
-import getShader from './getShader'
-
-interface MeshWorldType {
-    matrix: number[]
-}
-
-interface GlobalWorldType {
-    matrix: number[]
-    proporion: number[]
-}
-
-import { meshType } from '../../../types/Object3D'
-
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
-    let shader = getShader(type, painter, mesh)
-
-    // 点数据写入缓冲区
-    new BufferObject(painter).use()
-        .write(mesh.geometry.attributes.position.array as Float32Array)
-        .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, mesh.geometry.attributes.position.itemSize, 0)
-
-    // 写入矩阵
-    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix)
-    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion)
-    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix)
-
-    // 如果有法向量数据
-    if (mesh.geometry.attributes.normal) {
-        new BufferObject(painter).use()
-            .write(mesh.geometry.attributes.normal.array as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0)
-    }
-
-    // 颜色
-    if ("color" in mesh.material) {
-
-        // 写入颜色
-        painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
-            , mesh.material.color.r
-            , mesh.material.color.g
-            , mesh.material.color.b
-            , mesh.material.color.alpha)
-    }
-
-    // 多颜色
-    if ("colors" in mesh.material) {
-
-        // 写入颜色序列
-        new BufferObject(painter).use()
-            .write(mesh.material.colors.array as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
-
-    }
-
-    // 立方纹理
-    else if ("cube" in mesh.material) {
-
-        let size = (mesh.material.cube.right.image.value as any).width
-
-        getTexture(type, painter, 'cube').useCube([
-            mesh.material.cube.right.image.value,
-            mesh.material.cube.left.image.value,
-            mesh.material.cube.top.image.value,
-            mesh.material.cube.bottom.image.value,
-            mesh.material.cube.far.image.value,
-            mesh.material.cube.near.image.value
-        ], size, size)
-
-    }
-
-    // 二维纹理
-    else if ("image" in mesh.material) {
-
-        painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
-
-        new BufferObject(painter).use()
-            .write(mesh.geometry.attributes.uv.array as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
-
-        getTexture(type, painter, '2d').useImage(mesh.material.image.value)
-
-    }
-
-    // 如果使用了索引
-    if (mesh.geometry.index) {
-
-        // 索引数据
-        new BufferObject(painter, true).use()
-            .write(mesh.geometry.index.array as Uint8Array)
-
-        // 绘制
-        painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0)
-
-    }
-
-    // 否则
-    else {
-
-        // 绘制
-        painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count)
-
-    }
-
+import BufferObject from './buffer'
+
+import getTexture from './getTexture'
+import getShader from './getShader'
+
+interface MeshWorldType {
+    matrix: number[]
+}
+
+interface GlobalWorldType {
+    matrix: number[]
+    proporion: number[]
+}
+
+import { meshType } from '../../../types/Object3D'
+
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
+    let shader = getShader(type, painter, mesh)
+
+    // 点数据写入缓冲区
+    new BufferObject(painter).use()
+        .write(mesh.geometry.attributes.position.array as Float32Array)
+        .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, mesh.geometry.attributes.position.itemSize, 0)
+
+    // 写入矩阵
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix)
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion)
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix)
+
+    // 如果有法向量数据
+    if (mesh.geometry.attributes.normal) {
+        new BufferObject(painter).use()
+            .write(mesh.geometry.attributes.normal.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0)
+    }
+
+    // 颜色
+    if ("color" in mesh.material) {
+
+        // 写入颜色
+        painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
+            , mesh.material.color.r
+            , mesh.material.color.g
+            , mesh.material.color.b
+            , mesh.material.color.alpha)
+    }
+
+    // 多颜色
+    if ("colors" in mesh.material) {
+
+        // 写入颜色序列
+        new BufferObject(painter).use()
+            .write(mesh.material.colors.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
+
+    }
+
+    // 立方纹理
+    else if ("cube" in mesh.material) {
+
+        let size = (mesh.material.cube.right.image.value as any).width
+
+        getTexture(type, painter, 'cube').useCube([
+            mesh.material.cube.right.image.value,
+            mesh.material.cube.left.image.value,
+            mesh.material.cube.top.image.value,
+            mesh.material.cube.bottom.image.value,
+            mesh.material.cube.far.image.value,
+            mesh.material.cube.near.image.value
+        ], size, size)
+
+    }
+
+    // 二维纹理
+    else if ("image" in mesh.material) {
+
+        painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
+
+        new BufferObject(painter).use()
+            .write(mesh.geometry.attributes.uv.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
+
+        getTexture(type, painter, '2d').useImage(mesh.material.image.value)
+
+    }
+
+    // 如果使用了索引
+    if (mesh.geometry.index) {
+
+        // 索引数据
+        new BufferObject(painter, true).use()
+            .write(mesh.geometry.index.array as Uint8Array)
+
+        // 绘制
+        painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0)
+
+    }
+
+    // 否则
+    else {
+
+        // 绘制
+        painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count)
+
+    }
+
 }

package/src/common/webgl/getColorFactory.ts

@@ -1,27 +1,27 @@
-export default function (painter: WebGLRenderingContext) {
-    let width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
-
-    let pixels = new Uint8Array(
-        4 * width * height
-    )
-    painter.readPixels(
-        0,
-        0,
-        width,
-        height,
-        painter.RGBA,
-        painter.UNSIGNED_BYTE,
-        pixels
-    )
-
-    return function (x: number, y: number): string {
-        y = height - y
-
-        let pixelR = pixels[4 * (y * width + x)]
-        let pixelG = pixels[4 * (y * width + x) + 1]
-        let pixelB = pixels[4 * (y * width + x) + 2]
-        let pixelA = pixels[4 * (y * width + x) + 3]
-
-        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
-    }
+export default function (painter: WebGLRenderingContext) {
+    let width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
+
+    let pixels = new Uint8Array(
+        4 * width * height
+    )
+    painter.readPixels(
+        0,
+        0,
+        width,
+        height,
+        painter.RGBA,
+        painter.UNSIGNED_BYTE,
+        pixels
+    )
+
+    return function (x: number, y: number): string {
+        y = height - y
+
+        let pixelR = pixels[4 * (y * width + x)]
+        let pixelG = pixels[4 * (y * width + x) + 1]
+        let pixelB = pixels[4 * (y * width + x) + 2]
+        let pixelA = pixels[4 * (y * width + x) + 3]
+
+        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
+    }
 }