vislite 0.5.0 → 0.5.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/.editorconfig +18 -18
  2. package/AUTHORS.txt +6 -6
  3. package/CHANGELOG +5 -0
  4. package/LICENSE +20 -20
  5. package/README.md +69 -69
  6. package/miniprogram/ui-canvas/index.js +107 -107
  7. package/miniprogram/ui-canvas/index.json +4 -4
  8. package/miniprogram/ui-canvas/index.wxml +4 -4
  9. package/miniprogram/ui-canvas/index.wxss +5 -5
  10. package/package/Buffer/index.ts +2 -2
  11. package/package/Canvas/index.ts +2 -2
  12. package/package/Cardinal/index.ts +2 -2
  13. package/package/Eoap/index.ts +2 -2
  14. package/package/Hermite/index.ts +2 -2
  15. package/package/Matrix4/index.ts +2 -2
  16. package/package/Mercator/index.ts +2 -2
  17. package/package/OralCanvas/index.ts +2 -2
  18. package/package/OralWebGL/index.ts +2 -2
  19. package/package/SVG/index.ts +2 -2
  20. package/package/Shader/index.ts +39 -39
  21. package/package/Texture/index.ts +2 -2
  22. package/package/TreeLayout/index.ts +2 -2
  23. package/package/WebGL/index.ts +2 -2
  24. package/package/animation/index.ts +2 -2
  25. package/package/formatColor/index.ts +2 -2
  26. package/package/getLoopColors/index.ts +2 -2
  27. package/package/getWebGLContext/index.ts +39 -39
  28. package/package/resizeObserver/index.ts +2 -2
  29. package/package/rotate/index.ts +2 -2
  30. package/package/ruler/index.ts +2 -2
  31. package/package/throttle/index.ts +2 -2
  32. package/package/viewHandler/index.ts +2 -2
  33. package/package.json +1 -1
  34. package/src/Canvas.ts +67 -67
  35. package/src/Matrix4/move.ts +12 -12
  36. package/src/Matrix4/rotate.ts +15 -15
  37. package/src/Matrix4/scale.ts +11 -11
  38. package/src/Matrix4/transform.ts +64 -64
  39. package/src/SVG.ts +24 -24
  40. package/src/WebGL.ts +66 -66
  41. package/src/animation.ts +98 -98
  42. package/src/common/assemble.ts +22 -22
  43. package/src/common/canvas/arc.ts +50 -50
  44. package/src/common/canvas/config.ts +158 -158
  45. package/src/common/canvas/gradient.ts +29 -29
  46. package/src/common/canvas/index.ts +168 -168
  47. package/src/common/canvas/painter.ts +426 -426
  48. package/src/common/canvas/texts.ts +18 -18
  49. package/src/common/mergeOption.ts +6 -6
  50. package/src/common/setStyle.ts +5 -5
  51. package/src/common/svg/config.ts +174 -174
  52. package/src/common/svg/tool.ts +44 -44
  53. package/src/common/tree/index.ts +25 -25
  54. package/src/common/tree/toInnerTree.ts +56 -56
  55. package/src/common/tree/toPlainTree.ts +131 -131
  56. package/src/common/webgl/buffer.ts +79 -79
  57. package/src/common/webgl/doDraw.ts +108 -108
  58. package/src/common/webgl/getColorFactory.ts +26 -26
  59. package/src/common/webgl/getShader.ts +48 -48
  60. package/src/common/webgl/getTexture.ts +11 -11
  61. package/src/common/webgl/getWebGLContext.ts +27 -27
  62. package/src/common/webgl/index.ts +223 -223
  63. package/src/common/webgl/shader.ts +75 -75
  64. package/src/common/webgl/texture.ts +96 -96
  65. package/src/formatColor.ts +44 -44
  66. package/src/getLoopColors.ts +42 -42
  67. package/src/interpolation/Cardinal.ts +110 -110
  68. package/src/interpolation/Hermite.ts +65 -65
  69. package/src/resizeObserver.ts +36 -36
  70. package/src/ruler.ts +188 -188
  71. package/src/shader/fsColor.c +7 -7
  72. package/src/shader/fsColors.c +7 -7
  73. package/src/shader/fsCube.c +8 -8
  74. package/src/shader/fsImage.c +8 -8
  75. package/src/shader/vsColor.c +17 -17
  76. package/src/shader/vsColors.c +13 -13
  77. package/src/shader/vsCube.c +13 -13
  78. package/src/shader/vsImage.c +13 -13
  79. package/src/throttle.ts +51 -51
  80. package/src/viewHandler.ts +158 -158
  81. package/types/Buffer.d.ts +23 -23
  82. package/types/Canvas.d.ts +300 -300
  83. package/types/CanvasOption.d.ts +7 -7
  84. package/types/Cardinal.d.ts +13 -13
  85. package/types/Gradient.d.ts +14 -14
  86. package/types/Hermite.d.ts +18 -18
  87. package/types/Object3D.d.ts +114 -114
  88. package/types/SVGConfig.d.ts +76 -76
  89. package/types/Scene3D.d.ts +6 -6
  90. package/types/Shader.d.ts +21 -21
  91. package/types/Texture.d.ts +16 -16
  92. package/types/Tree.d.ts +69 -69
  93. package/types/TreeConfig.d.ts +24 -24
  94. package/types/TreeOption.d.ts +48 -48
  95. package/types/WebGL.d.ts +38 -38
  96. package/types/WebGLOption.d.ts +7 -7
  97. package/types/animation.d.ts +6 -6
  98. package/types/formatColor.d.ts +2 -2
  99. package/types/getLoopColors.d.ts +2 -2
  100. package/types/getWebGLContext.d.ts +2 -2
  101. package/types/painterConfig.d.ts +2 -2
  102. package/types/resizeObserver.d.ts +2 -2
  103. package/types/ruler.d.ts +7 -7
  104. package/types/throttle.d.ts +4 -4
  105. package/types/throttleOption.d.ts +21 -21
  106. package/types/viewHandler.d.ts +13 -13
  107. package/uni-app/ui-canvas.vue +226 -222
  108. package/lib/Buffer/index.umd.js +0 -55
  109. package/lib/Buffer/index.umd.min.js +0 -11
  110. package/lib/Canvas/index.umd.js +0 -721
  111. package/lib/Canvas/index.umd.min.js +0 -11
  112. package/lib/Cardinal/index.umd.js +0 -112
  113. package/lib/Cardinal/index.umd.min.js +0 -11
  114. package/lib/Eoap/index.umd.js +0 -53
  115. package/lib/Eoap/index.umd.min.js +0 -11
  116. package/lib/Geometry/index.umd.js +0 -205
  117. package/lib/Geometry/index.umd.min.js +0 -11
  118. package/lib/Hermite/index.umd.js +0 -55
  119. package/lib/Hermite/index.umd.min.js +0 -11
  120. package/lib/Matrix4/index.umd.js +0 -146
  121. package/lib/Matrix4/index.umd.min.js +0 -11
  122. package/lib/Mercator/index.umd.js +0 -39
  123. package/lib/Mercator/index.umd.min.js +0 -11
  124. package/lib/OralCanvas/index.es.js +0 -657
  125. package/lib/OralCanvas/index.es.min.js +0 -11
  126. package/lib/OralWebGL/index.es.js +0 -611
  127. package/lib/OralWebGL/index.es.min.js +0 -11
  128. package/lib/SVG/index.umd.js +0 -475
  129. package/lib/SVG/index.umd.min.js +0 -11
  130. package/lib/Shader/index.umd.js +0 -134
  131. package/lib/Shader/index.umd.min.js +0 -11
  132. package/lib/Texture/index.umd.js +0 -72
  133. package/lib/Texture/index.umd.min.js +0 -11
  134. package/lib/TreeLayout/index.umd.js +0 -430
  135. package/lib/TreeLayout/index.umd.min.js +0 -11
  136. package/lib/WebGL/index.umd.js +0 -684
  137. package/lib/WebGL/index.umd.min.js +0 -11
  138. package/lib/animation/index.umd.js +0 -91
  139. package/lib/animation/index.umd.min.js +0 -11
  140. package/lib/formatColor/index.umd.js +0 -59
  141. package/lib/formatColor/index.umd.min.js +0 -11
  142. package/lib/getLoopColors/index.umd.js +0 -55
  143. package/lib/getLoopColors/index.umd.min.js +0 -11
  144. package/lib/getWebGLContext/index.umd.js +0 -65
  145. package/lib/getWebGLContext/index.umd.min.js +0 -11
  146. package/lib/index.umd.js +0 -2834
  147. package/lib/index.umd.min.js +0 -11
  148. package/lib/resizeObserver/index.umd.js +0 -48
  149. package/lib/resizeObserver/index.umd.min.js +0 -11
  150. package/lib/rotate/index.umd.js +0 -27
  151. package/lib/rotate/index.umd.min.js +0 -11
  152. package/lib/ruler/index.umd.js +0 -145
  153. package/lib/ruler/index.umd.min.js +0 -11
  154. package/lib/throttle/index.umd.js +0 -70
  155. package/lib/throttle/index.umd.min.js +0 -11
  156. package/lib/viewHandler/index.umd.js +0 -139
  157. package/lib/viewHandler/index.umd.min.js +0 -11
