XMaterialComponent.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. var EShaderMode = (i=>(i[i.default = 0] = "default",
  2. i[i.video = 1] = "video",
  3. i[i.videoAndPano = 2] = "videoAndPano",
  4. i))(EShaderMode || {});
  5. class XMaterialComponent {
  6. constructor(e, t) {
  7. E(this, "scene");
  8. E(this, "engine");
  9. E(this, "yuvInfo");
  10. E(this, "shaderMode");
  11. E(this, "_panoInfo");
  12. E(this, "_dynamic_size");
  13. E(this, "_dynamic_babylonpose");
  14. E(this, "_dynamic_textures");
  15. E(this, "_dynamic_shaders");
  16. E(this, "_scenemanager");
  17. E(this, "_videoTexture");
  18. E(this, "_videoElement");
  19. E(this, "_lowModelShader");
  20. E(this, "_defaultShader");
  21. E(this, "_inputYUV420", !0);
  22. E(this, "_inputPanoYUV420", !0);
  23. E(this, "_videoRawYUVTexArray");
  24. E(this, "_isUpdateYUV", !0);
  25. E(this, "initMaterial", async()=>new Promise((e,t)=>{
  26. this._initDefaultShader(),
  27. this.shaderMode == 2 ? this.initDynamicData(this._panoInfo.dynamicRange, this._panoInfo.width, this._panoInfo.height).then(()=>{
  28. this._initPureVideoShader(),
  29. this._prepareRender(this.yuvInfo)
  30. }
  31. ) : this.shaderMode == 1 ? (this._initPureVideoShader(),
  32. this._prepareRender(this.yuvInfo)) : this.shaderMode == 0,
  33. e(!0)
  34. }
  35. ));
  36. E(this, "_initPureVideoContent", e=>{
  37. this._inputYUV420 ? this._videoRawYUVTexArray.getVideoYUVTex(0) != null && (this._lowModelShader.setTexture("texture_video", this._videoRawYUVTexArray.getVideoYUVTex(0)),
  38. this._lowModelShader.setFloat("isYUV", 1),
  39. Texture.WhenAllReady([this._videoRawYUVTexArray.getVideoYUVTex(0)], ()=>{
  40. this._changePureVideoLowModelShaderCanvasSize(e)
  41. }
  42. )) : (this._videoElement = e.videoElement,
  43. this._videoTexture || (this._videoTexture = new VideoTexture("InterVideoTexture",this._videoElement,this.scene,!0,!1)),
  44. Texture.WhenAllReady([this._videoTexture], ()=>{
  45. this._changePureVideoLowModelShaderCanvasSize({
  46. width: this._videoElement.height,
  47. height: this._videoElement.width,
  48. fov: e.fov
  49. })
  50. }
  51. ),
  52. this._lowModelShader.setTexture("texture_video", this._videoTexture),
  53. this._lowModelShader.setFloat("isYUV", 0))
  54. }
  55. );
  56. E(this, "_changePureVideoLowModelShaderCanvasSize", e=>{
  57. var a;
  58. const t = e.fov || 50
  59. , r = e.width || 720
  60. , n = e.height || 1280
  61. , o = r / (2 * Math.tan(Math.PI * t / 360));
  62. (a = this._lowModelShader) == null || a.setVector3("focal_width_height", new Vector3(o,r,n))
  63. }
  64. );
  65. E(this, "updateRawYUVData", (e,t,r,n=-1)=>{
  66. var o, a;
  67. if (n == -1 && (n = this.yuvInfo.fov),
  68. this._isUpdateYUV == !0) {
  69. const s = {
  70. width: t,
  71. height: r,
  72. fov: n
  73. }
  74. , l = this._videoRawYUVTexArray.findId(t, r)
  75. , u = this._videoRawYUVTexArray.getCurrentVideoTexId();
  76. (u < 0 || l != u || n != this.yuvInfo.fov) && (this.yuvInfo.width = t,
  77. this.yuvInfo.height = r,
  78. this.yuvInfo.fov = n,
  79. this._videoRawYUVTexArray.setCurrentVideoTexId(l),
  80. this._changeVideoRes(l),
  81. this._changePureVideoLowModelShaderCanvasSize(s),
  82. this._scenemanager.cameraComponent.cameraFovChange(s),
  83. this._scenemanager.yuvInfo = s),
  84. (o = this._videoRawYUVTexArray.getVideoYUVTex(l)) == null || o.update(e),
  85. (a = this._videoRawYUVTexArray.getVideoYUVTex(l)) == null || a.updateSamplingMode(Texture.BILINEAR_SAMPLINGMODE)
  86. }
  87. }
  88. );
  89. E(this, "_changeVideoRes", e=>{
  90. this._lowModelShader.setTexture("texture_video", this._videoRawYUVTexArray.getVideoYUVTex(e))
  91. }
  92. );
  93. E(this, "initDynamicData", (e,t,r)=>new Promise((n,o)=>{
  94. this.setDynamicSize(e).then(a=>{
  95. if (a) {
  96. for (let s = 0; s < e; ++s)
  97. (l=>{
  98. this.initDynamicTexture(l, t, r),
  99. this.initDynamicShaders(l).then(()=>{
  100. this._updatePanoShaderInput(l)
  101. }
  102. )
  103. }
  104. )(s);
  105. n(!0)
  106. } else
  107. o(new XMaterialError(`[Engine] DynamicRoomSize (${e}) is too small`))
  108. }
  109. )
  110. }
  111. ).catch(n=>log$v.error(`[Engine] ${n}`)));
  112. E(this, "_initDefaultShader", ()=>{
  113. this._defaultShader == null && (this._defaultShader = new GridMaterial("GridShader",this.scene),
  114. this._defaultShader.gridRatio = 50,
  115. this._defaultShader.lineColor = new Color3(0,0,.5),
  116. this._defaultShader.majorUnitFrequency = 1,
  117. this._defaultShader.mainColor = new Color3(.6,.6,.6),
  118. this._defaultShader.backFaceCulling = !1)
  119. }
  120. );
  121. E(this, "_initPureVideoShader", ()=>{
  122. if (this._lowModelShader == null) {
  123. const e = new ShaderMaterial("PureVideoShader",this.scene,{
  124. vertexSource: pureVideoVertex,
  125. fragmentSource: pureVideoFragment
  126. },{
  127. attributes: ["uv", "position", "world0", "world1", "world2", "world3"],
  128. uniforms: ["view", "projection", "worldViewProjection", "world"],
  129. defines: ["#define SHADOWFULLFLOAT"]
  130. });
  131. e.setTexture("shadowSampler", null),
  132. e.setMatrix("lightSpaceMatrix", null),
  133. e.setFloat("haveShadowLight", 0),
  134. e.setTexture("texture_video", null),
  135. e.setFloat("isYUV", this._inputYUV420 ? 1 : 0),
  136. e.setFloat("fireworkLight", 0),
  137. e.setVector3("fireworkLightPosition", new Vector3(0,0,0)),
  138. e.setVector3("focal_width_height", new Vector3(772.022491,720,1280)),
  139. e.backFaceCulling = !1,
  140. this._lowModelShader = e
  141. }
  142. }
  143. );
  144. E(this, "setDynamicSize", e=>new Promise((t,r)=>{
  145. e >= 1 && e <= 100 ? (this._dynamic_size = e,
  146. t(!0)) : (this._dynamic_size = 1,
  147. t(!1))
  148. }
  149. ));
  150. E(this, "_isInDynamicRange", e=>e < this._dynamic_size && e >= 0);
  151. E(this, "initDynamicTexture", (e,t,r)=>{
  152. this._isInDynamicRange(e) && (this._dynamic_textures[e] != null && (this._dynamic_textures[e].dispose(),
  153. this._dynamic_textures[e] = null),
  154. this._dynamic_textures[e] = new RawTexture(null,t,r * 1.5,Engine.TEXTUREFORMAT_LUMINANCE,this.scene,!1,!0,Texture.NEAREST_SAMPLINGMODE,Engine.TEXTURETYPE_UNSIGNED_BYTE),
  155. this._dynamic_textures[e].name = "Pano_Dynamic_" + e + "_" + Date.now())
  156. }
  157. );
  158. E(this, "initDynamicShaders", e=>(log$v.info("[Engine] Material init dynamic shader."),
  159. new Promise((t,r)=>{
  160. this._dynamic_shaders[e] != null && this._dynamic_shaders[e].dispose();
  161. const n = new ShaderMaterial("Pano_Shader_" + e,this.scene,{
  162. vertexSource: panoVertex,
  163. fragmentSource: panoFragment
  164. },{
  165. attributes: ["uv", "position", "world0", "world1", "world2", "world3"],
  166. uniforms: ["view", "projection", "worldViewProjection", "world"],
  167. defines: ["#define SHADOWFULLFLOAT"]
  168. });
  169. n.setTexture("texture_pano", null),
  170. n.setVector3("centre_pose", new Vector3(0,0,0)),
  171. n.setFloat("isYUV", this._inputPanoYUV420 ? 1 : 0),
  172. n.setTexture("shadowSampler", null),
  173. n.setMatrix("lightSpaceMatrix", null),
  174. n.setFloat("haveShadowLight", 0),
  175. n.setFloat("fireworkLight", 0),
  176. n.setVector3("fireworkLightPosition", new Vector3(0,0,0)),
  177. n.backFaceCulling = !1,
  178. this._dynamic_shaders[e] = n,
  179. t(!0)
  180. }
  181. )));
  182. this._scenemanager = e,
  183. this.scene = e.Scene,
  184. this.engine = this.scene.getEngine(),
  185. this.shaderMode = 1,
  186. this._dynamic_textures = [],
  187. this._dynamic_shaders = [],
  188. this._dynamic_babylonpose = [],
  189. this._videoRawYUVTexArray = new XVideoRawYUV(this.scene,t.videoResOriArray),
  190. this.shaderMode = t.shaderMode,
  191. t.yuvInfo != null && (this.yuvInfo = t.yuvInfo),
  192. t.panoInfo != null && this.setPanoInfo(t.panoInfo)
  193. }
  194. stopYUVUpdate() {
  195. this._isUpdateYUV = !1
  196. }
  197. allowYUVUpdate() {
  198. this._isUpdateYUV = !0
  199. }
  200. setPanoInfo(e) {
  201. this._panoInfo = e
  202. }
  203. _prepareRender(e) {
  204. e && (this._initPureVideoContent(e),
  205. this._updatePureVideoShaderInput())
  206. }
  207. getPureVideoShader() {
  208. return this._lowModelShader
  209. }
  210. getDefaultShader() {
  211. return this._defaultShader
  212. }
  213. updatePanoPartYUV(e, t, r) {
  214. const n = t.subarray(0, r.width * r.height)
  215. , o = t.subarray(r.width * r.height, r.width * r.height * 1.25)
  216. , a = t.subarray(r.width * r.height * 1.25)
  217. , s = this._panoInfo.width
  218. , l = this._panoInfo.height;
  219. if (this._dynamic_textures[e] != null) {
  220. const u = this._dynamic_textures[e].getInternalTexture();
  221. if (u != null && u != null) {
  222. const c = this.engine._getTextureTarget(u);
  223. this.engine._bindTextureDirectly(c, u, !0),
  224. this.engine.updateTextureData(u, n, r.startX, l * 1.5 - r.startY - r.height, r.width, r.height),
  225. this.engine.updateTextureData(u, o, r.startX * .5, (l - r.startY - r.height) * .5, r.width * .5 - 1, r.height * .5 - 1),
  226. this.engine.updateTextureData(u, a, r.startX * .5 + s * .5, (l - r.startY - r.height) * .5, r.width * .5, r.height * .5),
  227. this.engine._bindTextureDirectly(c, null)
  228. }
  229. }
  230. }
  231. changePanoImg(e, t) {
  232. if (log$v.info(`[Engine] changePanoImg, id=${e}, pose=${t.pose.position.x},${t.pose.position.y},${t.pose.position.z}`),
  233. !this._isInDynamicRange(e))
  234. return log$v.error(`[Engine] ${e} is bigger than dynamic size set in PanoInfo`),
  235. Promise.reject(new XMaterialError(`[Engine] ${e} is bigger than dynamic size set in PanoInfo`));
  236. const r = ue4Position2Xverse(t.pose.position);
  237. return r && (this._dynamic_babylonpose[e] = {
  238. position: r
  239. }),
  240. new Promise((n,o)=>{
  241. try {
  242. typeof t.data == "string" ? (this.setPanoYUV420(!1),
  243. this._dynamic_textures[e].updateURL(t.data, null, ()=>{
  244. this._dynamic_textures[e].updateSamplingMode(Texture.NEAREST_SAMPLINGMODE)
  245. }
  246. )) : (this.isPanoYUV420() == !1 && this.initDynamicTexture(e, this._panoInfo.width, this._panoInfo.height),
  247. this.setPanoYUV420(!0),
  248. this._dynamic_textures[e].update(t.data),
  249. this._dynamic_textures[e].updateSamplingMode(Texture.NEAREST_SAMPLINGMODE)),
  250. n(this)
  251. } catch (a) {
  252. o(new XMaterialError(`[Engine] ChangePanoImg Error! ${a}`))
  253. }
  254. }
  255. ).then(n=>(t.fov != null && this._scenemanager.cameraComponent.changeCameraFov(t.fov * Math.PI / 180),
  256. this._dynamic_shaders[e].setFloat("isYUV", this._inputPanoYUV420 ? 1 : 0),
  257. this._dynamic_shaders[e].setTexture("texture_pano", this._dynamic_textures[e]),
  258. this._dynamic_shaders[e].setVector3("centre_pose", this._dynamic_babylonpose[e].position),
  259. !0))
  260. }
  261. setYUV420(e) {
  262. this._inputYUV420 = e
  263. }
  264. isYUV420() {
  265. return this._inputYUV420
  266. }
  267. setPanoYUV420(e) {
  268. this._inputPanoYUV420 = e
  269. }
  270. isPanoYUV420() {
  271. return this._inputPanoYUV420
  272. }
  273. getDynamicShader(e) {
  274. return this._dynamic_shaders[e]
  275. }
  276. _updatePureVideoShaderInput() {
  277. var e, t, r, n, o, a, s, l, u, c;
  278. if (this.scene.getLightByName("AvatarLight") ? ((e = this._lowModelShader) == null || e.setFloat("haveShadowLight", 1),
  279. (n = this._lowModelShader) == null || n.setTexture("shadowSampler", (r = (t = this.scene.getLightByName("AvatarLight")) == null ? void 0 : t.getShadowGenerator()) == null ? void 0 : r.getShadowMapForRendering()),
  280. (s = this._lowModelShader) == null || s.setMatrix("lightSpaceMatrix", (a = (o = this.scene.getLightByName("AvatarLight")) == null ? void 0 : o.getShadowGenerator()) == null ? void 0 : a.getTransformMatrix())) : ((l = this._lowModelShader) == null || l.setTexture("shadowSampler", this._videoTexture),
  281. (u = this._lowModelShader) == null || u.setMatrix("lightSpaceMatrix", new Matrix),
  282. (c = this._lowModelShader) == null || c.setFloat("haveShadowLight", 0)),
  283. this.scene.getLightByName("fireworkLight"))
  284. this.scene.registerBeforeRender(()=>{
  285. var h;
  286. this._lowModelShader.setFloat("fireworkLight", this.scene.getLightByName("fireworkLight").getScaledIntensity()),
  287. this._lowModelShader.setVector3("fireworkLightPosition", (h = this.scene.getLightByName("fireworkLight")) == null ? void 0 : h.position)
  288. }
  289. );
  290. else {
  291. const h = new PointLight("fireworkLight",new Vector3(0,0,0),this.scene);
  292. h.intensity = 0
  293. }
  294. }
  295. _updatePanoShaderInput(e) {
  296. var t, r, n, o, a, s, l, u, c, h;
  297. if (this._isInDynamicRange(e))
  298. if (this.scene.getLightByName("AvatarLight") ? ((t = this._dynamic_shaders[e]) == null || t.setFloat("haveShadowLight", 1),
  299. (o = this._dynamic_shaders[e]) == null || o.setTexture("shadowSampler", (n = (r = this.scene.getLightByName("AvatarLight")) == null ? void 0 : r.getShadowGenerator()) == null ? void 0 : n.getShadowMapForRendering()),
  300. (l = this._dynamic_shaders[e]) == null || l.setMatrix("lightSpaceMatrix", (s = (a = this.scene.getLightByName("AvatarLight")) == null ? void 0 : a.getShadowGenerator()) == null ? void 0 : s.getTransformMatrix())) : ((u = this._dynamic_shaders[e]) == null || u.setTexture("shadowSampler", null),
  301. (c = this._dynamic_shaders[e]) == null || c.setMatrix("lightSpaceMatrix", new Matrix),
  302. (h = this._dynamic_shaders[e]) == null || h.setFloat("haveShadowLight", 0)),
  303. this.scene.getLightByName("fireworkLight"))
  304. this.scene.registerBeforeRender(()=>{
  305. var f;
  306. this._dynamic_shaders[e].setFloat("fireworkLight", this.scene.getLightByName("fireworkLight").getScaledIntensity()),
  307. this._dynamic_shaders[e].setVector3("fireworkLightPosition", (f = this.scene.getLightByName("fireworkLight")) == null ? void 0 : f.position)
  308. }
  309. );
  310. else {
  311. const f = new PointLight("fireworkLight",new Vector3(0,0,0),this.scene);
  312. f.intensity = 0
  313. }
  314. }
  315. }