Level ofdetail
•Transferir como PPTX, PDF•
2 gostaram•477 visualizações
Examination of the approach for realizing Level Of Detail declaratively on the web contents.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Level ofdetail
Semelhante a Level ofdetail (20)
Mais de Satoru Takagi
Mais de Satoru Takagi (10)
Último
Último (20)
Level ofdetail
- 1. Level Of Detail Satoru Takagi KDDI W3C SVGWG
- 2. Use cases •High resolution images •Mapping •Technical Illustrations http://en.wikipedia.org/wiki/Level_of_detail
- 3. Implementations • http://www.microsoft.com/web/solutions/zoomit.aspx • google maps, openstreetmap etc.
- 4. W3C SVGWG Charter: http://www.w3.org/Graphics/SVG/2014/new-charter#deliverables 2. Deliverables Items jointly developed with Web Performance Working Group. • Lazyload for tiling and level of detail (new), and/or • Resource Hints (new, ED) My submission: Tiling and Layering Module for SVG 1.2 Tiny http://www.w3.org/Submission/2011/04/ Furthermore, in 1996: W3C Scalable Graphics Requirements http://www.w3.org/Graphics/ScalableReq
- 5. scale = 4 Determine the resource set*1 which should be used based on scale media query*2 scale <= 1 1 < scale <= 2 2 < scale Media query list: Sequence: STEP1 (Level selection) *1: Assume the picture element or picture element-like functionality which chooses a set of images. These images are arranged like a mosaic tile. *2: Assume that scale will be added to the media feature in the future.
- 6. Viewport Determine needed resources in the set and fetch them based on viewport *1 Sequence: STEP2 (Tile selection) *1: Assume that a property such as load-policy="when-needed“ or postpone*2 can be used in the future. *2:[whatwg] Preloading and deferred loading of scripts and other resources From: Ian Hickson http://goo.gl/I40ytT
- 7. Draft sample content code root.html <html> <p style="overflow:hidden;width:100vw;height:100vh"> <iframe src="container.html" style="transform:translate(0,0),scale(1)"/> </p> <!-- some zoom/pan UIs --> </html> container.html <html> <picture> <source sizes="100vw" media="(min-scale2D: 2x)" srcset="largeImage.svg"> <source sizes="100vw" media="(min-scale2D: 1x)" srcset="midImage.svg"> <img sizes="100vw" src="smallImage.png" alt="a beautiful parrot"> </picture> </html> largeImage.svg <svg width="1024" height="768"> <image load-policy="when-needed" href="large0_0.png" x="0" y="0" width="256" height="192"/ <image load-policy="when-needed" href="large1_0.png" x="0" y="192" width="256" height="192"/> <image load-policy="when-needed" href="large2_0.png" x="0" y="384" width="256" height="192"/> <image load-policy="when-needed" href="large3_0.png" x="0" y="576" width="256" height="192"/> <image load-policy="when-needed" href="large0_1.png" x="256" y="0" width="256" height="192"/> <image load-policy="when-needed" href="large1_1.png" x="256" y="192" width="256" height="192"/> <image load-policy="when-needed" href="large2_1.png" x="256" y="384" width="256" height="192"/> <image load-policy="when-needed" href="large3_1.png" x="256" y="576" width="256" height="192"/> <image load-policy="when-needed" href="large0_2.png" x="512" y="0" width="256" height="192"/> <image load-policy="when-needed" href="large1_2.png" x="512" y="192" width="256" height="192"/> <image load-policy="when-needed" href="large2_2.png" x="512" y="384" width="256" height="192"/> <image load-policy="when-needed" href="large3_2.png" x="512" y="576" width="256" height="192"/> <image load-policy="when-needed" href="large0_3.png" x="768" y="0" width="256" height="192"/> <image load-policy="when-needed" href="large1_3.png" x="768" y="192" width="256" height="192"/> <image load-policy="when-needed" href="large2_3.png" x="768" y="384" width="256" height="192"/> <image load-policy="when-needed" href="large3_3.png" x="768" y="576" width="256" height="192"/> </svg> midImage.svg <svg width="512" height="384"> <image load-policy="when-needed" href="mid0_0.png" x="0" y="0" width="256" height="192"/ <image load-policy="when-needed" href="mid1_0.png" x="0" y="192" width="256" height="192"/> <image load-policy="when-needed" href="mid0_1.png" x="256" y="0" width="256" height="192"/> <image load-policy="when-needed" href="mid1_1.png" x="256" y="192" width="256" height="192"/> </svg>