Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Level Of Detail
Satoru Takagi
KDDI
W3C SVGWG
Use cases
•High resolution images
•Mapping
•Technical Illustrations
http://en.wikipedia.org/wiki/Level_of_detail
Implementations
• http://www.microsoft.com/web/solutions/zoomit.aspx
• google maps, openstreetmap etc.
W3C
SVGWG Charter:
http://www.w3.org/Graphics/SVG/2014/new-charter#deliverables
2. Deliverables
Items jointly developed wi...
scale = 4
Determine the resource set*1 which
should be used based on scale media
query*2
scale <= 1 1 < scale <= 2 2 < sca...
Viewport
Determine needed resources in the set
and fetch them based on viewport *1
Sequence: STEP2 (Tile selection)
*1: As...
Draft sample content code
root.html
<html>
<p style="overflow:hidden;width:100vw;height:100vh">
<iframe src="container.htm...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Chap 5 Estimating Project Times
Next
Upcoming SlideShare
Chap 5 Estimating Project Times
Next
Download to read offline and view in fullscreen.

Share

Level ofdetail

Download to read offline

Examination of the approach for realizing Level Of Detail declaratively on the web contents.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Level ofdetail

  1. 1. Level Of Detail Satoru Takagi KDDI W3C SVGWG
  2. 2. Use cases •High resolution images •Mapping •Technical Illustrations http://en.wikipedia.org/wiki/Level_of_detail
  3. 3. Implementations • http://www.microsoft.com/web/solutions/zoomit.aspx • google maps, openstreetmap etc.
  4. 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. 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. 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. 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>
  • ArpitRaina1

    May. 31, 2017
  • chris.little

    Oct. 29, 2015

Examination of the approach for realizing Level Of Detail declaratively on the web contents.

Views

Total views

447

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

5

Shares

0

Comments

0

Likes

2

×