Poster: Scalable 3D molecular graphics on the web @ 3Dsig and Web3D 2016

The interactive visualization of very large macromolecular complexes on the web is becoming a challenging problem as experimental techniques advance at an unprecedented rate and deliver structures of increasing size. We have tackled this problem by introducing the binary and compressed M​a​croM​o​lecular T​r​ansmission F​o​rmat (MMTF) to reduce network transfer and parsing time, and by developing N​GL,​a highly memory­efficient and scalable WebGL­-based viewer. NGL renders molecular complexes with millions of atoms interactively on desktop computers and smartphones alike, making it a tool of choice for web-­based molecular visualization in research and education.

Scalable	3D	molecular	graphics	on	the	web
PDB a billion atom archive
Steps 1 + 2: Speeding-up download & parsing
Funding and acknowledgements
Step 4: Molecular representations geometry
Step 3: Efficient storage & access
Steps to display a structure
Growth of the PDB archive
Step 5: Rendering without plugins
Does it scale?
>	1	Billion	atoms	in	the	asymmetric	units
Instancing:	Create	geometry	once,	
send	to	GPU	once,	then	transform	
position	&	render	multiple	times.	
• Green	surface	is	reused	59	times	for	
highly	symmetric	virus	capsid
Impostors:	For	each	pixel	GPU	tests	
intersection	of	sphere	and	camera	
ray	to	reduce	triangle	count.	
• Quality	resolution	independent

as	more	pixels	are	tested	
• Impostors	also	used	for	cylinders.
• Java	Applets	have	provided	fast	execution	and	GPU	access	
• Removed	from	Google	Chrome	in	version	45	(Sep	2015)	
• Oracle	to	deprecate	Java	plugin	in	upcoming	JDK	9	
• Browsers	don’t	need	plugins	anymore	
• JavaScript	approaches	native	speed	
• WebGL	offers	plugin-free	access	to	the	graphics	card
HIV-1	capsid	at	three	scales:	
216	hexameric	and

12	pentameric	subunits,	
~2.4M	unique	atoms
Faustovirus	major	capsid:	
2760	instances	of		
14478	unique	atoms,	
~40M	overall	atoms
Alexander	S.	Rose,	Anthony	R.	Bradley,	Yana	Valasatava,

	Jose	M.	Duarte,	Andreas	Prlić,	Peter	W.	Rose
• Largest	structure:	HIV-1	Capsid	(PDB	ID	3J3Q)	
• ~2.4M	unique	atoms	
• gzipped	mmCIF	file:	48.7MB	
• 68	of	the	100	largest	structures	deposited	in	past	3	years	
• Advances	in	experimental	techniques	fuel	the	growth
Download	File	
Decompress	&	Parse	
Populate	Data	Model	
Create	Geometry	
Render
BD2K Grant: U01 CA198942 RCSB PDB Team
• MMTF	
• Libraries	&	Specification:	http://mmtf.rcsb.org	
• NGL	Viewer	
• Supports	MMTF,	uses	columnar	stores	&	WebGL	
• Openly	developed:	https://github.com/arose/ngl
AS	Rose	&	PW	Hildebrand.	
NGL	Viewer:	a	web	application	for	molecular	visualization.	
Nucl.	Acids	Res.	(1	July	2015)	43	(W1).	doi:10.1093/nar/gkv402
• The	PDB	archive	is	growing:	structures	are	getting	larger	and	more	complex	
• Here	we	present	approaches	for	scalable	3D	molecular	graphics	on	the	web	
• The	MMTF	format	provides	highly	compressed	structure	files	
• The	NGL	Viewer	efficiently	stores	&	renders	millions	of	atoms	
• Even	the	largest	structures	can	be	rapidly	downloaded	&	displayed	in	about	
1	second	to	1	minute	depending	on	device	and	connection	speed
NGL	Viewer
• MacroMolecular	Transmission	Format	(MMTF)	
• New	file	format,	optimized	for	transmission	of	macromolecules	
• Binary	-	for	fast	parsing		
• MessagePack	“binary	JSON"	as	an	extensible	container	
• Bespoke	compression	strategies	-	for	small	file	size	
• Comparison	with	mmCIF	(whole	PDB	archive,	gzipped)	
• Size	reduced	by	a	factor	of	>4	(30GB	to	7GB)	
• Parsing	time	reduced	by	a	factor	of	~12	(205	min	to	17	min)

