colco

A 3D webgl molecule viewer

Usage no npm install needed!

<script type="module">
  import colco from 'https://cdn.skypack.dev/colco';
</script>

README

A wasm, webgl 3D molecule viewer

Note: Colcothar is a chemical name for rust!

Colcothar is filling a small gap for 3d molecule viewers. For those who value new technologies and (somewhat, working on it) fast load times, colco was built for you!

Colco is a single wasm binary that draws a 3d movable molecule in your browser via glow, stdweb, and glam. It achieves (somewhat, working on it) fast loadtimes by integrating a build step that loads (via tobj) all 3d model data (rods and spheres) into u8 slices, perfect for webgl consumption.

File Support

Currently, only .mol file output from rdkit is supported. You also need to embed and include hydrogen in the output.

RDkit .mol files

Simply run these two functions before running Chem.MolToMolBlock:

  1. AllChem.EmbedMolecule
  2. Chem.AddHs

Use in Javascript

Ensure colco.wasm is served from /.

Initialize colco like this:

import colco from 'colco';

let rdkitMolOutput = "";

colco.then((colco) => colco.initialize(
  'colco-viewer', // Your canvas ID
  rdkitMolOutput, // Output from rdkit
  { atom_size: 2.0, bond_size: 0.5 } // Rendering settings
));

How to Build

Building a .wasm file is easy. Colco uses cargo-web, sort-of like webpack for stdweb in rust. Alternatively, use the npm scripts in package.json, however this is meant for publishing to npmjs.com.

Native (in-dev...)

TBD

Web

cd to colco directory

Currently only stdweb is supported. To run with stdweb:

cargo web start --no-default-features --features stdweb --target wasm32-unknown-unknown

To generate a new constants.rs file, you need to enable the build script. Like this:

env GENERATE_CONSTANTS=1 cargo web start --no-default-features --features std_web --target wasm32-unknown-unknown

To minify and deploy to static files for production, run:

cargo web deploy --release --no-default-features --features stdweb --target wasm32-unknown-unknown