@@ -1,132 +1,132 @@
1
- import type TreeConfigType from '../../../types/TreeConfig'
2
-
3
- import toInnerTree from './toInnerTree'
4
-
5
- // 可以传递任意格式的树原始数据
6
- // 只要配置对应的解析方法即可
7
- export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
8
- let treeData = toInnerTree(initTree, config)
9
-
10
- let alltreedata = treeData.value // 维护的树
11
- let rootid = treeData.rid // 根结点ID
12
-
13
- if (treeData.num == 1) {
14
- alltreedata[rootid].left = 0.5
15
- alltreedata[rootid].top = 0.5
16
- alltreedata[rootid].show = true
17
- return {
18
- deep: 1,
19
- node: alltreedata,
20
- root: rootid,
21
- size: 1
22
- }
23
- } else {
24
-
25
- let beforeDis = [], size = 0, maxDeep = 0
26
-
27
- if (noOpens[rootid]) {
28
- alltreedata[rootid].left = 0.5
29
- alltreedata[rootid].top = 0.5
30
- alltreedata[rootid].show = true
31
-
32
- size = 1
33
- } else {
34
- ; (function positionCalc(pNode, deep) {
35
-
36
- if (deep > maxDeep) maxDeep = deep
37
-
38
- let flag: number = 0
39
- if (!noOpens[pNode.id]) {
40
-
41
- for (flag = 0; flag < pNode.children.length; flag++)
42
-
43
- // 因为全部的子结点的位置确定了,父结点的y位置就是子结点的中间位置
44
- // 因此有子结点的,先计算子结点
45
- positionCalc(alltreedata[pNode.children[flag]], deep + 1)
46
-
47
- }
48
-
49
- // left的位置比较简单,deep从0开始编号
50
- // 比如deep=0,第一层,left=0+0.5=0.5,也就是根结点
51
- alltreedata[pNode.id].left = deep + 0.5
52
- if (flag == 0) {
53
-
54
- // beforeDis是一个数组,用以记录每一层此刻top下边缘(每一层是从上到下)
55
- // 比如一层的第一个,top值最小可以取top=0.5
56
- // 为了方便计算,beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
57
- // 因此设置最低上边缘为-0.5
58
- if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
59
- // 父边缘同意的进行初始化
60
- if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
61
-
62
- // 添加的新结点top值第一种求法:本层上边缘+1(比如上边缘是-0.5,那么top最小是top=-0.5+1=0.5)
63
- alltreedata[pNode.id].top = beforeDis[deep] + 1
64
-
65
- let pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
66
- // 计算的原则是:如果第一种可行,选择第一种,否则必须选择第二种
67
- // 判断第一种是否可行的方法就是:如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
68
- if (pTop - 1 < beforeDis[deep - 1])
69
- // 必须保证父亲结点和父亲的前一个兄弟保存1的距离,至少
70
- // 添加的新结点top值的第二种求法:根据孩子取孩子结点的中心top
71
- alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
72
-
73
- } else {
74
-
75
- // 此刻flag!=0
76
- // 意味着结点有孩子,那么问题就解决了,直接取孩子的中间即可
77
- // 其实,flag==0的分支计算的就是孩子,是没有孩子的叶结点,那是关键
78
- alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
79
- }
80
-
81
- // 因为计算孩子的时候
82
- // 无法掌握父辈兄弟的情况
83
- // 可能会出现父亲和兄弟重叠问题
84
- if (alltreedata[pNode.id].top <= beforeDis[deep]) {
85
- let needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
86
- (function doUp(_pid: number | string, _deep: number) {
87
- alltreedata[_pid].top += needUp;
88
- if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
89
-
90
- for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
91
- doUp(alltreedata[_pid].children[_flag], _deep + 1)
92
- }
93
- })(pNode.id, deep)
94
- }
95
-
96
- // 计算好一个结点后,需要更新此刻该层的上边缘
97
- beforeDis[deep] = alltreedata[pNode.id].top
98
-
99
- // size在每次计算一个结点后更新,是为了最终绘图的时候知道树有多宽(此处应该叫高)
100
- if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
101
-
102
- })(alltreedata[rootid], 0)
103
-
104
- }
105
- // 对于不显示的,需要标记一下
106
- for (let key in noOpens) {
107
- if (noOpens[key]) {
108
- alltreedata[key].isOpen = false
109
- ; (function updateHidden(pid, left, top) {
110
- for (let index = 0; index < alltreedata[pid].children.length; index++) {
111
- alltreedata[alltreedata[pid].children[index]].left = left
112
- alltreedata[alltreedata[pid].children[index]].top = top
113
- alltreedata[alltreedata[pid].children[index]].show = false
114
-
115
- updateHidden(alltreedata[pid].children[index], left, top)
116
- }
117
- })(key, alltreedata[key].left, alltreedata[key].top)
118
- }
119
- }
120
-
121
- // 传递的参数分别表示:记录了位置信息的树结点集合、根结点ID和树的宽
122
- return {
123
- "node": alltreedata,
124
- "root": rootid,
125
- "size": size,
126
- "deep": maxDeep + 1
127
- }
128
-
129
- }
130
-
131
-
1
+ import type TreeConfigType from '../../../types/TreeConfig'
2
+
3
+ import toInnerTree from './toInnerTree'
4
+
5
+ // 可以传递任意格式的树原始数据
6
+ // 只要配置对应的解析方法即可
7
+ export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
8
+ let treeData = toInnerTree(initTree, config)
9
+
10
+ let alltreedata = treeData.value // 维护的树
11
+ let rootid = treeData.rid // 根结点ID
12
+
13
+ if (treeData.num == 1) {
14
+ alltreedata[rootid].left = 0.5
15
+ alltreedata[rootid].top = 0.5
16
+ alltreedata[rootid].show = true
17
+ return {
18
+ deep: 1,
19
+ node: alltreedata,
20
+ root: rootid,
21
+ size: 1
22
+ }
23
+ } else {
24
+
25
+ let beforeDis = [], size = 0, maxDeep = 0
26
+
27
+ if (noOpens[rootid]) {
28
+ alltreedata[rootid].left = 0.5
29
+ alltreedata[rootid].top = 0.5
30
+ alltreedata[rootid].show = true
31
+
32
+ size = 1
33
+ } else {
34
+ ; (function positionCalc(pNode, deep) {
35
+
36
+ if (deep > maxDeep) maxDeep = deep
37
+
38
+ let flag: number = 0
39
+ if (!noOpens[pNode.id]) {
40
+
41
+ for (flag = 0; flag < pNode.children.length; flag++)
42
+
43
+ // 因为全部的子结点的位置确定了,父结点的y位置就是子结点的中间位置
44
+ // 因此有子结点的,先计算子结点
45
+ positionCalc(alltreedata[pNode.children[flag]], deep + 1)
46
+
47
+ }
48
+
49
+ // left的位置比较简单,deep从0开始编号
50
+ // 比如deep=0,第一层,left=0+0.5=0.5,也就是根结点
51
+ alltreedata[pNode.id].left = deep + 0.5
52
+ if (flag == 0) {
53
+
54
+ // beforeDis是一个数组,用以记录每一层此刻top下边缘(每一层是从上到下)
55
+ // 比如一层的第一个,top值最小可以取top=0.5
56
+ // 为了方便计算,beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
57
+ // 因此设置最低上边缘为-0.5
58
+ if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
59
+ // 父边缘同意的进行初始化
60
+ if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
61
+
62
+ // 添加的新结点top值第一种求法:本层上边缘+1(比如上边缘是-0.5,那么top最小是top=-0.5+1=0.5)
63
+ alltreedata[pNode.id].top = beforeDis[deep] + 1
64
+
65
+ let pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
66
+ // 计算的原则是:如果第一种可行,选择第一种,否则必须选择第二种
67
+ // 判断第一种是否可行的方法就是:如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
68
+ if (pTop - 1 < beforeDis[deep - 1])
69
+ // 必须保证父亲结点和父亲的前一个兄弟保存1的距离,至少
70
+ // 添加的新结点top值的第二种求法:根据孩子取孩子结点的中心top
71
+ alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
72
+
73
+ } else {
74
+
75
+ // 此刻flag!=0
76
+ // 意味着结点有孩子,那么问题就解决了,直接取孩子的中间即可
77
+ // 其实,flag==0的分支计算的就是孩子,是没有孩子的叶结点,那是关键
78
+ alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
79
+ }
80
+
81
+ // 因为计算孩子的时候
82
+ // 无法掌握父辈兄弟的情况
83
+ // 可能会出现父亲和兄弟重叠问题
84
+ if (alltreedata[pNode.id].top <= beforeDis[deep]) {
85
+ let needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
86
+ (function doUp(_pid: number | string, _deep: number) {
87
+ alltreedata[_pid].top += needUp;
88
+ if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
89
+
90
+ for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
91
+ doUp(alltreedata[_pid].children[_flag], _deep + 1)
92
+ }
93
+ })(pNode.id, deep)
94
+ }
95
+
96
+ // 计算好一个结点后,需要更新此刻该层的上边缘
97
+ beforeDis[deep] = alltreedata[pNode.id].top
98
+
99
+ // size在每次计算一个结点后更新,是为了最终绘图的时候知道树有多宽(此处应该叫高)
100
+ if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
101
+
102
+ })(alltreedata[rootid], 0)
103
+
104
+ }
105
+ // 对于不显示的,需要标记一下
106
+ for (let key in noOpens) {
107
+ if (noOpens[key]) {
108
+ alltreedata[key].isOpen = false
109
+ ; (function updateHidden(pid, left, top) {
110
+ for (let index = 0; index < alltreedata[pid].children.length; index++) {
111
+ alltreedata[alltreedata[pid].children[index]].left = left
112
+ alltreedata[alltreedata[pid].children[index]].top = top
113
+ alltreedata[alltreedata[pid].children[index]].show = false
114
+
115
+ updateHidden(alltreedata[pid].children[index], left, top)
116
+ }
117
+ })(key, alltreedata[key].left, alltreedata[key].top)
118
+ }
119
+ }
120
+
121
+ // 传递的参数分别表示:记录了位置信息的树结点集合、根结点ID和树的宽
122
+ return {
123
+ "node": alltreedata,
124
+ "root": rootid,
125
+ "size": size,
126
+ "deep": maxDeep + 1
127
+ }
128
+
129
+ }
130
+
131
+
132
132
  }