using	JavaScript	libraries
MMTF
• Columnar	stores	
• Single	TypedArray	per	property	
• Parsed	data	can	be	copied	in	blocks	
• Convenient	access	via	proxy	objects
Software availability
PDB	ID	1RB8
PDB	ID	3J3Q
PDB	ID	5J7V
Impostor	Geometry

2	Triangles
Normal	Geometry

320	Triangles
1. 		
2. 		
3. 		
4. 		
5.

Recommended

Agricultural and research information by
Agricultural and research informationAgricultural and research information
Agricultural and research informationOmid Minooee
11.1K views459 slides
project work on BIG BAZAAR by
project work on BIG BAZAARproject work on BIG BAZAAR
project work on BIG BAZAARgulab sharma
57K views40 slides
Data presentation 2 by
Data presentation 2Data presentation 2
Data presentation 2Rawalpindi Medical College
124.8K views36 slides
Web-based visualization of 3D distance restraints integrated with NGL molecul... by
Web-based visualization of 3D distance restraints integrated with NGL molecul...Web-based visualization of 3D distance restraints integrated with NGL molecul...
Web-based visualization of 3D distance restraints integrated with NGL molecul...Alexander Rose
483 views1 slide
ChatGPT and the Future of Work - Clark Boyd by
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
28K views69 slides
Getting into the tech field. what next by
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
6.6K views22 slides

More Related Content

Recently uploaded

Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe... by
Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...
Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...Anmol Vishnu Gupta
28 views12 slides
selection of preformed arch wires during the alignment stage of preadjusted o... by
selection of preformed arch wires during the alignment stage of preadjusted o...selection of preformed arch wires during the alignment stage of preadjusted o...
selection of preformed arch wires during the alignment stage of preadjusted o...MaherFouda1
7 views100 slides
BLOTTING TECHNIQUES SPECIAL by
BLOTTING TECHNIQUES SPECIALBLOTTING TECHNIQUES SPECIAL
BLOTTING TECHNIQUES SPECIALMuhammadImranMirza2
11 views56 slides
CYTOSKELETON STRUCTURE.ppt by
CYTOSKELETON STRUCTURE.pptCYTOSKELETON STRUCTURE.ppt
CYTOSKELETON STRUCTURE.pptEstherShobhaR
14 views19 slides
Note on the Riemann Hypothesis by
Note on the Riemann HypothesisNote on the Riemann Hypothesis
Note on the Riemann Hypothesisvegafrank2
8 views20 slides
IMMUNODIAGNOSTICS KITS.pdf by
IMMUNODIAGNOSTICS KITS.pdfIMMUNODIAGNOSTICS KITS.pdf
IMMUNODIAGNOSTICS KITS.pdfvetrivel303632
20 views10 slides

