XMaterialComponent.js 19 KB

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