@@ -1,80 +1,80 @@
1
- // 缓冲区分为两种:
2
- // 1.缓冲区中保存了包含顶点的数据
3
- // 2.缓冲区保存了包含顶点的索引值
4
-
5
- // 获取一个新的缓冲区
6
- // isElement默认false,创建第一种缓冲区,为true创建第二种
7
- let newBuffer = (painter: WebGLRenderingContext) => {
8
- return painter.createBuffer()
9
- }
10
-
11
- // 数据写入缓冲区
12
- // data是一个类型化数组,表示写入的数据
13
- // usage表示程序如何使用存储在缓冲区的数据
14
- let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
15
- let TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
16
- painter.bufferData(TYPE, data, usage)
17
- }
18
-
19
- // 使用缓冲区数据
20
- // location指定待分配的attribute变量的存储位置
21
- // size每个分量个数
22
- // type数据类型,应该是以下的某个:
23
- // gl.UNSIGNED_BYTE Uint8Array
24
- // gl.SHORT Int16Array
25
- // gl.UNSIGNED_SHORT Uint16Array
26
- // gl.INT Int32Array
27
- // gl.UNSIGNED_INT Uint32Array
28
- // gl.FLOAT Float32Array
29
- // stride相邻两个数据项的字节数
30
- // offset数据的起点字节位置
31
- // normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
32
- let useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
33
-
34
- // 把缓冲区对象分配给目标变量
35
- painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
36
-
37
- // 连接目标对象和缓冲区对象
38
- painter.enableVertexAttribArray(location)
39
- }
40
-
41
- class BufferObject {
42
-
43
- private __painter: WebGLRenderingContext
44
- private __isElement: boolean
45
-
46
- private __buffer: WebGLBuffer
47
- private __type: number
48
- private __fsize: number
49
-
50
- constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
51
- this.__painter = painter
52
- this.__isElement = isElement
53
-
54
- this.__buffer = newBuffer(painter)
55
- this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
56
- }
57
-
58
- // 使用这个缓冲区对象
59
- // (先于写入和分配)
60
- use() {
61
- this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
62
- return this
63
- }
64
-
65
- // 写入数据
66
- write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
67
- writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
68
- this.__fsize = data.BYTES_PER_ELEMENT
69
- return this
70
- }
71
-
72
- // 分配使用
73
- // 第2~4位参数分别表示:一个完整数据的长度、一组数据的长度、读取位置偏移
74
- divide(location: number, size: number, stride: number, offset: number = 0) {
75
- useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
76
- return this
77
- }
78
- }
79
-
1
+ // 缓冲区分为两种:
2
+ // 1.缓冲区中保存了包含顶点的数据
3
+ // 2.缓冲区保存了包含顶点的索引值
4
+
5
+ // 获取一个新的缓冲区
6
+ // isElement默认false,创建第一种缓冲区,为true创建第二种
7
+ let newBuffer = (painter: WebGLRenderingContext) => {
8
+ return painter.createBuffer()
9
+ }
10
+
11
+ // 数据写入缓冲区
12
+ // data是一个类型化数组,表示写入的数据
13
+ // usage表示程序如何使用存储在缓冲区的数据
14
+ let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
15
+ let TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
16
+ painter.bufferData(TYPE, data, usage)
17
+ }
18
+
19
+ // 使用缓冲区数据
20
+ // location指定待分配的attribute变量的存储位置
21
+ // size每个分量个数
22
+ // type数据类型,应该是以下的某个:
23
+ // gl.UNSIGNED_BYTE Uint8Array
24
+ // gl.SHORT Int16Array
25
+ // gl.UNSIGNED_SHORT Uint16Array
26
+ // gl.INT Int32Array
27
+ // gl.UNSIGNED_INT Uint32Array
28
+ // gl.FLOAT Float32Array
29
+ // stride相邻两个数据项的字节数
30
+ // offset数据的起点字节位置
31
+ // normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
32
+ let useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
33
+
34
+ // 把缓冲区对象分配给目标变量
35
+ painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
36
+
37
+ // 连接目标对象和缓冲区对象
38
+ painter.enableVertexAttribArray(location)
39
+ }
40
+
41
+ class BufferObject {
42
+
43
+ private __painter: WebGLRenderingContext
44
+ private __isElement: boolean
45
+
46
+ private __buffer: WebGLBuffer
47
+ private __type: number
48
+ private __fsize: number
49
+
50
+ constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
51
+ this.__painter = painter
52
+ this.__isElement = isElement
53
+
54
+ this.__buffer = newBuffer(painter)
55
+ this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
56
+ }
57
+
58
+ // 使用这个缓冲区对象
59
+ // (先于写入和分配)
60
+ use() {
61
+ this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
62
+ return this
63
+ }
64
+
65
+ // 写入数据
66
+ write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
67
+ writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
68
+ this.__fsize = data.BYTES_PER_ELEMENT
69
+ return this
70
+ }
71
+
72
+ // 分配使用
73
+ // 第2~4位参数分别表示:一个完整数据的长度、一组数据的长度、读取位置偏移
74
+ divide(location: number, size: number, stride: number, offset: number = 0) {
75
+ useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
76
+ return this
77
+ }
78
+ }
79
+
80
80
  export default BufferObject