Recently uploaded(20)

Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe... by Anmol Vishnu Gupta
Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...
Study on Drug Drug Interaction Through Prescription Analysis of Type II Diabe...
selection of preformed arch wires during the alignment stage of preadjusted o... by MaherFouda1
selection of preformed arch wires during the alignment stage of preadjusted o...selection of preformed arch wires during the alignment stage of preadjusted o...
selection of preformed arch wires during the alignment stage of preadjusted o...
MaherFouda17 views
Note on the Riemann Hypothesis by vegafrank2
Note on the Riemann HypothesisNote on the Riemann Hypothesis
Note on the Riemann Hypothesis
vegafrank28 views
A giant thin stellar stream in the Coma Galaxy Cluster by Sérgio Sacani
A giant thin stellar stream in the Coma Galaxy ClusterA giant thin stellar stream in the Coma Galaxy Cluster
A giant thin stellar stream in the Coma Galaxy Cluster
Sérgio Sacani20 views
Determination of color fastness to rubbing(wet and dry condition) by crockmeter. by ShadmanSakib63
Determination of color fastness to rubbing(wet and dry condition) by crockmeter.Determination of color fastness to rubbing(wet and dry condition) by crockmeter.
Determination of color fastness to rubbing(wet and dry condition) by crockmeter.
ShadmanSakib636 views
별헤는 사람들 2023년 12월호 전명원 교수 자료 by sciencepeople
별헤는 사람들 2023년 12월호 전명원 교수 자료별헤는 사람들 2023년 12월호 전명원 교수 자료
별헤는 사람들 2023년 12월호 전명원 교수 자료
sciencepeople68 views
Presentation on experimental laboratory animal- Hamster by Kanika13641
Presentation on experimental laboratory animal- HamsterPresentation on experimental laboratory animal- Hamster
Presentation on experimental laboratory animal- Hamster
Kanika136416 views
Oral_Presentation_by_Fatma (2).pdf by fatmaalmrzqi
Oral_Presentation_by_Fatma (2).pdfOral_Presentation_by_Fatma (2).pdf
Oral_Presentation_by_Fatma (2).pdf
fatmaalmrzqi8 views
Applications of Large Language Models in Materials Discovery and Design by Anubhav Jain
Applications of Large Language Models in Materials Discovery and DesignApplications of Large Language Models in Materials Discovery and Design
Applications of Large Language Models in Materials Discovery and Design
Anubhav Jain14 views
2. Natural Sciences and Technology Author Siyavula.pdf by ssuser821efa
2. Natural Sciences and Technology Author Siyavula.pdf2. Natural Sciences and Technology Author Siyavula.pdf
2. Natural Sciences and Technology Author Siyavula.pdf
ssuser821efa12 views
Best Hybrid Event Platform.pptx by Harriet Davis
Best Hybrid Event Platform.pptxBest Hybrid Event Platform.pptx
Best Hybrid Event Platform.pptx
Harriet Davis10 views
Vegetable grafting: A new crop improvement approach.pptx by Himul Suthar
Vegetable grafting: A new crop improvement approach.pptxVegetable grafting: A new crop improvement approach.pptx
Vegetable grafting: A new crop improvement approach.pptx
Himul Suthar8 views
Evaluation and Standardization of the Marketed Polyherbal drug Patanjali Divy... by Anmol Vishnu Gupta
Evaluation and Standardization of the Marketed Polyherbal drug Patanjali Divy...Evaluation and Standardization of the Marketed Polyherbal drug Patanjali Divy...
Evaluation and Standardization of the Marketed Polyherbal drug Patanjali Divy...

Featured

Introduction to Data Science by
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data ScienceChristy Abraham Joy
82.6K views51 slides
Time Management & Productivity - Best Practices by
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
169.8K views42 slides
The six step guide to practical project management by
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
36.7K views27 slides
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... by
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
12.7K views21 slides
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
55.5K views138 slides
12 Ways to Increase Your Influence at Work by
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
401.7K views64 slides

Featured(20)

Time Management & Productivity - Best Practices by Vit Horky
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky169.8K views
The six step guide to practical project management by MindGenius
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius36.7K views
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... by RachelPearson36
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson3612.7K views
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by Applitools
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools55.5K views
12 Ways to Increase Your Influence at Work by GetSmarter
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter401.7K views
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by DevGAMM Conference
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference3.6K views
Barbie - Brand Strategy Presentation by Erica Santiago
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago25.1K views
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well by Saba Software
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software25.3K views
Introduction to C Programming Language by Simplilearn
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn8.5K views
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr... by Palo Alto Software
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
Palo Alto Software88.4K views
9 Tips for a Work-free Vacation by Weekdone.com
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
Weekdone.com7.2K views
How to Map Your Future by SlideShop.com
How to Map Your FutureHow to Map Your Future
How to Map Your Future
SlideShop.com275.1K views
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -... by AccuraCast
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
Beyond Pride: Making Digital Marketing & SEO Authentically LGBTQ+ Inclusive -...
AccuraCast3.4K views
Exploring ChatGPT for Effective Teaching and Learning.pptx by Stan Skrabut, Ed.D.
Exploring ChatGPT for Effective Teaching and Learning.pptxExploring ChatGPT for Effective Teaching and Learning.pptx
Exploring ChatGPT for Effective Teaching and Learning.pptx
Stan Skrabut, Ed.D.57.7K views
How to train your robot (with Deep Reinforcement Learning) by Lucas García, PhD
How to train your robot (with Deep Reinforcement Learning)How to train your robot (with Deep Reinforcement Learning)
How to train your robot (with Deep Reinforcement Learning)
Lucas García, PhD42.5K views

