A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.
Name | Stars | Last Commit | Description |
---|---|---|---|
three.js | ![GitHub |
#version 330 | |
in VertexData{ | |
vec4 mColor; | |
} VertexIn; | |
void main(void) | |
{ | |
gl_FragColor = VertexIn.mColor; | |
} |
/* | |
Streamlined Shopify theme development. | |
NOTE: depends on module gulp-shopify-theme | |
npm install --save-dev yargs gulp gulp-sass gulp-changed gulp-sourcemaps gulp-autoprefixer gulp-uglify gulp-concat gulp-replace gulp-plumber gulp-babel browser-sync gulp-if del gulp-add-src gulp-rename gulp-yaml gulp-shopify-theme | |
Highlights: | |
- https proxying via BrowserSync |
const glslify = require('glslify'); | |
const path = require('path'); | |
const assign = require('object-assign'); | |
const defined = require('defined'); | |
// This is the original source, we will copy + paste it for our own GLSL | |
// const vertexShader = THREE.ShaderChunk.meshphysical_vert; | |
// const fragmentShader = THREE.ShaderChunk.meshphysical_frag; | |
// Our custom shaders |
A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.
Name | Stars | Last Commit | Description |
---|---|---|---|
three.js | ![GitHub |
This issue is so infuriating that I'm going to take some time to write about it.
MOST IMPORTANT. Your local development server must be bound to IP address 0.0.0.0. Some do this by default, but many don't. You need to make sure that you run your local server with correct IP bindings. You may need to provide additional flags to your serve commands e.g. polymer serve --hostname domain.local
, hugo serve --bind 0.0.0.0
. If you use a named domain like domain.local
, it has to be defined in /etc/hosts
and pointing at 0.0.0.0.
My Parallels setting is using Shared Network, nothing special there.
Open macOS Terminal and type ifconfig
. Look for the value under vnic0
> inet
. It is typically 10.211.55.2
.
/* | |
AUTO-COMPLETE SNIPPETS FOR GLSL WITHIN VISUAL CODE STUDIO | |
Lewis Lepton | |
https://lewislepton.com | |
useful places that i grabbed info from | |
http://www.shaderific.com/glsl | |
https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language | |
plus various other papers & books | |
*/ |
:root { | |
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); | |
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); | |
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); | |
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); | |
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); |
const material = new THREE.MeshStandardMaterial({ | |
map: new THREE.TextureLoader().load('map.jpg'), | |
normalMap: new THREE.TextureLoader().load('normalMap.jpg') | |
}); | |
const loader = new THREE.JSONLoader(); | |
loader.load('geometry.json', geometry => { | |
const mesh = new THREE.Mesh(geometry, material); | |
const canvasSketch = require('canvas-sketch'); | |
const settings = { | |
dimensions: [ 2048, 2048 ], | |
params: { | |
size: { | |
min: 50, | |
max: 400, | |
step: 1, | |
value: 200 |