Angular project, Plotly.js & WebGL is not supported issue

로컬에서는 Plotly가 잘 작동되었다. 그리고 배포이후에도 잘 작동되었는데, 1개월 후 정도 지난 뒤 서비스에서 "WebGL is not supported by your browser" 문구가 Plotly 차트가 있어야할 부분에 크게 써있었다.

해당 문구를 클릭하면 내가 접속한 디바이스에서 WebGL이 구동될 수 있는 환경인지 확인해주는 페이지로 이동했고, 정상적으로 구동되는 것을 보여주었다. (3D 와이어프레임 상자가 회전하는 모습이 보이면 정상)

 

 

구체적인 이슈 상황을 정리하자면...

1. 2D type의 그래프는 정상적으로 나오나, 3D 타입(scatter3d, mesh3d)의 그래프는 " WebGL is not supported by your browser" 문구와 함께 canvas가 생성되지 않는다.

2. 되었다가 안된다

3. 로컬 환경에서는 되고, 배포 후 서버에 올라간 상태에서는 안된다.

 

 

1. Plotly 버전 업데이트때문에??

서비스가 최초로 배포된 뒤 정상적으로 작동되는 것을 분명히 확인하였다. 배포 당일뿐만 아니라 그 한 주는 계속 확인했었는데 문제가 없었다. Plotly를 CDN으로 불러오는 것이 아니고 npm으로 다운받은 상태이기 때문에 Plotly의 버전 업데이트에 의한 문제는 아닐것이다.

 

2. 사용자의 브라우저환경때문에??

브라우저에서 일부러 환경설정을 바꾸는 경우는 없을 것이다. 그리고 혹시나해서 환경설정 부분을 확인했을때 WebGL이 사용하는 GUI, 하드웨어 accelate 에 대한 설정에는 문제가 없었다.

 

 

 

 

 

can I use 페이지에서 보면 요즘 브라우저에서는 웬만해서 WebGL이 다 되는 것을 알 수 있다.

 

 

 

 

 

3. 번들링 문제??

project.json에서 설정환경들을 보았을때 크게 이슈될 부분은 없었다. build option에서 buildOptimizer, optimization 값이 fasle이기 때문에 Angular가 스스로 최적화 작업을 하며 소스를 건드리지는 않았을 것이다.

(내가 생각했을때는 번들링 문제가 유력해 보였다. 두 상황의 차이점은 번들링 전과 그  후, 그 것 밖에 없어보였기 때문에)

 

4. Plotly가 너무 많은 데이터를 그리려고 하기 때문에??

 

 

실제로 Plotly가 처리하는 데이터가 많기는 하다. 사용자에게 시각적으로 보다 더 효과적으로 설명하기 위해 오른쪽과 같이 여러 3D 모델을 사용했고, 3D 모델 생성에 필요한 geometry가 상당히 크다.

위 이미지에서 보이는 것처럼 각 모델들에 대한 geometry를 위 csv 파일로 불러와 그려준다. ( 농장(내부/외부), 동/서/남/북, 온도를 표시하는 면들...)

농장을 표현하는 3D 모델만 그리도록 하였는데 문제는 해결되지 않은 것으로 보아 앞서 말한 많은 데이터를 처리하며 발생하는 문제는 아니었다.

 

chatGPT에 물어 보며 대략 하루하고 반나절을 해결하려 했으나 결론나지 않았고, 구글링을 해보니 이미 나와 같은 상황에 처한 사람들이 많았다. 문제를 해결했다는 게시글 두개를 발견했는데

 

그가 해결한 첫 번째 방법은 (해당 게시글)

"PlotlyViaWindowModule" 를 사용하여 Plotly를 번들링 목록에서 제외시켜 배포할때 따로 script 파일로 가져오는 것. (적용방법)

결론을 먼저 말하자면 문제를 해결하지는 못했다. 이 방법을 시도하면서 깨달은 것은 프로젝트를 빌드할때 8mb 정도의 budget이 잡히는 것 Plotly 라이브러리 하나만 사용하는데 비교적 많은 용량을 차지한다.)

 

나머지 하나는 plotly.js 를 압축버전이 아닌 풀버전으로 사용하는 것.

이제 잘 나오더라... 나는 npm으로 angular plotly 를 검색했고, 거기서는 아래와 같이 다운받으라고 해서 그렇게 했는데

 

$ npm install angular-plotly.js plotly.js-dist-min --save
$ npm install @types/plotly.js-dist-min --save-dev

 

plotly.js-dist-min 이 아닌 plotly.js-dist 로 사용해야 압축되지 않는 소스를 받게되더라...

 

자 그렇다면 게시글 제일 위에서 언급한 첫 번째 이슈는 해결되었다. 그렇다면 왜 되었다가 안되었을까??

그리고 압축버전이 로컬 환경에서는 되는데 배포후에 서버에 올라가면 안되는걸까?? 이 것들은 영영 미스테리이다.

 

서비스 URL → https://testfarm.farmcloud.kr/multisensor/multi-sensor