vislite 0.3.0-alpha.0 → 0.3.0

package/src/common/webgl/doDraw.ts

@@ -20,7 +20,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     // 点数据写入缓冲区
     new BufferObject(painter).use()
         .write(mesh.geometry.attributes.position.array as Float32Array)
-        .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, 3, 0)
+        .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)
@@ -31,7 +31,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     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, 3, 0)
+            .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0)
     }
 
     // 颜色
@@ -45,10 +45,20 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
             , 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.width
+        let size = (mesh.material.cube.right.image.value as any).width
 
         getTexture(type, painter, 'cube').useCube([
             mesh.material.cube.right.image.value,

package/src/common/webgl/getShader.ts

@@ -9,12 +9,13 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
         (mesh.geometry.attributes.normal ? "1" : "0") +
         (mesh.material.image ? "1" : "0") +
         (mesh.material.color ? "1" : "0") +
+        (mesh.material.colors ? "1" : "0") +
         (mesh.material.cube ? "1" : "0")
     if (shaders[uniqueName]) return shaders[uniqueName].use()
 
     // 顶点着色器
     let vertexShader = `
-     attribute vec4 a_position;
+    attribute vec4 a_position;
 
      ${mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : ''}
 
@@ -24,6 +25,8 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
     ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
 
+    ${mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : ''}
+
     void main(){
         vec4 temp = a_position;
 
@@ -43,6 +46,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
         ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}
         ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
+        ${mesh.material.colors ? 'v_color=a_color;' : ''}
      }
  `
 
@@ -54,11 +58,13 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
     ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
     ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
+    ${mesh.material.colors ? 'varying vec4 v_color;' : ''}
 
     void main(){
         ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
         ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
         ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
+        ${mesh.material.colors ? 'gl_FragColor=v_color;' : ''}
     }
  `
 

package/src/common/webgl/index.ts

@@ -165,6 +165,10 @@ class WebGL {
                 mesh.geometry.index.array = new Uint8Array(mesh.geometry.index.array)
             }
 
+            if (mesh.material.colors && Array.isArray(mesh.material.colors.array)) {
+                mesh.material.colors.array = new Float32Array(mesh.material.colors.array)
+            }
+
         }
 
         this.__scene.children.push(object3D)

package/src/interpolation/Cardinal.ts

@@ -46,11 +46,29 @@ class Cardinal implements CardinalType {
             this.__HS.x[flag] = points[flag][0]
 
             // 求点斜率
-            temp = flag < points.length - 1 ?
-                (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
-                (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
 
-            // 求解两个点直接的拟合方程
+            // temp = flag < points.length - 1 ?
+            //     (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
+            //     (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
+
+            // 修复超过界限的值问题
+            // 2023年6月25日 于南京
+            if (flag < points.length - 1) {
+                if (
+                    (points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
+                    (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
+                    points[flag + 1][1] == points[flag][1] ||
+                    points[flag - 1][1] == points[flag][1]
+                ) {
+                    temp = 0
+                } else {
+                    temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0])
+                }
+            } else {
+                temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0])
+            }
+
+            // 求解两个点直接的插值方程
             // 第一个点的前一个点直接取第一个点
             // 最后一个点的后一个点直接取最后一个点
             this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp)

package/types/Buffer.d.ts

@@ -0,0 +1,24 @@
+export default interface BufferType {
+
+    /**
+     * 使用这个缓冲区对象
+     * （先于写入和分配）
+     */
+    use(): this
+
+    /**
+     * 写入数据
+     * @param data 具体的数据内容
+     */
+    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array): this
+
+    /**
+     * 分配使用
+     * @param location 变量位置
+     * @param size 一个数据的长度
+     * @param stride 一组数据的长度(可能包含多组)
+     * @param offset 读取位置偏移
+     */
+    divide(location: number, size: number, stride: number, offset?: number): this
+
+}

package/types/Object3D.d.ts

@@ -52,6 +52,13 @@ export interface meshType {
             alpha: number
         }
 
+        // 多颜色
+        colors?: {
+            array: number[] | Float32Array
+            count: number
+            itemSize: number
+        }
+
         // 立方体纹理
         cube?: {
             left?: {

package/types/Shader.d.ts

@@ -0,0 +1,16 @@
+export default interface ShaderType {
+
+    /**
+     * 使用这个程序
+     * （后于编译）
+     */
+    use(): this
+
+    /**
+     * 编译着色器程序
+     * @param vshaderSource 顶点着色器
+     * @param fshaderSource 片段（元）着色器
+     */
+    compile(vshaderSource: string, fshaderSource: string): this
+
+}

package/types/Texture.d.ts

@@ -0,0 +1,17 @@
+export default interface TextureType {
+
+    /**
+     * 链接图片资源(单一)
+     * @param image 纹理图片
+     */
+    useImage(image: TexImageSource): this
+
+    /**
+     * 链接图片资源（多张）
+     * @param images 纹理图片集
+     * @param width 图片宽
+     * @param height 图片高
+     */
+    useCube(images: TexImageSource[], width: number, height: number): this
+
+}

package/types/getWebGLContext.d.ts

@@ -0,0 +1,3 @@
+export default interface getWebGLContextType {
+    (el: HTMLElement | null, scale?: number): WebGLRenderingContext
+}

package/types/index.d.ts

@@ -12,6 +12,11 @@ import SVGType from './SVG'
 import CanvasType from './Canvas'
 import WebGLType from './WebGL'
 
+import getWebGLContextType from './getWebGLContext'
+import ShaderType from './Shader'
+import BufferType from './Buffer'
+import TextureType from './Texture'
+
 import MapType from './Map'
 
 import viewHandlerType from './viewHandler'
@@ -40,6 +45,17 @@ interface NewWebGLType extends WebGLType {
     new(el: HTMLElement | null): this
 }
 
+// WebGL
+interface NewShaderType extends ShaderType {
+    new(painter: WebGLRenderingContext): this
+}
+interface NewBufferType extends BufferType {
+    new(painter: WebGLRenderingContext, isElement?: boolean): this
+}
+interface NewTextureType extends TextureType {
+    new(painter: WebGLRenderingContext, type: string, unit?: number): this
+}
+
 // 投影
 interface NewEoapType extends MapType {
     new(scale?: number, center?: number[]): this
@@ -68,6 +84,12 @@ export default class VISLite {
     static Canvas: NewCanvasType
     static WebGL: NewWebGLType
 
+    // WebGL
+    static getWebGLContext: getWebGLContextType
+    static Shader: NewShaderType
+    static Buffer: NewBufferType
+    static Texture: NewTextureType
+
     // 投影
     static Eoap: NewEoapType
     static Mercator: NewMercatorType
@@ -94,6 +116,12 @@ export let SVG: NewSVGType
 export let Canvas: NewCanvasType
 export let WebGL: NewWebGLType
 
+// WebGL
+export let getWebGLContext: getWebGLContextType
+export let Shader: NewShaderType
+export let Buffer: NewBufferType
+export let Texture: NewTextureType
+
 // 投影
 export let Eoap: NewEoapType
 export let Mercator: NewMercatorType