Skip to content

Instantly share code, notes, and snippets.

@ngokevin
ngokevin / serviceworker.js
Last active March 12, 2023 09:52
Service Worker Template - cache-else-network + network-else-cache
var VERSION = 'v1';
var cacheFirstFiles = [
// ADDME: Add paths and URLs to pull from cache first if it has been loaded before. Else fetch from network.
// If loading from cache, fetch from network in the background to update the resource. Examples:
// 'assets/img/logo.png',
// 'assets/models/controller.gltf',
];
@ngokevin
ngokevin / gist:803e68351f70139da51fda48d3b484e3
Created October 25, 2017 07:51
Example of keyboard bindings for A-Frame/VR development.
/**
* Keyboard bindings to control controller and create actions via events.
* Position controllers in front of camera.
* <a-scene debug-controller> ?debug in URL to toggle on.
*/
AFRAME.registerComponent('debug-controller', {
schema: {
enabled: {default: false}
},
@ngokevin
ngokevin / index.js
Created June 8, 2020 18:39
Hakuneko Manga Combiner
const glob = require('glob');
const fs = require('fs-extra');
const path = require('path');
const rimraf = require('rimraf');
const zipdir = require('zip-dir');
const comicPath = process.argv[2];
const comicName = comicPath.split('/').slice(-1)[0].replace(/ /g, '');
const zipPath = `${comicName}Zip`;
/**
* Pivot the scene when user enters VR to face a target.
*/
AFRAME.registerComponent('recenter', {
schema: {
target: {default: ''}
},
init: function () {
var sceneEl = this.el.sceneEl;
AFRAME.registerSystem('render-order', {
schema: {type: 'array'},
init: function () {
this.el.renderer.sortObjects = true;
},
update: function () {
this.order = {};
for (i = 0; i < this.data.length; i++) {
@ngokevin
ngokevin / utils.js
Created February 17, 2019 12:33
A-Frame Helper Utils
/**
* Helper to visualize lines.
*/
console.line = (function () {
var els = {};
return function (vec1, vec2, name, color) {
name = name || 'default';
color = color || '#FFF';
if (!els[name]) {
els[name] = document.createElement('a-entity');
void main() {
float alpha = 1.0 - smoothstep(2.25, 3.75, length(vWorldPosition.xz));
vec4 tex = texture2D(src, vUv) * vec4(color, 1.0);
gl_FragColor = vec4(tex.xyz, min(1.0, tex.w * alpha * opacity));
}
this.originalUvs = JSON.parse(JSON.stringify(this.geometry.faceVertexUvs[0]));
this.uvs = this.geometry.faceVertexUvs[0];
this.uvs.forEach(face => {
indices.forEach(i => {
let uv = face[i];
uv.y += 0.00075;
if (uv.y > 1) {
needsReset = true;
@ngokevin
ngokevin / kframe-utils.js
Created September 4, 2017 09:45
Useful A-Frame utilities.
/**
* Helper to visualize lines.
*/
window.drawLine = (function () {
var els = {};
return function (name, vec1, vec2, color) {
if (!els[name]) {
els[name] = document.createElement('a-entity');
els[name].setAttribute('line', 'color', color || '#FFF');
els[name].setAttribute('id', name);
@ngokevin
ngokevin / gist:719ed8d2a475e23694ef8725cce563a9
Created January 31, 2017 12:56
A-Frame Text Editor Plugin Spec
// If you're interested in developing text editor or IDE plugins for A-Frame, here are the A-Frame specific pieces.
1. Syntax highlighting of A-Frame's ECS syntax, which is the same as inline CSS styles.
2. Support autocompletion of component names. This includes core components like geometry, material, obj-model, light, position, rotation, scale. These can be programatically populated from `AFRAME.components`. But, we can also include community components from the Registry (e.g., physics, particle systems, mountains, animations). We can populate from these JSON files https://github.com/aframevr/aframe-registry/blob/master/build/0.4.0.json based on the A-Frame version. If a community component is selected, then inject the script tag into the <head>.
3. Support for autocompletion of component property names. Typing `material="` would expose a dropdown component properties color, roughness, src, envMap, displacementMap, etc. See https://aframe.io/docs/0.4.0/components/material.html#properties-1 for all the m