Skip to content

Add GLSL langauge hint before shader string literals #416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrxz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add GLSL langauge hint before shader string literals #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions examples/glsl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
butterfly.worldModifier = new dyno.Dyno({
inTypes: { gsplat: dyno.Gsplat },
outTypes: { gsplat: dyno.Gsplat },
globals: () => [dyno.unindent(`
globals: () => [dyno.unindent(/* glsl */ `
vec3 waveRgb(vec3 pos) {
return vec3(
0.6 + 0.4 * sin(pos.x * 56.0),
Expand All @@ -77,7 +77,7 @@
);
}
`)],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
${outputs.gsplat}.rgba.rgb *= waveRgb(${inputs.gsplat}.center);
`),
Expand All @@ -98,7 +98,7 @@
inTypes: { gsplat: dyno.Gsplat, t: "float" },
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
float warpRadial(float r, float t) {
return r * (1.0 + 0.1 * sin(r * 15.0 + t * 3.0));
}
Expand All @@ -109,7 +109,7 @@
}
`)
],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
${outputs.gsplat}.center = warp(${inputs.gsplat}.center, ${inputs.t});
`),
Expand Down
2 changes: 1 addition & 1 deletion examples/interactive-deform/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ function createDragBounceDynoshader() {
},
outTypes: { gsplat: dyno.Gsplat },
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 originalPos = ${inputs.gsplat}.center;

Expand Down
4 changes: 2 additions & 2 deletions examples/interactive-holes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
inTypes: inputTypes,
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
float hash(vec3 p) { return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453); }
vec3 simulatePhysics(vec3 originalPos, float dropTime, float gravity, float damping, float floorLevel, float friction, float explosionStrength) {
float timeVariation = hash(originalPos + vec3(42.0)) * 0.2 - 0.1;
Expand Down Expand Up @@ -160,7 +160,7 @@
}
`),
],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 originalPos = ${inputs.gsplat}.center;
const int K = ${MAX_IMPULSES};
Expand Down
4 changes: 2 additions & 2 deletions examples/interactive-ripples/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function passthroughDyno(timeUniform, hitpointUniform) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
vec3 shockwave(vec3 center, float t, vec3 hitpoint) {
vec3 direction = center - hitpoint;
float distance = length(direction);
Expand All @@ -73,7 +73,7 @@ function passthroughDyno(timeUniform, hitpointUniform) {
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
// Apply shockwave function to position
${outputs.gsplat}.center = shockwave(${inputs.gsplat}.center, ${inputs.time}, ${inputs.hitpoint});
Expand Down
12 changes: 6 additions & 6 deletions examples/lofi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,7 @@
inTypes: { gsplat1: dyno.Gsplat, gsplat2: dyno.Gsplat, t: "float", translate: "float" },
outTypes: { gsplat: dyno.Gsplat },
inputs,
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat1};
vec3 center2 = ${inputs.gsplat2}.center + vec3(0.0, 0.0, ${inputs.translate});
${outputs.gsplat}.center = mix(${inputs.gsplat1}.center, center2, ${inputs.t});
Expand All @@ -535,7 +535,7 @@
inTypes: { gsplat: dyno.Gsplat, rustleBlend: "float", t: "float" },
outTypes: { gsplat: dyno.Gsplat },
inputs: { gsplat, rustleBlend, t },
globals: () => [dyno.unindent(`
globals: () => [dyno.unindent(/* glsl */ `
vec4 colorWave(vec4 rgba, vec3 p, float t) {
float len = length(p);
float magnitude = sin(len + t + 1.7 * p.x + 2.3 * p.z + 0.9 * p.y);
Expand All @@ -547,7 +547,7 @@
return mix(rgba, target, 1.0 - sqr(1.0 - magnitude));
}
`)],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec4 displace = colorWave(${outputs.gsplat}.rgba, ${outputs.gsplat}.center, ${inputs.t});
displace.w = 1.0 - displace.w;
Expand All @@ -562,7 +562,7 @@
outTypes: { gsplat: dyno.Gsplat },
inputs: { gsplat, tips },
statements: ({ inputs, outputs }) => {
return dyno.unindentLines(`
return dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 center = ${outputs.gsplat}.center;

Expand Down Expand Up @@ -598,7 +598,7 @@
inTypes: { gsplat: dyno.Gsplat, spotlightOrigins: "vec3", spotlightDirs: "vec3", spotlightFovs: "float" },
outTypes: { gsplat: dyno.Gsplat },
inputs: { gsplat, spotlightOrigins, spotlightDirs, spotlightFovs },
globals: () => [dyno.unindent(`
globals: () => [dyno.unindent(/* glsl */ `
float computeSpotlight(
vec3 worldVertex,
vec3 worldOrigin,
Expand Down Expand Up @@ -635,7 +635,7 @@
}
`)],
statements: ({ inputs, outputs }) => {
return dyno.unindentLines(`
return dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
if (${inputs.spotlightFovs}[0] > 0.0 || ${inputs.spotlightFovs}[1] > 0.0) {
float lighting = 0.0;
Expand Down
4 changes: 2 additions & 2 deletions examples/render-cube-depth/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
inTypes: { gsplat: dyno.Gsplat, worldToProj: "mat4" },
outTypes: { gsplat: dyno.Gsplat },
inputs: { gsplat, worldToProj },
globals: () => [dyno.unindent(`
globals: () => [dyno.unindent(/* glsl */ `
const float PackUpscale = 256. / 255.; // fraction -> 0..1 (including 1)
const float ShiftRight8 = 1. / 256.;
const float Inv255 = 1. / 255.;
Expand All @@ -113,7 +113,7 @@
return vec3( vuf * Inv255, gf * PackUpscale, bf );
}
`)],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat}.flags = 0u;
if (isGsplatActive(${inputs.gsplat}.flags) && (${inputs.gsplat}.rgba.a > ${minAlpha})) {
${outputs.gsplat} = ${inputs.gsplat};
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-dissolve-effects/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,14 @@
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
vec3 hash(vec3 p) {
return fract(sin(p*123.456)*123.456);
}
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 localPos = ${inputs.gsplat}.center;
vec3 hashVal = hash(localPos);
Expand Down
6 changes: 3 additions & 3 deletions examples/splat-flow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
return new dyno.Dyno({
inTypes: { gsplat: dyno.Gsplat, inTransition: "bool", fadeIn: "bool", t: "float", gt: "float", objectIndex: "int", fixedMinScale: "bool", waves: "float" },
outTypes: { gsplat: dyno.Gsplat },
globals: () => [ dyno.unindent(`
globals: () => [ dyno.unindent(/* glsl */ `
float hash13(vec3 p3) { p3 = fract(p3 * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
float hash11(float p) { p = fract(p * .1031); p += dot(p, p + 33.33); return fract(p * p); }
float fadeInOut(float t) { return abs(mix(-1., 1., t)); }
Expand All @@ -82,7 +82,7 @@
return cur == idx ? .1+fadeInOut(t) : 0.0;
}
`) ],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, float(${inputs.gsplat}.index), ${inputs.objectIndex}, ${inputs.waves});
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.fixedMinScale});
Expand Down Expand Up @@ -177,7 +177,7 @@
return localCenter.add(m.position);
});

const centerGLSL = `
const centerGLSL = /* glsl */ `
vec3 getCenterOfMass(int idx) {
if (idx == 0) return vec3(${centers[0].x}, ${centers[0].y}, ${centers[0].z});
if (idx == 1) return vec3(${centers[1].x}, ${centers[1].y}, ${centers[1].z});
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-portal/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function makePortalMaterial() {
waveFrequency: { value: 50.0 },
edgeSoftness: { value: 0.2 },
},
vertexShader: `
vertexShader: /* glsl */ `
varying vec3 vWorldPosition;
varying vec2 vLocalXY;
void main() {
Expand All @@ -103,7 +103,7 @@ function makePortalMaterial() {
gl_Position = projectionMatrix * viewMatrix * worldPos;
}
`,
fragmentShader: `
fragmentShader: /* glsl */ `
uniform sampler2D tMap;
uniform mat4 portalPV;
uniform mat4 portalBridge;
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-reveal-effects/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
outTypes: { gsplat: dyno.Gsplat },
// GLSL utility functions for effects
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
// Pseudo-random hash function
vec3 hash(vec3 p) {
p = fract(p * 0.3183099 + 0.1);
Expand Down Expand Up @@ -221,7 +221,7 @@
`)
],
// Main effect shader logic
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
float t = ${inputs.t};
float s = smoothstep(0.,10.,t-4.5)*10.;
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-shader-effects/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
vec3 hash(vec3 p) {
return fract(sin(p*123.456)*123.456);
}
Expand Down Expand Up @@ -168,7 +168,7 @@
}
`)
],
statements: ({ inputs, outputs }) => dyno.unindentLines(`
statements: ({ inputs, outputs }) => dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};

vec3 localPos = ${inputs.gsplat}.center;
Expand Down
8 changes: 4 additions & 4 deletions examples/splat-transitions/effects/explosion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
mat2 rot(float angle) { float c = cos(angle); float s = sin(angle); return mat2(c, -s, s, c); }
float hash(vec3 p) { return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453); }
vec3 simulatePhysics(vec3 originalPos, float dropTime, float progress, float gravity, float damping, float floorLevel, float randomOffset, float friction, float explosionStrength) {
Expand Down Expand Up @@ -123,7 +123,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 originalPos = ${inputs.gsplat}.center;
vec3 originalScale = ${inputs.gsplat}.scales;
Expand Down Expand Up @@ -183,12 +183,12 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
float hash(vec3 p) { return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453); }
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
vec3 originalPos = ${inputs.gsplat}.center;
vec3 originalScale = ${inputs.gsplat}.scales;
Expand Down
6 changes: 3 additions & 3 deletions examples/splat-transitions/effects/flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
float hash13(vec3 p3) { p3 = fract(p3 * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
float hash11(float p) { p = fract(p * .1031); p += dot(p, p + 33.33); return fract(p * p); }
float fadeInOut(float t) { return abs(mix(-1., 1., t)); }
Expand All @@ -79,7 +79,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, float(${inputs.gsplat}.index), ${inputs.objectIndex}, ${inputs.waves});
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.fixedMinScale});
Expand Down Expand Up @@ -179,7 +179,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
return localCenter.add(m.position);
});

const centerGLSL = `
const centerGLSL = /* glsl */ `
vec3 getCenterOfMass(int idx) {
if (idx == 0) return vec3(${centers[0].x}, ${centers[0].y}, ${centers[0].z});
if (idx == 1) return vec3(${centers[1].x}, ${centers[1].y}, ${centers[1].z});
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-transitions/effects/morph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
vec3 hash3(int n) {
float x = float(n);
return fract(sin(vec3(x, x + 1.0, x + 2.0)) * 43758.5453123);
Expand All @@ -59,7 +59,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
float stay = ${inputs.stay};
float trans = ${inputs.trans};
Expand Down
4 changes: 2 additions & 2 deletions examples/splat-transitions/effects/spheric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
},
outTypes: { gsplat: dyno.Gsplat },
globals: () => [
dyno.unindent(`
dyno.unindent(/* glsl */ `
vec3 applyCenter(vec3 center, float t, float spereRadius, float sphereHeight) {
float heightModifier = 0.5 + 0.5 * pow(abs(1.0 - 2.0*t), 0.2);
vec3 targetCenter = vec3(0.0, heightModifier * sphereHeight, 0.0);
Expand Down Expand Up @@ -132,7 +132,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
`),
],
statements: ({ inputs, outputs }) =>
dyno.unindentLines(`
dyno.unindentLines(/* glsl */ `
${outputs.gsplat} = ${inputs.gsplat};
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, ${inputs.spereRadius}, ${inputs.sphereHeight});
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.splatScale});
Expand Down
Loading
Loading