vislite 0.6.0-alpha.2 → 0.6.0

package/src/common/webgl/doDraw.ts

@@ -1,109 +1,109 @@
-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) {
-    const 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) {
-
-        const size = (mesh.material.cube.right.image.value as any).width
-
-        painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
-
-        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) {
+    const 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) {
+
+        const size = (mesh.material.cube.right.image.value as any).width
+
+        painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
+
+        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) {
-    const width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
-
-    const 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
-
-        const pixelR = pixels[4 * (y * width + x)]
-        const pixelG = pixels[4 * (y * width + x) + 1]
-        const pixelB = pixels[4 * (y * width + x) + 2]
-        const pixelA = pixels[4 * (y * width + x) + 3]
-
-        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
-    }
+export default function (painter: WebGLRenderingContext) {
+    const width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
+
+    const 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
+
+        const pixelR = pixels[4 * (y * width + x)]
+        const pixelG = pixels[4 * (y * width + x) + 1]
+        const pixelB = pixels[4 * (y * width + x) + 2]
+        const pixelA = pixels[4 * (y * width + x) + 3]
+
+        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
+    }
 }

package/src/common/webgl/getShader.ts

@@ -1,49 +1,49 @@
-import type { meshType } from '../../../types/Object3D'
-
-import ShaderObject from './shader'
-
-import vsColor from '../../shader/vsColor.c'
-import vsColors from '../../shader/vsColors.c'
-import vsImage from '../../shader/vsImage.c'
-import vsCube from '../../shader/vsCube.c'
-
-import fsColor from '../../shader/fsColor.c'
-import fsColors from '../../shader/fsColors.c'
-import fsImage from '../../shader/fsImage.c'
-import fsCube from '../../shader/fsCube.c'
-
-const shaders = {}
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
-
-    const uniqueName = type +
-        (mesh.material.color ? "1" : "0") +
-        (mesh.material.colors ? "1" : "0") +
-        (mesh.material.image ? "1" : "0") +
-        (mesh.material.cube ? "1" : "0")
-    if (shaders[uniqueName]) return shaders[uniqueName].use()
-
-    // 顶点着色器
-    const vertexShader = {
-        [type + "1000"]: vsColor,
-        [type + "0100"]: vsColors,
-        [type + "0010"]: vsImage,
-        [type + "0001"]: vsCube
-    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
-    uniform mat4 u_matrix_world;
-    uniform mat4 u_matrix_mesh;
-    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
-
-    // 片段（元）着色器
-    const fragmentShader = {
-        [type + "1000"]: fsColor,
-        [type + "0100"]: fsColors,
-        [type + "0010"]: fsImage,
-        [type + "0001"]: fsCube
-    }[uniqueName]
-
-    // 启用着色器
-    const shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
-
-    shaders[uniqueName] = shader
-    return shader
+import type { meshType } from '../../../types/Object3D'
+
+import ShaderObject from './shader'
+
+import vsColor from '../../shader/vsColor.c'
+import vsColors from '../../shader/vsColors.c'
+import vsImage from '../../shader/vsImage.c'
+import vsCube from '../../shader/vsCube.c'
+
+import fsColor from '../../shader/fsColor.c'
+import fsColors from '../../shader/fsColors.c'
+import fsImage from '../../shader/fsImage.c'
+import fsCube from '../../shader/fsCube.c'
+
+const shaders = {}
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
+
+    const uniqueName = type +
+        (mesh.material.color ? "1" : "0") +
+        (mesh.material.colors ? "1" : "0") +
+        (mesh.material.image ? "1" : "0") +
+        (mesh.material.cube ? "1" : "0")
+    if (shaders[uniqueName]) return shaders[uniqueName].use()
+
+    // 顶点着色器
+    const vertexShader = {
+        [type + "1000"]: vsColor,
+        [type + "0100"]: vsColors,
+        [type + "0010"]: vsImage,
+        [type + "0001"]: vsCube
+    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
+    uniform mat4 u_matrix_world;
+    uniform mat4 u_matrix_mesh;
+    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
+
+    // 片段（元）着色器
+    const fragmentShader = {
+        [type + "1000"]: fsColor,
+        [type + "0100"]: fsColors,
+        [type + "0010"]: fsImage,
+        [type + "0001"]: fsCube
+    }[uniqueName]
+
+    // 启用着色器
+    const shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
+
+    shaders[uniqueName] = shader
+    return shader
 }

package/src/common/webgl/getTexture.ts

@@ -1,12 +1,12 @@
-import TextureObject from './texture'
-
-const textures = {}
-export default function (type: string, painter: WebGLRenderingContext, kind: string) {
-    const uniqueName = type + "-" + kind
-
-    if (!textures[uniqueName]) {
-        textures[uniqueName] = new TextureObject(painter, kind)
-    }
-
-    return textures[uniqueName]
+import TextureObject from './texture'
+
+const textures = {}
+export default function (type: string, painter: WebGLRenderingContext, kind: string) {
+    const uniqueName = type + "-" + kind
+
+    if (!textures[uniqueName]) {
+        textures[uniqueName] = new TextureObject(painter, kind)
+    }
+
+    return textures[uniqueName]
 }

package/src/common/webgl/getWebGLContext.ts

@@ -1,29 +1,29 @@
-interface OptsType {
-    preserveDrawingBuffer?: boolean
-}
-export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}) {
-    const names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]
-    let painter = null
-    for (let i = 0; i < names.length; i++) {
-        try {
-            painter = canvas.getContext(names[i], opts)
-        } 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
-
-    const viewWidth = width * scale
-    const viewHeight = height * scale
-
-    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
+interface OptsType {
+    preserveDrawingBuffer?: boolean
+}
+export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}) {
+    const names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]
+    let painter = null
+    for (let i = 0; i < names.length; i++) {
+        try {
+            painter = canvas.getContext(names[i], opts)
+        } 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
+
+    const viewWidth = width * scale
+    const viewHeight = height * scale
+
+    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
 }