When trying to display large-scale point cloud data (LiDAR/LAZ) in a web browser, the browser may crash due to insufficient memory. This article introduces how to display millions of points without stress using Potree ’s LOD (Level of Detail) technology.
https://3dtiles-viewer.vercel.app/potree-lod-viewer.html
Data Used# Challenge# Trying to load this data directly with Three.js or similar libraries may cause the browser to freeze.
Solution: Potree# Potree is a WebGL-based viewer for large-scale point cloud data. Through LOD (Level of Detail) , it displays areas near the camera in detail and distant areas coarsely, enabling smooth operation even with billions of points.
How It Works# Spatially divide the point cloud using an octree structure Store data at different levels of detail in each node Dynamically load only the necessary nodes based on the viewpoint Procedure# 1. Download the LAZ File# c u r " l h t - t L p s : / / u o t b a j h e _ c c t a . p c i l t o o u l d . . l s a d z s c \ . e d u / v 1 / A U T H _ o p e n t o p o g r a p h y / w w w / e d u c a t i o n / M a t l a b T o p o / U t a h _ s t a t e _ c a p i t o l . l a z " Run PotreeConverter using Docker.
# d # d o o D c 変 c s P o k 換 k y o c e 実 e n t k r 行 r $ $ t r e ( ( h e r p r p p 3 e イ u u w w d C メ l n d d / o ー l ) ) p n ジ : o v の s - o t e 取 y r d u r r 得 n m a t e t t t p e e h \ a u c r 3 t o d \ : n / / / d p o e a o u r t t t t a r p e / e u r u e t t c \ a o \ h n _ v c e a r p t i e t r o l . l a z o u t p u t / u t a h _ c a p i t o l Output :
A m m s c 3 d A i a p o 4 u B n x a n 8 r B : : c v 1 a : i e 5 t [ [ n r 1 i 4 4 g s 2 o 2 2 i n 4 5 c o p : 8 2 a n o 8 7 l i 1 9 0 c f n . , , u i t 8 l n s 1 4 4 a i 9 . . t s w s 5 5 e h e 1 1 d e r 4 4 d e 2 7 f 7 1 r p e e o r + + m o 0 0 c 6 6 d e , , i s a s 1 1 g e 3 4 o d 5 5 n 0 8 a a . . l n 4 5 : d 2 7 ] ] 3 3 . 4 7 8 8 1 9 5 7 1 3 2 p o i n t s ( 1 0 0 % ) w e r e w r i t t e n t o t h e o u t p u t .
Converted Size : 54MB
Generated file structure:
u ├ ├ └ t ─ ─ ─ a ─ ─ ─ h _ c s d └ c l o a ─ a o u t ─ p u r a i d c / r ├ ├ └ t . e / ─ ─ ─ o j s ─ ─ ─ l s . / j r r s . . o b h n i r n c # # # # メ ル 階 多 タ ー 層 数 デ ト 情 の ー ノ 報 ノ タ ー ー ド ド
3. Prepare the Potree Library# Download and place Potree 1.8.
# c # u m # r r r u n v m m m ダ r h 解 z 不 ウ l t 凍 i P 要 - - - ン t し p o な r r r ロ - p て t フ f f f ー L s 配 p r ォ ド : 置 o e ル j j j t e ダ s s s / r _ を / / / g e 1 削 l l l p i e . 除 i i i o t - 8 （ b b b t h 1 サ s s s r u . j イ / / / e b 8 s ズ P P P e . . / 削 o o o - c z l 減 t t t 1 o i i : r r r . m p b e e e 8 s 1 e e e . p / 2 _ _ _ z o 1 1 1 1 i t M . . . p r B 8 8 8 e / / / \ e → p e d / o x o p 6 i a c o 4 n m s t M t p r B c l e ） l e e o s / u r d e s l e a s e s / d o w n l o a d / 1 . 8 / P o t r e e _ 1 . 8 . z i p 4. Create the Viewer HTML# < < < < ! h h / b / / D t e < < < < < < < < < < < < < < < < < < < < h o < < b h O m a m t ! s s s s s s s s s s s ! l l l l s / e d d s / o t C l d e i - c c c c c c c c c c c - i i i i t h # s a y i c c v v v v c c P } s d m T > t t - r r r r r r r r r r r - n n n n y t p t d > v r o i i i i o o o ) c y l Y l a l i i i i i i i i i i i k k k k l m o y > i n e e e e n n t c p p p v v ; r > > P a e P p p p p p p p p p p p P e l t l i p ビ s w w w w U s s 点 r o o o o i i i E n c > o t t t t t t t t t t t o r r r r > , r e d t ュ t e e e e R t t 群 e n i i i e e p g h P t t e e e e e > = > ー r r r r L を e s マ n n n w w t h = a o r s s s s s s s s s s s r l l l l b e " ア v . . . . パ p d 読 . t テ t t t e e > t " r i e r r r r r r r r r r r e = = = = o _ p 初 i s s s s ラ a a み l リ c c c r r m j s n e c c c c c c c c c c c e " " " " d c o 期 e e e e e メ r t 込 o p ア l l l . . l a e t = = = = = = = = = = = s s s s y o t 化 w t t t t ー a a み a o ル o o o s f > " t d " " " " " " " " " " " C t t t t n r e E F P B タ m P d i 設 u u u c i > = C e j j j j j j j j j j j S y y y y { t e r D O o a か s a P n 定 d d d e t " l p s s s s s s s s s s s S l l l l a e L V i c ら t o t . . . n T U o e / / / / / / / / / / / e e e e w i _ = E ( n k デ = h i c m m m e o T u n l l l l l l l l l l l s s s s i n c n 6 t g ー n l a a a . S F d d i i i i i i i i i i i h h h h d e o n a 0 B r タ n = t o t t t a c - e b b b b b b b b b b b e e e e t r n e b ) u o パ e C u e e e d r 8 V n s s s s s s s s s s s e e e e h t w l ; d u ス w p l d r r r d e " i c / / / / / / / / / / / t t t t : { a e g n を a o i i i P e > e i P P P P P P P P P P P " " " " i P d e d 取 U r u = a a a o n w e o o o o o o o o o o o 1 p n o ( t ( 得 R a d l l l i ( e s t t t t t t t t t t t h h h h 0 o e t t ( " L m ( e . . . n ) r r r r r r r r r r r r r r r r 0 s r r r 3 g S s d . s p s t ; e e e e e e e e e e e e e e e % i " e u _ r e . a p i o h C ( e e e e e e e e e e e f f f f ; t > e e 0 a a g t o z i a l P _ _ _ _ _ _ _ _ _ _ _ = = = = i < . ) 0 d r e a i e n p o o 1 1 1 1 1 1 1 1 1 1 1 " " " " h o / V ; 0 i c t P n t e u t . . . . . . . . . . . j j j j e n d i _ e h ( a t = S d r 8 8 8 8 8 8 8 8 8 8 8 s s s s i : i e 0 n P ' t c i = ( e / / / / / / / / / / / / / / / g v w 0 t a d h l 1 z p e l l l l l l l l l l b l l l l h a > e 0 " r a , o ; e P o ) i i i i i i i i i i u i i i i t b r ) ) a t u T o i < b b b b b b b b b b i b b b b : s ( ; ; m a " d y t n / s s s s s s s s s s l s s s s o d s ' p ; p r t t / / / / / / / / / d / / / / 1 l o ( ) o e e c i j s j t t d p i j / P P P P 0 u c w i e l t q p q h t w 3 r 1 s p o o o o 0 t u i n = . o l u e u r h e / o 8 t o t t t t % e m n t P u e e c e e e e d j n r t r r r r ; ; e d c P o d > r t r e r n 3 4 e e r e e e e n o ' l o i ) y r y . / / . / x e e e e e e m w t w f o t n ; / u - j B t j p t e _ _ _ _ a i . E 一 . i u r t j m u s i w s r j / 1 1 1 1 r d g y 度 l l d e S q / i n e " i s p . . . . g t e e に o e " e h u s b a e > j 1 t o 8 8 8 8 i h t - 表 c s , . a e p j u r n < 4 8 r t / / / / n : E D 示 a / P p r e q i y . / . n e r l l l b : l o す t u f o e y c u l H m s j e e e i i i u 1 e m る i t u i . - t e d e i c s x . e b b b i 0 0 m e 最 o a n n C 3 r r / a n r " t j . s s s l ; 0 e 大 n h c t I . u y t p . i > . s j / / / d % n L 点 . _ t S R 1 m - h . j p < j " s s j j / ; t i 数 s c i i C . . u r j s t / s > " p q s p v B g e a o z L 1 j i e s " > s " < > e u t o e h y h a p n e E . s . e " > c > / < c e r t r e I t r i ( T ; m " m . > < r < s / t r e r f i d i c t e y i > i m < i / c s r y e e l g ( n h o ) p n < n i s p s r c u - / e o h " g ) l e . / . n s c t c i r m u t / w t p ; / { . j s j . c r > r p i / i h p : : o c A s c s j r i i t p s / e o t l D " r " s i p p > t p j m t h 1 r o A > i > " p t t > e q e r i 0 e u P < p < > t > > c u s e d 0 e d T / t / < > t e / e d % _ . I s > s / r r m . e ; c j V c c s u y i c n o s E r r c m - x s ; } n ' ; i i r . u e s t ; p p i c i d " } a t t p s . / > i > > t s m s n > " i t e > n y r . l " c e ) s . ) s c ; " s > s " > 5. Deploy# Push to GitHub and publish on Vercel/GitHub Pages.
g g g i i i t t t a c p d o u d m s m h d i o t o c r s - i / m g p i o " n t A r d m e d a e i - P n l o o t d r - e v e i e L w O e D r . p h o t i m n l t d c o l c o s u / d j s / i l e i w b e s r / P w o i t t r h e e U _ t 1 a . h 8 C d a o p c i s t / o f l i l d e a s t / a u " t a h _ c a p i t o l Results# Demo URL : https://3dtiles-viewer.vercel.app/potree-lod-viewer.html?data=files/utah_capitol/cloud.js
Item Value Data Source OpenTopography LAZ Size 15MB Converted Size 54MB Total Points 3,481,512 Point Budget 3,000,000 Performance Smooth
When zooming the camera, detailed nodes are automatically loaded.
Point Budget : Limit the number of points drawn at once with viewer.setPointBudget(3_000_000)Adaptive Point Size : Automatically adjust point size based on distanceEDL (Eye-Dome Lighting) : Enhance depth perception for improved visibilityIntegration with IIIF Presentation API 3.0# To attach metadata (title, source, license, etc.) to point cloud data, we leverage IIIF Presentation API 3.0 .
Creating the IIIF Manifest# { } " ] " " " } " } " ] " " } " ] " ] @ , i t l , s , m , r r , p , i c " { } d y a " " u " " e { } { } { } i e " " r { } t { } o h " p b e j m e j t , , g q l v o e n t " " " : e e n a m n a a " " " " " " h u a a v " " " " ] m " " " ] t t p c p " l " " a " " d l v l v l v t i b l i i t l h s i t i e p o l o " : " : : r : : a a a a a a a s r e u d d y a o { } " d y t { } x : t o i h : y t b l b l b l " e l e e " p b m : " p e t / r u n t " [ [ " [ [ a e u e u e u : d " " r : e e e " " " : e m " " " ] " / e d t t M { " " : " " " l e l e l e S : : " " l p i t f [ " s i t i : i e U C p a U ユ L ユ : " " " " " " " t : " : " a d y o " : " d y t { } i " r o s n t タ { i タ : : : : : : h a { { h : g " p r h : " p e [ i : l u : i a 州 D 州 [ t t [ t " e : e m t " : e m " " " " } " f " n / f h 議 A 議 { { { { { { t e " " t A { " " a t S [ " s i t m b , t . " : t / e 事 R 事 p m e e p g : " : t p c " : " d y o o " " " " " a i h " e s S 堂 堂 " " " " " " s e n n s e " h " s e h : " p t d i t f c p r o t " : x t t " p の e e e e e e : n " " : n e [ t " : : n t " : e i y d y o l o g / t p a " a ] o L n n n n n n / t : : / t n t T / e t A [ " v " " p r o i e a p o " m , t i i " " " " " " / " / " " p e " / " p n " : a : : e m u n t p s t p p e n D : : : : : : c : [ [ o , : s x t e , s n h t " a d t " i : r o l t A r " " p : t e x : t " i { " : t U C : / / e t e C R [ [ [ [ [ [ e { A D e [ / " x a t t A o h " r o p / e r . a c 点 " " " " " " a t a n " / , t m / a p n n t " : l u " r p : e c p l 群 F P P 3 L S t t t t O o / p e t s n " t M " n h e o c e o i o デ o o o , o a i r a o p p h l x i : : p o " : t t s t l : m t u ー r t i 4 c l v i p e e t e a o t s d a " t e r o p / o d タ m r n 8 a t e b p o n n m . m n / a " : e p " : p n e u o i l " a e t 1 t c u r g T t l c p P e t p / l p h s t e d i i " o ] t e , i L o t o r o o " o l a x i a / " l t 3 : a . U n i ] f " C 5 o a m i v a p p m e g a o i e , i t 4 / t g r t f , ] 1 o 1 n k m o i p o o / . e m n n x c p 8 / i i l C / t . u 2 " e o n d h g g i c " p " t a a s 1 e o t " o u h } 7 n " ] n " e y r r i o , l , i m t : 5 x n h , u t e , " t ] C s ] d . a a i m e n p i 1 a / u n a ] " } i . o p p f / . g l / 2 m 3 b t h U ] } , t o } b r h h / i c " e n e p / . " _ t } y r , y g y y u i o , . / x l c i c a } , g / " . t i m c j a e o o a h , / O " ] o a f / o s m . n / p U l p , r h / i m o p c t n i S t i e } g _ u i / n l o e s t t a c n , / c t i f " e m x # o a h e T " a a f i , . / t " l t , n o , p h / l c i . , / e s p i _ u e o i j m U e o t c t s m i s a C S s g o a a / / f o n a A / r l p h u f / n i p " b a / i _ t i u " f i ] y p m t c a l t , e t / h a o a h e a s o } 4 y n l p _ s h t l . " i / i c / _ . 0 ] f m t a u c j b / e a o p t a s u " } s n l i a p o i , t i / t h i n l . f m o _ t " d j e a l c o , i s s n / a l n o t i c p / g n . f l i m " / j e o t a ] s s s u o n , c o t d l i e n . . / f n / j j c e e a s s l s / n o " o t 1 n n , u . " o / d j , t a . s a n j o t n s n i o " / o t , s n a c - t e p i n a o e g n / e / 1 / 1 " 1 " " , , Key Manifest Properties# Property Description labelTitle (multilingual support) summaryDescription text metadataMetadata such as format, point count, location rightsLicense URL requiredStatementRequired attribution statement providerData provider information items[].body.cloudUrlURL to Potree cloud.js
Loading the Manifest in the Viewer# c f o e n t . . } マ s c t t ) ニ t h h h c d i } c l ; フ ( e e o o f o o ェ m m n n n c c d n a ス a a ( ( タ s u ラ ( o o 点 s d ト n n r m イ t m イ m n c ` 群 t P U i i e a ト e セ a s u < デ o R f f s n ル t n ン n t m a ー c i L e e i 表 i t ス i e タ l n か s s = f 示 t . 表 f l n h の o t ら t t > e l g 示 e i t r U u C メ U U s e e s c . e R d l タ r r r t t t e g f L U o デ l l e = E . n e = 取 r u ー ) s = l r s t " 得 l d タ = . > m e i e E $ ( を j a m g N l { = c 取 ' s { n e h a e m l 得 i o i n t m m a m o i n f t s e e n a u i ( e B ) n i n d f ) s y = t f i U / ) t I { B e f r u . d m y s e l t l ( a I t s ) a a ' n d . t ; h b t i ( r . _ e i f ' i i c l t e l g t a ? l s i h e p . e t c t m i j ' . e s s t a ) r n } [ o ? . i s " 0 l . t g e > ] / [ e h ' $ . m 0 x t ) { i a ] t s . l t n C . i i e i i n c m f n n n e s e t c e n [ s m e l r s 0 t a n u H e ] . n t d T N . j i e M a i s f = s L m t o e ( e e n s t ' = } m ' t i b < s ; . t y / [ l l / a 0 a e 4 > ] b ; . ` . e 0 ; b l ' o ? ) d . y e ? . n c ? ' l . C o [ C u 0 d ] B U ; Y r l 4 ; . 0 ' : ' L i c e n s e ' ; Usage# # p # p o o マ t 直 t ニ r 接 r フ e デ e ェ e ー e ス - タ - ト l を l か o 指 o ら d 定 d 読 - （ - み v メ v 込 i タ i み e デ e （ w ー w メ e タ e タ r な r デ . し . ー h ） h タ t t 表 m m 示 l l あ ? ? り m d ） a a n t i a f = e f s i t l = e i s i / i u f t / a u h t _ a c h a _ p c i a t p o i l t / o c l l / o m u a d n . i j f s e s t . j s o n
Benefits of Using IIIF# Standardized metadata format - Compatibility with other IIIF-compatible toolsMultilingual support - Support for multiple languages in label and summaryLicense and attribution clarity - Legal information provided through rights and requiredStatementData provider information - Clear data provenance through providerExtensibility - Custom contexts allow adding Potree-specific propertiesSummary# LOD is essential for displaying large-scale point cloudsPotreeConverter (Docker) makes conversion easyPotree 1.8 smoothly displays millions of points or moreIIIF Presentation API 3.0 standardizes metadataAdditional data can be loaded via ?manifest=path/to/manifest.json Reference Links# 