@@ -1,109 +1,109 @@
1
- import BufferObject from './buffer'
2
-
3
- import getTexture from './getTexture'
4
- import getShader from './getShader'
5
-
6
- interface MeshWorldType {
7
- matrix: number[]
8
- }
9
-
10
- interface GlobalWorldType {
11
- matrix: number[]
12
- proporion: number[]
13
- }
14
-
15
- import { meshType } from '../../../types/Object3D'
16
-
17
- export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
18
- let shader = getShader(type, painter, mesh)
19
-
20
- // 点数据写入缓冲区
21
- new BufferObject(painter).use()
22
- .write(mesh.geometry.attributes.position.array as Float32Array)
23
- .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, mesh.geometry.attributes.position.itemSize, 0)
24
-
25
- // 写入矩阵
26
- painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix)
27
- painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion)
28
- painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix)
29
-
30
- // 如果有法向量数据
31
- if (mesh.geometry.attributes.normal) {
32
- new BufferObject(painter).use()
33
- .write(mesh.geometry.attributes.normal.array as Float32Array)
34
- .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0)
35
- }
36
-
37
- // 颜色
38
- if ("color" in mesh.material) {
39
-
40
- // 写入颜色
41
- painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
42
- , mesh.material.color.r
43
- , mesh.material.color.g
44
- , mesh.material.color.b
45
- , mesh.material.color.alpha)
46
- }
47
-
48
- // 多颜色
49
- if ("colors" in mesh.material) {
50
-
51
- // 写入颜色序列
52
- new BufferObject(painter).use()
53
- .write(mesh.material.colors.array as Float32Array)
54
- .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
55
-
56
- }
57
-
58
- // 立方纹理
59
- else if ("cube" in mesh.material) {
60
-
61
- let size = (mesh.material.cube.right.image.value as any).width
62
-
63
- painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
64
-
65
- getTexture(type, painter, 'cube').useCube([
66
- mesh.material.cube.right.image.value,
67
- mesh.material.cube.left.image.value,
68
- mesh.material.cube.top.image.value,
69
- mesh.material.cube.bottom.image.value,
70
- mesh.material.cube.far.image.value,
71
- mesh.material.cube.near.image.value
72
- ], size, size)
73
-
74
- }
75
-
76
- // 二维纹理
77
- else if ("image" in mesh.material) {
78
-
79
- painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
80
-
81
- new BufferObject(painter).use()
82
- .write(mesh.geometry.attributes.uv.array as Float32Array)
83
- .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
84
-
85
- getTexture(type, painter, '2d').useImage(mesh.material.image.value)
86
-
87
- }
88
-
89
- // 如果使用了索引
90
- if (mesh.geometry.index) {
91
-
92
- // 索引数据
93
- new BufferObject(painter, true).use()
94
- .write(mesh.geometry.index.array as Uint8Array)
95
-
96
- // 绘制
97
- painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0)
98
-
99
- }
100
-
101
- // 否则
102
- else {
103
-
104
- // 绘制
105
- painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count)
106
-
107
- }
108
-
1
+ import BufferObject from './buffer'
2
+
3
+ import getTexture from './getTexture'
4
+ import getShader from './getShader'
5
+
6
+ interface MeshWorldType {
7
+ matrix: number[]
8
+ }
9
+
10
+ interface GlobalWorldType {
11
+ matrix: number[]
12
+ proporion: number[]
13
+ }
14
+
15
+ import { meshType } from '../../../types/Object3D'
16
+
17
+ export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
18
+ let shader = getShader(type, painter, mesh)
19
+
20
+ // 点数据写入缓冲区
21
+ new BufferObject(painter).use()
22
+ .write(mesh.geometry.attributes.position.array as Float32Array)
23
+ .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, mesh.geometry.attributes.position.itemSize, 0)
24
+
25
+ // 写入矩阵
26
+ painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix)
27
+ painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion)
28
+ painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix)
29
+
30
+ // 如果有法向量数据
31
+ if (mesh.geometry.attributes.normal) {
32
+ new BufferObject(painter).use()
33
+ .write(mesh.geometry.attributes.normal.array as Float32Array)
34
+ .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0)
35
+ }
36
+
37
+ // 颜色
38
+ if ("color" in mesh.material) {
39
+
40
+ // 写入颜色
41
+ painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
42
+ , mesh.material.color.r
43
+ , mesh.material.color.g
44
+ , mesh.material.color.b
45
+ , mesh.material.color.alpha)
46
+ }
47
+
48
+ // 多颜色
49
+ if ("colors" in mesh.material) {
50
+
51
+ // 写入颜色序列
52
+ new BufferObject(painter).use()
53
+ .write(mesh.material.colors.array as Float32Array)
54
+ .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
55
+
56
+ }
57
+
58
+ // 立方纹理
59
+ else if ("cube" in mesh.material) {
60
+
61
+ let size = (mesh.material.cube.right.image.value as any).width
62
+
63
+ painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
64
+
65
+ getTexture(type, painter, 'cube').useCube([
66
+ mesh.material.cube.right.image.value,
67
+ mesh.material.cube.left.image.value,
68
+ mesh.material.cube.top.image.value,
69
+ mesh.material.cube.bottom.image.value,
70
+ mesh.material.cube.far.image.value,
71
+ mesh.material.cube.near.image.value
72
+ ], size, size)
73
+
74
+ }
75
+
76
+ // 二维纹理
77
+ else if ("image" in mesh.material) {
78
+
79
+ painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
80
+
81
+ new BufferObject(painter).use()
82
+ .write(mesh.geometry.attributes.uv.array as Float32Array)
83
+ .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
84
+
85
+ getTexture(type, painter, '2d').useImage(mesh.material.image.value)
86
+
87
+ }
88
+
89
+ // 如果使用了索引
90
+ if (mesh.geometry.index) {
91
+
92
+ // 索引数据
93
+ new BufferObject(painter, true).use()
94
+ .write(mesh.geometry.index.array as Uint8Array)
95
+
96
+ // 绘制
97
+ painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0)
98
+
99
+ }
100
+
101
+ // 否则
102
+ else {
103
+
104
+ // 绘制
105
+ painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count)
106
+
107
+ }
108
+
109
109
  }