hilo3d 1.19.0 → 1.19.1

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 (14) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +1 -1
  3. package/README_ZH.md +1 -1
  4. package/build/Hilo3d.js +3 -3
  5. package/build/Hilo3d.single.js +2 -2
  6. package/build/math.single.js +2 -2
  7. package/examples/js/NormalTangentHelper.js +54 -54
  8. package/examples/js/OrbitControls.js +291 -291
  9. package/examples/js/ltcTexture.json +3 -3
  10. package/examples/js/postProcess.js +295 -295
  11. package/examples/js/stats.js +66 -66
  12. package/examples/js/vconsole.min.js +7 -0
  13. package/package.json +1 -1
  14. package/types/index.d.ts +2 -2
package/examples/js/postProcess.js CHANGED
@@ -1,296 +1,296 @@
1
- (function(){
2
- var postProcess = {
3
- passes: [],
4
- texture: null,
5
- init: function(renderer, framebufferOption) {
6
- var that = this;
7
- that.renderer = renderer;
8
- renderer.useFramebuffer = true;
9
- if (renderer.isInit) {
10
- that._init(framebufferOption);
11
- } else {
12
- renderer.on('init', function() {
13
- that._init(framebufferOption);
14
- }, true);
15
- }
16
- },
17
- _init(framebufferOption) {
18
- var renderer = this.renderer;
19
- this.state = renderer.state;
20
- this.gl = renderer.gl;
21
-
22
- var bufferParams = {
23
- width: renderer.width,
24
- height: renderer.height
25
- };
26
- Object.assign(bufferParams, framebufferOption||{});
27
- this.frontBuffer = new Hilo3d.Framebuffer(renderer, bufferParams);
28
- this.backBuffer = new Hilo3d.Framebuffer(renderer, bufferParams);
29
- },
30
- resize(){
31
- if(this.frontBuffer){
32
- this.frontBuffer.resize(this.renderer.width, this.renderer.height);
33
- }
34
-
35
- if(this.backBuffer){
36
- this.backBuffer.resize(this.renderer.width, this.renderer.height);
37
- }
38
- },
39
- /**
40
- * @param {Object} params
41
- * @param {String} params.vert
42
- * @param {String} params.frag
43
- * @param {Object} params.uniforms
44
- */
45
- addPass(params, uid) {
46
- var pass = Object.assign({}, params);
47
- pass.id = uid||Hilo3d.math.generateUUID('pass');
48
- this.passes.push(pass);
49
- return pass;
50
- },
51
- /**
52
- * @param {Array} kernel
53
- */
54
- addKernelPass(kernel, uid) {
55
- var renderer = this.renderer;
56
- var frag = '\n\
57
- precision HILO_MAX_FRAGMENT_PRECISION float;\n\
58
- varying vec2 v_texcoord0;\n\
59
- uniform sampler2D u_diffuse;\n\
60
- uniform vec2 u_textureSize;\n\
61
- uniform float u_kernel[9];\n\
62
- uniform float u_kernelWeight;\n\
63
- void main(void) { \n\
64
- vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;\n\
65
- vec4 colorSum =\n\
66
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, -1)) * u_kernel[0] +\n\
67
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, -1)) * u_kernel[1] +\n\
68
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, -1)) * u_kernel[2] +\n\
69
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, 0)) * u_kernel[3] +\n\
70
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, 0)) * u_kernel[4] +\n\
71
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, 0)) * u_kernel[5] +\n\
72
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, 1)) * u_kernel[6] +\n\
73
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, 1)) * u_kernel[7] +\n\
74
- texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, 1)) * u_kernel[8] ;\n\
75
- gl_FragColor = colorSum/u_kernelWeight;\n\
76
- }';
77
-
78
- var u_textureSize = new Float32Array([0, 0]);
79
- var u_kernel = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0]);
80
-
81
- var uniforms = {
82
- u_textureSize: {
83
- get: function() {
84
- u_textureSize[0] = renderer.width;
85
- u_textureSize[1] = renderer.height;
86
- return u_textureSize;
87
- }
88
- },
89
- u_kernelWeight: {
90
- get: function() {
91
- return Math.max(1, pass.kernel.reduce(function(prev, curr) {
92
- return prev + curr;
93
- }));
94
- }
95
- },
96
- u_kernel: {
97
- get: function() {
98
- var kernel = pass.kernel;
99
- for (var i = 0; i < 9; i++) {
100
- u_kernel[i] = kernel[i];
101
- }
102
-
103
- return u_kernel;
104
- }
105
- }
106
- };
107
-
108
- var pass = this.addPass({
109
- kernel: kernel,
110
- frag: frag,
111
- uniforms: uniforms
112
- }, uid);
113
-
114
- return pass;
115
- },
116
- render() {
117
- var that = this;
118
- var renderer = that.renderer;
119
- var state = that.state;
120
- var passes = that.passes;
121
- var lastIndex = passes.length - 1;
122
- var frontBuffer = this.frontBuffer;
123
- var backBuffer = this.backBuffer;
124
-
125
- if (!this._firstTexture) {
126
- this._firstTexture = renderer.framebuffer.texture;
127
- }
128
-
129
- if (passes.length === 1) {
130
- that.draw(this._firstTexture, passes[0]);
131
- } else {
132
- var texture = this._firstTexture;
133
- var tempBuffer;
134
- passes.forEach(function(pass, index) {
135
- if (index === lastIndex) {
136
- state.bindSystemFramebuffer()
137
- } else {
138
- frontBuffer.bind();
139
- }
140
-
141
- that.draw(texture, pass);
142
- texture = frontBuffer.texture;
143
- tempBuffer = frontBuffer;
144
- frontBuffer = backBuffer;
145
- backBuffer = tempBuffer;
146
- });
147
- }
148
- },
149
- draw: function(texture, pass) {
150
- var clearColor = pass.clearColor;
151
- var screenVert = pass.vert || Hilo3d.Shader.shaders['screen.vert'];
152
- var screenFrag = pass.frag || Hilo3d.Shader.shaders['screen.frag'];
153
- var uniforms = pass.uniforms || {};
154
-
155
- var state = this.state;
156
- var gl = this.gl;
157
- state.disable(Hilo3d.constants.DEPTH_TEST);
158
- state.disable(Hilo3d.constants.CULL_FACE);
159
- state.disable(Hilo3d.constants.BLEND);
160
- if (clearColor) {
161
- gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
162
- gl.clear(gl.COLOR_BUFFER_BIT);
163
- }
164
-
165
- var shader = Hilo3d.Shader.getCustomShader(screenVert, screenFrag, '', pass.id);
166
- var program = Hilo3d.Program.getProgram(shader, state);
167
- program.useProgram();
168
-
169
- var vaoId = program.id;
170
- var vao = Hilo3d.VertexArrayObject.getVao(gl, vaoId, {
171
- mode: Hilo3d.constants.TRIANGLE_STRIP
172
- });
173
-
174
- var x = 0,
175
- y = 0,
176
- width = 1,
177
- height = 1;
178
- if (vao.isDirty) {
179
- vao.isDirty = false;
180
- x = x * 2 - 1;
181
- y = 1 - y * 2;
182
- width *= 2;
183
- height *= 2;
184
- var vertices = [x, y, x + width, y, x, y - height, x + width, y - height];
185
- vao.addAttribute(new Hilo3d.GeometryData(new Float32Array(vertices), 2), program.attributes.a_position);
186
- vao.addAttribute(new Hilo3d.GeometryData(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2), program.attributes.a_texcoord0);
187
- }
188
-
189
- if(!uniforms.u_diffuse){
190
- uniforms.u_diffuse = this.uniformTextureGetter(texture);
191
- }
192
-
193
- for (var name in uniforms) {
194
- var value = uniforms[name];
195
- var programInfo = program.uniforms[name];
196
- if (value && programInfo) {
197
- program[name] = value.get ? value.get(null, null, programInfo) : value;
198
- }
199
- }
200
- vao.draw();
201
- },
202
- uniformTextureGetter(texture){
203
- var state = this.state;
204
- var gl = state.gl;
205
- return {
206
- get:function(mesh, material, programInfo){
207
- if(texture.isTexture){
208
- texture = texture.getGLTexture(state)
209
- }
210
- return Hilo3d.semantic.handlerGLTexture(Hilo3d.constants.TEXTURE_2D, texture, programInfo.textureIndex);
211
- }
212
- };
213
- },
214
- kernels: {
215
- normal: [
216
- 0, 0, 0,
217
- 0, 1, 0,
218
- 0, 0, 0
219
- ],
220
- gaussianBlur: [
221
- 0.045, 0.122, 0.045,
222
- 0.122, 0.332, 0.122,
223
- 0.045, 0.122, 0.045
224
- ],
225
- gaussianBlur2: [
226
- 1, 2, 1,
227
- 2, 4, 2,
228
- 1, 2, 1
229
- ],
230
- gaussianBlur3: [
231
- 0, 1, 0,
232
- 1, 1, 1,
233
- 0, 1, 0
234
- ],
235
- unsharpen: [-1, -1, -1, -1, 9, -1, -1, -1, -1],
236
- sharpness: [
237
- 0, -1, 0, -1, 5, -1,
238
- 0, -1, 0
239
- ],
240
- sharpen: [-1, -1, -1, -1, 16, -1, -1, -1, -1],
241
- edgeDetect: [-0.125, -0.125, -0.125, -0.125, 1, -0.125, -0.125, -0.125, -0.125],
242
- edgeDetect2: [-1, -1, -1, -1, 8, -1, -1, -1, -1],
243
- edgeDetect3: [-5, 0, 0,
244
- 0, 0, 0,
245
- 0, 0, 5
246
- ],
247
- edgeDetect4: [-1, -1, -1,
248
- 0, 0, 0,
249
- 1, 1, 1
250
- ],
251
- edgeDetect5: [-1, -1, -1,
252
- 2, 2, 2, -1, -1, -1
253
- ],
254
- edgeDetect6: [-5, -5, -5, -5, 39, -5, -5, -5, -5],
255
- sobelHorizontal: [
256
- 1, 2, 1,
257
- 0, 0, 0, -1, -2, -1
258
- ],
259
- sobelVertical: [
260
- 1, 0, -1,
261
- 2, 0, -2,
262
- 1, 0, -1
263
- ],
264
- previtHorizontal: [
265
- 1, 1, 1,
266
- 0, 0, 0, -1, -1, -1
267
- ],
268
- previtVertical: [
269
- 1, 0, -1,
270
- 1, 0, -1,
271
- 1, 0, -1
272
- ],
273
- boxBlur: [
274
- 0.111, 0.111, 0.111,
275
- 0.111, 0.111, 0.111,
276
- 0.111, 0.111, 0.111
277
- ],
278
- triangleBlur: [
279
- 0.0625, 0.125, 0.0625,
280
- 0.125, 0.25, 0.125,
281
- 0.0625, 0.125, 0.0625
282
- ],
283
- emboss: [-2, -1, 0, -1, 1, 1,
284
- 0, 1, 2
285
- ]
286
- }
287
- };
288
-
289
- if(typeof module !== 'undefined'){
290
- module.exports = postProcess;
291
- }
292
-
293
- if(typeof window !== 'undefined'){
294
- window.postProcess = postProcess;
295
- }
1
+ (function(){
2
+ var postProcess = {
3
+ passes: [],
4
+ texture: null,
5
+ init: function(renderer, framebufferOption) {
6
+ var that = this;
7
+ that.renderer = renderer;
8
+ renderer.useFramebuffer = true;
9
+ if (renderer.isInit) {
10
+ that._init(framebufferOption);
11
+ } else {
12
+ renderer.on('init', function() {
13
+ that._init(framebufferOption);
14
+ }, true);
15
+ }
16
+ },
17
+ _init(framebufferOption) {
18
+ var renderer = this.renderer;
19
+ this.state = renderer.state;
20
+ this.gl = renderer.gl;
21
+
22
+ var bufferParams = {
23
+ width: renderer.width,
24
+ height: renderer.height
25
+ };
26
+ Object.assign(bufferParams, framebufferOption||{});
27
+ this.frontBuffer = new Hilo3d.Framebuffer(renderer, bufferParams);
28
+ this.backBuffer = new Hilo3d.Framebuffer(renderer, bufferParams);
29
+ },
30
+ resize(){
31
+ if(this.frontBuffer){
32
+ this.frontBuffer.resize(this.renderer.width, this.renderer.height);
33
+ }
34
+
35
+ if(this.backBuffer){
36
+ this.backBuffer.resize(this.renderer.width, this.renderer.height);
37
+ }
38
+ },
39
+ /**
40
+ * @param {Object} params
41
+ * @param {String} params.vert
42
+ * @param {String} params.frag
43
+ * @param {Object} params.uniforms
44
+ */
45
+ addPass(params, uid) {
46
+ var pass = Object.assign({}, params);
47
+ pass.id = uid||Hilo3d.math.generateUUID('pass');
48
+ this.passes.push(pass);
49
+ return pass;
50
+ },
51
+ /**
52
+ * @param {Array} kernel
53
+ */
54
+ addKernelPass(kernel, uid) {
55
+ var renderer = this.renderer;
56
+ var frag = '\n\
57
+ precision HILO_MAX_FRAGMENT_PRECISION float;\n\
58
+ varying vec2 v_texcoord0;\n\
59
+ uniform sampler2D u_diffuse;\n\
60
+ uniform vec2 u_textureSize;\n\
61
+ uniform float u_kernel[9];\n\
62
+ uniform float u_kernelWeight;\n\
63
+ void main(void) { \n\
64
+ vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;\n\
65
+ vec4 colorSum =\n\
66
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, -1)) * u_kernel[0] +\n\
67
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, -1)) * u_kernel[1] +\n\
68
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, -1)) * u_kernel[2] +\n\
69
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, 0)) * u_kernel[3] +\n\
70
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, 0)) * u_kernel[4] +\n\
71
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, 0)) * u_kernel[5] +\n\
72
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2(-1, 1)) * u_kernel[6] +\n\
73
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 0, 1)) * u_kernel[7] +\n\
74
+ texture2D(u_diffuse, v_texcoord0 + onePixel * vec2( 1, 1)) * u_kernel[8] ;\n\
75
+ gl_FragColor = colorSum/u_kernelWeight;\n\
76
+ }';
77
+
78
+ var u_textureSize = new Float32Array([0, 0]);
79
+ var u_kernel = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0]);
80
+
81
+ var uniforms = {
82
+ u_textureSize: {
83
+ get: function() {
84
+ u_textureSize[0] = renderer.width;
85
+ u_textureSize[1] = renderer.height;
86
+ return u_textureSize;
87
+ }
88
+ },
89
+ u_kernelWeight: {
90
+ get: function() {
91
+ return Math.max(1, pass.kernel.reduce(function(prev, curr) {
92
+ return prev + curr;
93
+ }));
94
+ }
95
+ },
96
+ u_kernel: {
97
+ get: function() {
98
+ var kernel = pass.kernel;
99
+ for (var i = 0; i < 9; i++) {
100
+ u_kernel[i] = kernel[i];
101
+ }
102
+
103
+ return u_kernel;
104
+ }
105
+ }
106
+ };
107
+
108
+ var pass = this.addPass({
109
+ kernel: kernel,
110
+ frag: frag,
111
+ uniforms: uniforms
112
+ }, uid);
113
+
114
+ return pass;
115
+ },
116
+ render() {
117
+ var that = this;
118
+ var renderer = that.renderer;
119
+ var state = that.state;
120
+ var passes = that.passes;
121
+ var lastIndex = passes.length - 1;
122
+ var frontBuffer = this.frontBuffer;
123
+ var backBuffer = this.backBuffer;
124
+
125
+ if (!this._firstTexture) {
126
+ this._firstTexture = renderer.framebuffer.texture;
127
+ }
128
+
129
+ if (passes.length === 1) {
130
+ that.draw(this._firstTexture, passes[0]);
131
+ } else {
132
+ var texture = this._firstTexture;
133
+ var tempBuffer;
134
+ passes.forEach(function(pass, index) {
135
+ if (index === lastIndex) {
136
+ state.bindSystemFramebuffer()
137
+ } else {
138
+ frontBuffer.bind();
139
+ }
140
+
141
+ that.draw(texture, pass);
142
+ texture = frontBuffer.texture;
143
+ tempBuffer = frontBuffer;
144
+ frontBuffer = backBuffer;
145
+ backBuffer = tempBuffer;
146
+ });
147
+ }
148
+ },
149
+ draw: function(texture, pass) {
150
+ var clearColor = pass.clearColor;
151
+ var screenVert = pass.vert || Hilo3d.Shader.shaders['screen.vert'];
152
+ var screenFrag = pass.frag || Hilo3d.Shader.shaders['screen.frag'];
153
+ var uniforms = pass.uniforms || {};
154
+
155
+ var state = this.state;
156
+ var gl = this.gl;
157
+ state.disable(Hilo3d.constants.DEPTH_TEST);
158
+ state.disable(Hilo3d.constants.CULL_FACE);
159
+ state.disable(Hilo3d.constants.BLEND);
160
+ if (clearColor) {
161
+ gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
162
+ gl.clear(gl.COLOR_BUFFER_BIT);
163
+ }
164
+
165
+ var shader = Hilo3d.Shader.getCustomShader(screenVert, screenFrag, '', pass.id);
166
+ var program = Hilo3d.Program.getProgram(shader, state);
167
+ program.useProgram();
168
+
169
+ var vaoId = program.id;
170
+ var vao = Hilo3d.VertexArrayObject.getVao(gl, vaoId, {
171
+ mode: Hilo3d.constants.TRIANGLE_STRIP
172
+ });
173
+
174
+ var x = 0,
175
+ y = 0,
176
+ width = 1,
177
+ height = 1;
178
+ if (vao.isDirty) {
179
+ vao.isDirty = false;
180
+ x = x * 2 - 1;
181
+ y = 1 - y * 2;
182
+ width *= 2;
183
+ height *= 2;
184
+ var vertices = [x, y, x + width, y, x, y - height, x + width, y - height];
185
+ vao.addAttribute(new Hilo3d.GeometryData(new Float32Array(vertices), 2), program.attributes.a_position);
186
+ vao.addAttribute(new Hilo3d.GeometryData(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2), program.attributes.a_texcoord0);
187
+ }
188
+
189
+ if(!uniforms.u_diffuse){
190
+ uniforms.u_diffuse = this.uniformTextureGetter(texture);
191
+ }
192
+
193
+ for (var name in uniforms) {
194
+ var value = uniforms[name];
195
+ var programInfo = program.uniforms[name];
196
+ if (value && programInfo) {
197
+ program[name] = value.get ? value.get(null, null, programInfo) : value;
198
+ }
199
+ }
200
+ vao.draw();
201
+ },
202
+ uniformTextureGetter(texture){
203
+ var state = this.state;
204
+ var gl = state.gl;
205
+ return {
206
+ get:function(mesh, material, programInfo){
207
+ if(texture.isTexture){
208
+ texture = texture.getGLTexture(state)
209
+ }
210
+ return Hilo3d.semantic.handlerGLTexture(Hilo3d.constants.TEXTURE_2D, texture, programInfo.textureIndex);
211
+ }
212
+ };
213
+ },
214
+ kernels: {
215
+ normal: [
216
+ 0, 0, 0,
217
+ 0, 1, 0,
218
+ 0, 0, 0
219
+ ],
220
+ gaussianBlur: [
221
+ 0.045, 0.122, 0.045,
222
+ 0.122, 0.332, 0.122,
223
+ 0.045, 0.122, 0.045
224
+ ],
225
+ gaussianBlur2: [
226
+ 1, 2, 1,
227
+ 2, 4, 2,
228
+ 1, 2, 1
229
+ ],
230
+ gaussianBlur3: [
231
+ 0, 1, 0,
232
+ 1, 1, 1,
233
+ 0, 1, 0
234
+ ],
235
+ unsharpen: [-1, -1, -1, -1, 9, -1, -1, -1, -1],
236
+ sharpness: [
237
+ 0, -1, 0, -1, 5, -1,
238
+ 0, -1, 0
239
+ ],
240
+ sharpen: [-1, -1, -1, -1, 16, -1, -1, -1, -1],
241
+ edgeDetect: [-0.125, -0.125, -0.125, -0.125, 1, -0.125, -0.125, -0.125, -0.125],
242
+ edgeDetect2: [-1, -1, -1, -1, 8, -1, -1, -1, -1],
243
+ edgeDetect3: [-5, 0, 0,
244
+ 0, 0, 0,
245
+ 0, 0, 5
246
+ ],
247
+ edgeDetect4: [-1, -1, -1,
248
+ 0, 0, 0,
249
+ 1, 1, 1
250
+ ],
251
+ edgeDetect5: [-1, -1, -1,
252
+ 2, 2, 2, -1, -1, -1
253
+ ],
254
+ edgeDetect6: [-5, -5, -5, -5, 39, -5, -5, -5, -5],
255
+ sobelHorizontal: [
256
+ 1, 2, 1,
257
+ 0, 0, 0, -1, -2, -1
258
+ ],
259
+ sobelVertical: [
260
+ 1, 0, -1,
261
+ 2, 0, -2,
262
+ 1, 0, -1
263
+ ],
264
+ previtHorizontal: [
265
+ 1, 1, 1,
266
+ 0, 0, 0, -1, -1, -1
267
+ ],
268
+ previtVertical: [
269
+ 1, 0, -1,
270
+ 1, 0, -1,
271
+ 1, 0, -1
272
+ ],
273
+ boxBlur: [
274
+ 0.111, 0.111, 0.111,
275
+ 0.111, 0.111, 0.111,
276
+ 0.111, 0.111, 0.111
277
+ ],
278
+ triangleBlur: [
279
+ 0.0625, 0.125, 0.0625,
280
+ 0.125, 0.25, 0.125,
281
+ 0.0625, 0.125, 0.0625
282
+ ],
283
+ emboss: [-2, -1, 0, -1, 1, 1,
284
+ 0, 1, 2
285
+ ]
286
+ }
287
+ };
288
+
289
+ if(typeof module !== 'undefined'){
290
+ module.exports = postProcess;
291
+ }
292
+
293
+ if(typeof window !== 'undefined'){
294
+ window.postProcess = postProcess;
295
+ }
296
296
  })();