XMaterialComponent.js 20 KB

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