Skip to content

Instantly share code, notes, and snippets.

@ooflorent
Last active August 23, 2019 11:43
Show Gist options
  • Save ooflorent/5aa399048ab8fafa800b7c2ad6dcc792 to your computer and use it in GitHub Desktop.
Save ooflorent/5aa399048ab8fafa800b7c2ad6dcc792 to your computer and use it in GitHub Desktop.
Simple asset manager
let assets = {};
let getAsset = (id, callback) =>
assets[id] || (assets[id] = callback(document.querySelector("#" + id)));
let getImage = id => getAsset(id, img => img);
let getSource = id => getAsset(id, node => node.innerHTML.trim());
onload = () => {
let texture1 = getImage("tex1")
let texture2 = getImage("tex2")
let vertexShader = getSource("vert")
// …
}
<!DOCTYPE html>
<html>
<body>
<!-- Assets -->
<img hidden id="tex1" src="textures.png" />
<img hidden id="tex2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />
<script id="vert" type="x-shader/x-vertex">
#version 100
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 64.0;
}
</script>
<!-- Scripts -->
<script src="game.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment