@antv/l7-renderer 2.21.1 → 2.21.2
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.
- package/es/device/DeviceAttribute.js +26 -32
- package/es/device/DeviceBuffer.js +31 -49
- package/es/device/DeviceCache.js +136 -170
- package/es/device/DeviceElements.js +32 -38
- package/es/device/DeviceFramebuffer.js +76 -104
- package/es/device/DeviceModel.js +358 -384
- package/es/device/DeviceTexture2D.js +103 -122
- package/es/device/constants.js +117 -34
- package/es/device/index.js +254 -381
- package/es/device/utils/HashMap.js +71 -138
- package/es/device/utils/pipeline.js +6 -1
- package/es/device/utils/typedarray.js +23 -24
- package/es/device/utils/webgl.js +7 -6
- package/es/index.js +5 -4
- package/es/regl/ReglAttribute.js +17 -33
- package/es/regl/ReglBuffer.js +25 -40
- package/es/regl/ReglElements.js +21 -36
- package/es/regl/ReglFramebuffer.js +24 -44
- package/es/regl/ReglModel.js +266 -306
- package/es/regl/ReglRenderbuffer.js +19 -36
- package/es/regl/ReglTexture2D.js +72 -103
- package/es/regl/constants.js +133 -21
- package/es/regl/index.js +205 -289
- package/lib/device/DeviceAttribute.d.ts +13 -0
- package/lib/device/DeviceBuffer.d.ts +18 -0
- package/lib/device/DeviceCache.d.ts +14 -0
- package/lib/device/DeviceElements.d.ts +13 -0
- package/lib/device/DeviceFramebuffer.d.ts +24 -0
- package/lib/device/DeviceModel.d.ts +53 -0
- package/lib/device/DeviceModel.js +22 -15
- package/lib/device/DeviceTexture2D.d.ts +23 -0
- package/lib/device/constants.d.ts +35 -0
- package/lib/device/index.d.ts +68 -0
- package/lib/device/index.js +58 -36
- package/lib/device/utils/HashMap.d.ts +24 -0
- package/lib/device/utils/pipeline.d.ts +1 -0
- package/lib/device/utils/typedarray.d.ts +7 -0
- package/lib/device/utils/webgl.d.ts +1 -0
- package/lib/index.d.ts +6 -0
- package/lib/regl/ReglAttribute.d.ts +16 -0
- package/lib/regl/ReglBuffer.d.ts +17 -0
- package/lib/regl/ReglElements.d.ts +14 -0
- package/lib/regl/ReglFramebuffer.d.ts +16 -0
- package/lib/regl/ReglModel.d.ts +46 -0
- package/lib/regl/ReglModel.js +21 -11
- package/lib/regl/ReglRenderbuffer.d.ts +16 -0
- package/lib/regl/ReglTexture2D.d.ts +22 -0
- package/lib/regl/constants.d.ts +43 -0
- package/lib/regl/index.d.ts +56 -0
- package/lib/regl/index.js +70 -48
- package/package.json +14 -18
- package/CHANGELOG.md +0 -350
- package/LICENSE.md +0 -21
package/es/device/index.js
CHANGED
|
@@ -1,10 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// src/device/index.ts
|
|
23
|
+
import {
|
|
24
|
+
Format,
|
|
25
|
+
TextureUsage,
|
|
26
|
+
TransparentBlack,
|
|
27
|
+
ViewportOrigin,
|
|
28
|
+
WebGLDeviceContribution,
|
|
29
|
+
WebGPUDeviceContribution,
|
|
30
|
+
colorNewFromRGBA
|
|
31
|
+
} from "@antv/g-device-api";
|
|
32
|
+
import { lodashUtil } from "@antv/l7-utils";
|
|
8
33
|
import DeviceAttribute from "./DeviceAttribute";
|
|
9
34
|
import DeviceBuffer from "./DeviceBuffer";
|
|
10
35
|
import { RenderCache } from "./DeviceCache";
|
|
@@ -13,86 +38,43 @@ import DeviceFramebuffer from "./DeviceFramebuffer";
|
|
|
13
38
|
import DeviceModel from "./DeviceModel";
|
|
14
39
|
import DeviceTexture2D from "./DeviceTexture2D";
|
|
15
40
|
import { isWebGL2 } from "./utils/webgl";
|
|
16
|
-
var isUndefined = lodashUtil
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
_defineProperty(this, "createAttribute", function (options) {
|
|
33
|
-
return new DeviceAttribute(_this.device, options);
|
|
34
|
-
});
|
|
35
|
-
_defineProperty(this, "createBuffer", function (options) {
|
|
36
|
-
return new DeviceBuffer(_this.device, options);
|
|
37
|
-
});
|
|
38
|
-
_defineProperty(this, "createElements", function (options) {
|
|
39
|
-
return new DeviceElements(_this.device, options);
|
|
40
|
-
});
|
|
41
|
-
_defineProperty(this, "createTexture2D", function (options) {
|
|
42
|
-
return new DeviceTexture2D(_this.device, options);
|
|
43
|
-
});
|
|
44
|
-
_defineProperty(this, "createFramebuffer", function (options) {
|
|
45
|
-
return new DeviceFramebuffer(_this.device, options);
|
|
46
|
-
});
|
|
47
|
-
_defineProperty(this, "useFramebuffer", function (framebuffer, drawCommands) {
|
|
48
|
-
_this.currentFramebuffer = framebuffer;
|
|
49
|
-
_this.beginFrame();
|
|
41
|
+
var { isUndefined } = lodashUtil;
|
|
42
|
+
var DeviceRendererService = class {
|
|
43
|
+
constructor() {
|
|
44
|
+
this.uniformBuffers = [];
|
|
45
|
+
this.queryVerdorInfo = () => {
|
|
46
|
+
return this.device.queryVendorInfo().platformString;
|
|
47
|
+
};
|
|
48
|
+
this.createModel = (options) => new DeviceModel(this.device, options, this);
|
|
49
|
+
this.createAttribute = (options) => new DeviceAttribute(this.device, options);
|
|
50
|
+
this.createBuffer = (options) => new DeviceBuffer(this.device, options);
|
|
51
|
+
this.createElements = (options) => new DeviceElements(this.device, options);
|
|
52
|
+
this.createTexture2D = (options) => new DeviceTexture2D(this.device, options);
|
|
53
|
+
this.createFramebuffer = (options) => new DeviceFramebuffer(this.device, options);
|
|
54
|
+
this.useFramebuffer = (framebuffer, drawCommands) => {
|
|
55
|
+
this.currentFramebuffer = framebuffer;
|
|
56
|
+
this.beginFrame();
|
|
50
57
|
drawCommands();
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
this.endFrame();
|
|
59
|
+
this.currentFramebuffer = null;
|
|
60
|
+
};
|
|
61
|
+
this.useFramebufferAsync = (framebuffer, drawCommands) => __async(this, null, function* () {
|
|
62
|
+
this.currentFramebuffer = framebuffer;
|
|
63
|
+
this.preRenderPass = this.renderPass;
|
|
64
|
+
this.beginFrame();
|
|
65
|
+
yield drawCommands();
|
|
66
|
+
this.endFrame();
|
|
67
|
+
this.currentFramebuffer = null;
|
|
68
|
+
this.renderPass = this.preRenderPass;
|
|
53
69
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
57
|
-
while (1) switch (_context.prev = _context.next) {
|
|
58
|
-
case 0:
|
|
59
|
-
_this.currentFramebuffer = framebuffer;
|
|
60
|
-
_this.preRenderPass = _this.renderPass;
|
|
61
|
-
_this.beginFrame();
|
|
62
|
-
_context.next = 5;
|
|
63
|
-
return drawCommands();
|
|
64
|
-
case 5:
|
|
65
|
-
_this.endFrame();
|
|
66
|
-
_this.currentFramebuffer = null;
|
|
67
|
-
_this.renderPass = _this.preRenderPass;
|
|
68
|
-
case 8:
|
|
69
|
-
case "end":
|
|
70
|
-
return _context.stop();
|
|
71
|
-
}
|
|
72
|
-
}, _callee);
|
|
73
|
-
}));
|
|
74
|
-
return function (_x, _x2) {
|
|
75
|
-
return _ref.apply(this, arguments);
|
|
76
|
-
};
|
|
77
|
-
}());
|
|
78
|
-
_defineProperty(this, "clear", function (options) {
|
|
79
|
-
// @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
|
|
80
|
-
var color = options.color,
|
|
81
|
-
depth = options.depth,
|
|
82
|
-
stencil = options.stencil,
|
|
83
|
-
_options$framebuffer = options.framebuffer,
|
|
84
|
-
framebuffer = _options$framebuffer === void 0 ? null : _options$framebuffer;
|
|
70
|
+
this.clear = (options) => {
|
|
71
|
+
const { color, depth, stencil, framebuffer = null } = options;
|
|
85
72
|
if (framebuffer) {
|
|
86
|
-
|
|
87
|
-
framebuffer.clearOptions = {
|
|
88
|
-
color: color,
|
|
89
|
-
depth: depth,
|
|
90
|
-
stencil: stencil
|
|
91
|
-
};
|
|
73
|
+
framebuffer.clearOptions = { color, depth, stencil };
|
|
92
74
|
} else {
|
|
93
|
-
|
|
94
|
-
if (platformString ===
|
|
95
|
-
|
|
75
|
+
const platformString = this.queryVerdorInfo();
|
|
76
|
+
if (platformString === "WebGL1") {
|
|
77
|
+
const gl = this.getGLContext();
|
|
96
78
|
if (!isUndefined(stencil)) {
|
|
97
79
|
gl.clearStencil(stencil);
|
|
98
80
|
gl.clear(gl.STENCIL_BUFFER_BIT);
|
|
@@ -100,320 +82,211 @@ var DeviceRendererService = /*#__PURE__*/function () {
|
|
|
100
82
|
gl.clearDepth(depth);
|
|
101
83
|
gl.clear(gl.DEPTH_BUFFER_BIT);
|
|
102
84
|
}
|
|
103
|
-
} else if (platformString ===
|
|
104
|
-
|
|
85
|
+
} else if (platformString === "WebGL2") {
|
|
86
|
+
const gl = this.getGLContext();
|
|
105
87
|
if (!isUndefined(stencil)) {
|
|
106
|
-
|
|
88
|
+
gl.clearBufferiv(gl.STENCIL, 0, [stencil]);
|
|
107
89
|
} else if (!isUndefined(depth)) {
|
|
108
|
-
|
|
90
|
+
gl.clearBufferfv(gl.DEPTH, 0, [depth]);
|
|
109
91
|
}
|
|
110
92
|
}
|
|
111
93
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
94
|
+
};
|
|
95
|
+
this.viewport = ({
|
|
96
|
+
// x,
|
|
97
|
+
// y,
|
|
98
|
+
width,
|
|
99
|
+
height
|
|
100
|
+
}) => {
|
|
101
|
+
this.swapChain.configureSwapChain(width, height);
|
|
102
|
+
this.createMainColorDepthRT(width, height);
|
|
103
|
+
this.width = width;
|
|
104
|
+
this.height = height;
|
|
105
|
+
};
|
|
106
|
+
this.readPixels = (options) => {
|
|
107
|
+
const { framebuffer, x, y, width, height } = options;
|
|
108
|
+
const readback = this.device.createReadback();
|
|
109
|
+
const texture = framebuffer["colorTexture"];
|
|
110
|
+
const result = readback.readTextureSync(
|
|
111
|
+
texture,
|
|
112
|
+
x,
|
|
113
|
+
/**
|
|
114
|
+
* Origin is at lower-left corner. Width / height is already multiplied by dpr.
|
|
115
|
+
* WebGPU needs flipY
|
|
116
|
+
*/
|
|
117
|
+
this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : this.height - y,
|
|
118
|
+
width,
|
|
119
|
+
height,
|
|
120
|
+
new Uint8Array(width * height * 4)
|
|
121
|
+
);
|
|
122
|
+
readback.destroy();
|
|
123
|
+
return result;
|
|
124
|
+
};
|
|
125
|
+
this.readPixelsAsync = (options) => __async(this, null, function* () {
|
|
126
|
+
const { framebuffer, x, y, width, height } = options;
|
|
127
|
+
const readback = this.device.createReadback();
|
|
128
|
+
const texture = framebuffer["colorTexture"];
|
|
129
|
+
const result = yield readback.readTexture(
|
|
130
|
+
texture,
|
|
131
|
+
x,
|
|
132
|
+
/**
|
|
133
|
+
* Origin is at lower-left corner. Width / height is already multiplied by dpr.
|
|
134
|
+
* WebGPU needs flipY
|
|
135
|
+
*/
|
|
136
|
+
this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : this.height - y,
|
|
137
|
+
width,
|
|
138
|
+
height,
|
|
139
|
+
new Uint8Array(width * height * 4)
|
|
140
|
+
);
|
|
141
|
+
if (this.viewportOrigin !== ViewportOrigin.LOWER_LEFT) {
|
|
142
|
+
for (let j = 0; j < result.length; j += 4) {
|
|
143
|
+
const t = result[j];
|
|
144
|
+
result[j] = result[j + 2];
|
|
145
|
+
result[j + 2] = t;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
138
148
|
readback.destroy();
|
|
139
149
|
return result;
|
|
140
150
|
});
|
|
141
|
-
|
|
142
|
-
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
|
|
143
|
-
var framebuffer, x, y, width, height, readback, texture, result, j, t;
|
|
144
|
-
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
145
|
-
while (1) switch (_context2.prev = _context2.next) {
|
|
146
|
-
case 0:
|
|
147
|
-
framebuffer = options.framebuffer, x = options.x, y = options.y, width = options.width, height = options.height;
|
|
148
|
-
readback = _this.device.createReadback();
|
|
149
|
-
texture = framebuffer['colorTexture'];
|
|
150
|
-
_context2.next = 5;
|
|
151
|
-
return readback.readTexture(texture, x,
|
|
152
|
-
/**
|
|
153
|
-
* Origin is at lower-left corner. Width / height is already multiplied by dpr.
|
|
154
|
-
* WebGPU needs flipY
|
|
155
|
-
*/
|
|
156
|
-
_this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : _this.height - y, width, height, new Uint8Array(width * height * 4));
|
|
157
|
-
case 5:
|
|
158
|
-
result = _context2.sent;
|
|
159
|
-
// Since we use U8_RGBA_RT format in render target, need to change bgranorm -> rgba here.
|
|
160
|
-
if (_this.viewportOrigin !== ViewportOrigin.LOWER_LEFT) {
|
|
161
|
-
for (j = 0; j < result.length; j += 4) {
|
|
162
|
-
// Switch b and r components.
|
|
163
|
-
t = result[j];
|
|
164
|
-
result[j] = result[j + 2];
|
|
165
|
-
result[j + 2] = t;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
readback.destroy();
|
|
169
|
-
return _context2.abrupt("return", result);
|
|
170
|
-
case 9:
|
|
171
|
-
case "end":
|
|
172
|
-
return _context2.stop();
|
|
173
|
-
}
|
|
174
|
-
}, _callee2);
|
|
175
|
-
}));
|
|
176
|
-
return function (_x3) {
|
|
177
|
-
return _ref3.apply(this, arguments);
|
|
178
|
-
};
|
|
179
|
-
}());
|
|
180
|
-
_defineProperty(this, "getViewportSize", function () {
|
|
181
|
-
// FIXME: add viewport size in Device API.
|
|
151
|
+
this.getViewportSize = () => {
|
|
182
152
|
return {
|
|
183
|
-
width:
|
|
184
|
-
height:
|
|
153
|
+
width: this.width,
|
|
154
|
+
height: this.height
|
|
185
155
|
};
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
var
|
|
189
|
-
return (
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
return
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
// @ts-ignore
|
|
202
|
-
_this.canvas = null;
|
|
203
|
-
(_this$uniformBuffers = _this.uniformBuffers) === null || _this$uniformBuffers === void 0 || _this$uniformBuffers.forEach(function (buffer) {
|
|
156
|
+
};
|
|
157
|
+
this.getContainer = () => {
|
|
158
|
+
var _a;
|
|
159
|
+
return (_a = this.canvas) == null ? void 0 : _a.parentElement;
|
|
160
|
+
};
|
|
161
|
+
this.getCanvas = () => {
|
|
162
|
+
return this.canvas;
|
|
163
|
+
};
|
|
164
|
+
this.getGLContext = () => {
|
|
165
|
+
return this.device["gl"];
|
|
166
|
+
};
|
|
167
|
+
this.destroy = () => {
|
|
168
|
+
var _a;
|
|
169
|
+
this.canvas = null;
|
|
170
|
+
(_a = this.uniformBuffers) == null ? void 0 : _a.forEach((buffer) => {
|
|
204
171
|
buffer.destroy();
|
|
205
172
|
});
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
173
|
+
this.device.destroy();
|
|
174
|
+
this.renderCache.destroy();
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
init(canvas, cfg) {
|
|
178
|
+
return __async(this, null, function* () {
|
|
179
|
+
const { enableWebGPU, shaderCompilerPath } = cfg;
|
|
180
|
+
this.canvas = canvas;
|
|
181
|
+
const deviceContribution = enableWebGPU ? new WebGPUDeviceContribution({
|
|
182
|
+
shaderCompilerPath
|
|
183
|
+
}) : new WebGLDeviceContribution({
|
|
184
|
+
// Use WebGL2 first and downgrade to WebGL1 if WebGL2 is not supported.
|
|
185
|
+
targets: ["webgl2", "webgl1"],
|
|
186
|
+
onContextLost(e) {
|
|
187
|
+
console.warn("context lost", e);
|
|
188
|
+
},
|
|
189
|
+
onContextCreationError(e) {
|
|
190
|
+
console.warn("context creation error", e);
|
|
191
|
+
},
|
|
192
|
+
onContextRestored(e) {
|
|
193
|
+
console.warn("context restored", e);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
const swapChain = yield deviceContribution.createSwapChain(canvas);
|
|
197
|
+
swapChain.configureSwapChain(canvas.width, canvas.height);
|
|
198
|
+
this.device = swapChain.getDevice();
|
|
199
|
+
this.swapChain = swapChain;
|
|
200
|
+
this.renderCache = new RenderCache(this.device);
|
|
201
|
+
this.currentFramebuffer = null;
|
|
202
|
+
this.viewportOrigin = this.device.queryVendorInfo().viewportOrigin;
|
|
203
|
+
const gl = this.device["gl"];
|
|
204
|
+
this.extensionObject = {
|
|
205
|
+
// @ts-ignore
|
|
206
|
+
OES_texture_float: !isWebGL2(gl) && this.device["OES_texture_float"]
|
|
207
|
+
};
|
|
208
|
+
this.createMainColorDepthRT(canvas.width, canvas.height);
|
|
217
209
|
});
|
|
218
210
|
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
this.canvas = canvas;
|
|
229
|
-
|
|
230
|
-
// TODO: use antialias from cfg
|
|
231
|
-
deviceContribution = enableWebGPU ? new WebGPUDeviceContribution({
|
|
232
|
-
shaderCompilerPath: shaderCompilerPath
|
|
233
|
-
}) : new WebGLDeviceContribution({
|
|
234
|
-
// Use WebGL2 first and downgrade to WebGL1 if WebGL2 is not supported.
|
|
235
|
-
targets: ['webgl2', 'webgl1'],
|
|
236
|
-
onContextLost: function onContextLost(e) {
|
|
237
|
-
console.warn('context lost', e);
|
|
238
|
-
},
|
|
239
|
-
onContextCreationError: function onContextCreationError(e) {
|
|
240
|
-
console.warn('context creation error', e);
|
|
241
|
-
},
|
|
242
|
-
onContextRestored: function onContextRestored(e) {
|
|
243
|
-
console.warn('context restored', e);
|
|
244
|
-
}
|
|
245
|
-
});
|
|
246
|
-
_context3.next = 5;
|
|
247
|
-
return deviceContribution.createSwapChain(canvas);
|
|
248
|
-
case 5:
|
|
249
|
-
swapChain = _context3.sent;
|
|
250
|
-
swapChain.configureSwapChain(canvas.width, canvas.height);
|
|
251
|
-
this.device = swapChain.getDevice();
|
|
252
|
-
this.swapChain = swapChain;
|
|
253
|
-
this.renderCache = new RenderCache(this.device);
|
|
254
|
-
|
|
255
|
-
// Create default RT
|
|
256
|
-
this.currentFramebuffer = null;
|
|
257
|
-
this.viewportOrigin = this.device.queryVendorInfo().viewportOrigin;
|
|
258
|
-
|
|
259
|
-
// @ts-ignore
|
|
260
|
-
gl = this.device['gl'];
|
|
261
|
-
this.extensionObject = {
|
|
262
|
-
// @ts-ignore
|
|
263
|
-
OES_texture_float: !isWebGL2(gl) && this.device['OES_texture_float']
|
|
264
|
-
};
|
|
265
|
-
this.createMainColorDepthRT(canvas.width, canvas.height);
|
|
266
|
-
case 15:
|
|
267
|
-
case "end":
|
|
268
|
-
return _context3.stop();
|
|
269
|
-
}
|
|
270
|
-
}, _callee3, this);
|
|
271
|
-
}));
|
|
272
|
-
function init(_x4, _x5) {
|
|
273
|
-
return _init.apply(this, arguments);
|
|
274
|
-
}
|
|
275
|
-
return init;
|
|
276
|
-
}()
|
|
277
|
-
}, {
|
|
278
|
-
key: "createMainColorDepthRT",
|
|
279
|
-
value: function createMainColorDepthRT(width, height) {
|
|
280
|
-
if (this.mainColorRT) {
|
|
281
|
-
this.mainColorRT.destroy();
|
|
282
|
-
}
|
|
283
|
-
if (this.mainDepthRT) {
|
|
284
|
-
this.mainDepthRT.destroy();
|
|
285
|
-
}
|
|
286
|
-
this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
|
|
211
|
+
createMainColorDepthRT(width, height) {
|
|
212
|
+
if (this.mainColorRT) {
|
|
213
|
+
this.mainColorRT.destroy();
|
|
214
|
+
}
|
|
215
|
+
if (this.mainDepthRT) {
|
|
216
|
+
this.mainDepthRT.destroy();
|
|
217
|
+
}
|
|
218
|
+
this.mainColorRT = this.device.createRenderTargetFromTexture(
|
|
219
|
+
this.device.createTexture({
|
|
287
220
|
format: Format.U8_RGBA_RT,
|
|
288
|
-
width
|
|
289
|
-
height
|
|
221
|
+
width,
|
|
222
|
+
height,
|
|
290
223
|
usage: TextureUsage.RENDER_TARGET
|
|
291
|
-
})
|
|
292
|
-
|
|
224
|
+
})
|
|
225
|
+
);
|
|
226
|
+
this.mainDepthRT = this.device.createRenderTargetFromTexture(
|
|
227
|
+
this.device.createTexture({
|
|
293
228
|
format: Format.D24_S8,
|
|
294
|
-
width
|
|
295
|
-
height
|
|
229
|
+
width,
|
|
230
|
+
height,
|
|
296
231
|
usage: TextureUsage.RENDER_TARGET
|
|
297
|
-
})
|
|
298
|
-
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
var colorAttachment = currentFramebuffer ? currentFramebuffer['colorRenderTarget'] : mainColorRT;
|
|
308
|
-
var colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
|
|
309
|
-
var depthStencilAttachment = currentFramebuffer ? currentFramebuffer['depthRenderTarget'] : mainDepthRT;
|
|
310
|
-
var _ref4 =
|
|
311
|
-
// @ts-ignore
|
|
312
|
-
(currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer.clearOptions) || {},
|
|
313
|
-
_ref4$color = _ref4.color,
|
|
314
|
-
color = _ref4$color === void 0 ? [0, 0, 0, 0] : _ref4$color,
|
|
315
|
-
_ref4$depth = _ref4.depth,
|
|
316
|
-
depth = _ref4$depth === void 0 ? 1 : _ref4$depth,
|
|
317
|
-
_ref4$stencil = _ref4.stencil,
|
|
318
|
-
stencil = _ref4$stencil === void 0 ? 0 : _ref4$stencil;
|
|
319
|
-
var colorClearColor = colorAttachment ? colorNewFromRGBA(color[0] * 255, color[1] * 255, color[2] * 255, color[3]) : TransparentBlack;
|
|
320
|
-
var depthClearValue = depthStencilAttachment ? depth : undefined;
|
|
321
|
-
var stencilClearValue = depthStencilAttachment ? stencil : undefined;
|
|
322
|
-
var renderPass = this.device.createRenderPass({
|
|
323
|
-
colorAttachment: [colorAttachment],
|
|
324
|
-
colorResolveTo: [colorResolveTo],
|
|
325
|
-
colorClearColor: [colorClearColor],
|
|
326
|
-
// colorStore: [!!currentFramebuffer],
|
|
327
|
-
colorStore: [true],
|
|
328
|
-
depthStencilAttachment: depthStencilAttachment,
|
|
329
|
-
depthClearValue: depthClearValue,
|
|
330
|
-
stencilClearValue: stencilClearValue
|
|
331
|
-
});
|
|
332
|
-
this.renderPass = renderPass;
|
|
333
|
-
}
|
|
334
|
-
}, {
|
|
335
|
-
key: "endFrame",
|
|
336
|
-
value: function endFrame() {
|
|
337
|
-
this.device.submitPass(this.renderPass);
|
|
338
|
-
this.device.endFrame();
|
|
339
|
-
}
|
|
340
|
-
}, {
|
|
341
|
-
key: "getPointSizeRange",
|
|
342
|
-
value: function getPointSizeRange() {
|
|
232
|
+
})
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
beginFrame() {
|
|
236
|
+
this.device.beginFrame();
|
|
237
|
+
const { currentFramebuffer, swapChain, mainColorRT, mainDepthRT } = this;
|
|
238
|
+
const colorAttachment = currentFramebuffer ? currentFramebuffer["colorRenderTarget"] : mainColorRT;
|
|
239
|
+
const colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
|
|
240
|
+
const depthStencilAttachment = currentFramebuffer ? currentFramebuffer["depthRenderTarget"] : mainDepthRT;
|
|
241
|
+
const { color = [0, 0, 0, 0], depth = 1, stencil = 0 } = (
|
|
343
242
|
// @ts-ignore
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
// equation: 'add',
|
|
395
|
-
// },
|
|
396
|
-
// framebuffer: null,
|
|
397
|
-
// });
|
|
398
|
-
// this.gl._refresh();
|
|
399
|
-
}
|
|
400
|
-
}, {
|
|
401
|
-
key: "setCustomLayerDefaults",
|
|
402
|
-
value: function setCustomLayerDefaults() {
|
|
403
|
-
// const gl = this.getGLContext();
|
|
404
|
-
// gl.disable(gl.CULL_FACE);
|
|
405
|
-
}
|
|
406
|
-
}, {
|
|
407
|
-
key: "setDirty",
|
|
408
|
-
value: function setDirty(flag) {
|
|
409
|
-
this.isDirty = flag;
|
|
410
|
-
}
|
|
411
|
-
}, {
|
|
412
|
-
key: "getDirty",
|
|
413
|
-
value: function getDirty() {
|
|
414
|
-
return this.isDirty;
|
|
415
|
-
}
|
|
416
|
-
}]);
|
|
417
|
-
return DeviceRendererService;
|
|
418
|
-
}();
|
|
419
|
-
export { DeviceRendererService as default };
|
|
243
|
+
(currentFramebuffer == null ? void 0 : currentFramebuffer.clearOptions) || {}
|
|
244
|
+
);
|
|
245
|
+
const colorClearColor = colorAttachment ? colorNewFromRGBA(
|
|
246
|
+
color[0] * 255,
|
|
247
|
+
color[1] * 255,
|
|
248
|
+
color[2] * 255,
|
|
249
|
+
color[3]
|
|
250
|
+
) : TransparentBlack;
|
|
251
|
+
const depthClearValue = depthStencilAttachment ? depth : void 0;
|
|
252
|
+
const stencilClearValue = depthStencilAttachment ? stencil : void 0;
|
|
253
|
+
const renderPass = this.device.createRenderPass({
|
|
254
|
+
colorAttachment: [colorAttachment],
|
|
255
|
+
colorResolveTo: [colorResolveTo],
|
|
256
|
+
colorClearColor: [colorClearColor],
|
|
257
|
+
// colorStore: [!!currentFramebuffer],
|
|
258
|
+
colorStore: [true],
|
|
259
|
+
depthStencilAttachment,
|
|
260
|
+
depthClearValue,
|
|
261
|
+
stencilClearValue
|
|
262
|
+
});
|
|
263
|
+
this.renderPass = renderPass;
|
|
264
|
+
}
|
|
265
|
+
endFrame() {
|
|
266
|
+
this.device.submitPass(this.renderPass);
|
|
267
|
+
this.device.endFrame();
|
|
268
|
+
}
|
|
269
|
+
getPointSizeRange() {
|
|
270
|
+
const gl = this.device["gl"];
|
|
271
|
+
return gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
|
|
272
|
+
}
|
|
273
|
+
testExtension(name) {
|
|
274
|
+
return !!this.getGLContext().getExtension(name);
|
|
275
|
+
}
|
|
276
|
+
// TODO: 临时方法
|
|
277
|
+
setState() {
|
|
278
|
+
}
|
|
279
|
+
setBaseState() {
|
|
280
|
+
}
|
|
281
|
+
setCustomLayerDefaults() {
|
|
282
|
+
}
|
|
283
|
+
setDirty(flag) {
|
|
284
|
+
this.isDirty = flag;
|
|
285
|
+
}
|
|
286
|
+
getDirty() {
|
|
287
|
+
return this.isDirty;
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
export {
|
|
291
|
+
DeviceRendererService as default
|
|
292
|
+
};
|