Poster: Scalable 3D molecular graphics on the web @ 3Dsig and Web3D 2016

  • 1. Scalable 3D molecular graphics on the web PDB a billion atom archive Steps 1 + 2: Speeding-up download & parsing Funding and acknowledgements Step 4: Molecular representations geometry Step 3: Efficient storage & access Steps to display a structure Growth of the PDB archive Step 5: Rendering without plugins Does it scale? > 1 Billion atoms in the asymmetric units Instancing: Create geometry once, send to GPU once, then transform position & render multiple times. • Green surface is reused 59 times for highly symmetric virus capsid Impostors: For each pixel GPU tests intersection of sphere and camera ray to reduce triangle count. • Quality resolution independent
 as more pixels are tested • Impostors also used for cylinders. • Java Applets have provided fast execution and GPU access • Removed from Google Chrome in version 45 (Sep 2015) • Oracle to deprecate Java plugin in upcoming JDK 9 • Browsers don’t need plugins anymore • JavaScript approaches native speed • WebGL offers plugin-free access to the graphics card HIV-1 capsid at three scales: 216 hexameric and
 12 pentameric subunits, ~2.4M unique atoms Faustovirus major capsid: 2760 instances of 14478 unique atoms, ~40M overall atoms Alexander S. Rose, Anthony R. Bradley, Yana Valasatava,
 Jose M. Duarte, Andreas Prlić, Peter W. Rose • Largest structure: HIV-1 Capsid (PDB ID 3J3Q) • ~2.4M unique atoms • gzipped mmCIF file: 48.7MB • 68 of the 100 largest structures deposited in past 3 years • Advances in experimental techniques fuel the growth Download File Decompress & Parse Populate Data Model Create Geometry Render BD2K Grant: U01 CA198942 RCSB PDB Team • MMTF • Libraries & Specification: http://mmtf.rcsb.org • NGL Viewer • Supports MMTF, uses columnar stores & WebGL • Openly developed: https://github.com/arose/ngl AS Rose & PW Hildebrand. NGL Viewer: a web application for molecular visualization. Nucl. Acids Res. (1 July 2015) 43 (W1). doi:10.1093/nar/gkv402 • The PDB archive is growing: structures are getting larger and more complex • Here we present approaches for scalable 3D molecular graphics on the web • The MMTF format provides highly compressed structure files • The NGL Viewer efficiently stores & renders millions of atoms • Even the largest structures can be rapidly downloaded & displayed in about 1 second to 1 minute depending on device and connection speed NGL Viewer • MacroMolecular Transmission Format (MMTF) • New file format, optimized for transmission of macromolecules • Binary - for fast parsing • MessagePack “binary JSON" as an extensible container • Bespoke compression strategies - for small file size • Comparison with mmCIF (whole PDB archive, gzipped) • Size reduced by a factor of >4 (30GB to 7GB) • Parsing time reduced by a factor of ~12 (205 min to 17 min)
 using JavaScript libraries MMTF • Columnar stores • Single TypedArray per property • Parsed data can be copied in blocks • Convenient access via proxy objects Software availability PDB ID 1RB8 PDB ID 3J3Q PDB ID 5J7V Impostor Geometry
 2 Triangles Normal Geometry
 320 Triangles 1. 2. 3. 4. 5.