Skip to content
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

Jump to bottom

shadertools: Lighting module UBO #2206

Merged
merged 7 commits into from
Aug 22, 2024
Merged

shadertools: Lighting module UBO #2206

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51b052c
shadertools: lighting module fixes (#2159)
felixpalmer Aug 6, 2024
fc0424e
shadertools: Support mulitple lights in lighting module (#2166)
felixpalmer Aug 8, 2024
159c792
shadertools: Normalize specularColor (#2169)
felixpalmer Aug 9, 2024
2a7504d
shadertools: Attenuation vec3 (#2170)
felixpalmer Aug 9, 2024
6c0963c
shadertools: Normalize specularColor (#2171)
felixpalmer Aug 9, 2024
ba83583
shadertools: specularColor tests (#2172)
felixpalmer Aug 9, 2024
0332931
ifdef
felixpalmer Aug 22, 2024
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
25 changes: 20 additions & 5 deletions examples/tutorials/lighting/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ in vec2 texCoords;
out vec3 vPosition;
out vec3 vNormal;
out vec2 vUV;
out vec3 vColor;

uniform appUniforms {
mat4 modelMatrix;
Expand All @@ -89,6 +90,10 @@ void main(void) {
vPosition = (app.modelMatrix * vec4(positions, 1.0)).xyz;
vNormal = mat3(app.modelMatrix) * normals;
vUV = texCoords;

#if (defined(LIGHTING_VERTEX))
felixpalmer marked this conversation as resolved.
Show resolved Hide resolved
vColor = lighting_getLightColor(vec3(1.0), app.eyePosition, vPosition, normalize(vNormal));
#endif
gl_Position = app.mvpMatrix * vec4(positions, 1.0);
}
`;
Expand All @@ -100,22 +105,28 @@ precision highp float;
in vec3 vPosition;
in vec3 vNormal;
in vec2 vUV;
in vec3 vColor;

uniform sampler2D uTexture;

uniform appUniforms {
mat4 modelMatrix;
mat4 mvpMatrix;
vec3 eyePosition;
} uApp;
} app;

out vec4 fragColor;

void main(void) {
#if (defined(LIGHTING_FRAGMENT))
vec3 surfaceColor = texture(uTexture, vec2(vUV.x, 1.0 - vUV.y)).rgb;
surfaceColor = lighting_getLightColor(surfaceColor, uApp.eyePosition, vPosition, normalize(vNormal));

surfaceColor = lighting_getLightColor(surfaceColor, app.eyePosition, vPosition, normalize(vNormal));
fragColor = vec4(surfaceColor, 1.0);
#endif

#if (defined(LIGHTING_VERTEX))
fragColor = vec4(vColor, 1.0);
#endif
}
`;

Expand Down Expand Up @@ -146,6 +157,7 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
shaderInputs = new ShaderInputs<{
app: typeof app.props;
lighting: typeof lighting.props;
// Can replace with gouraudMaterial
felixpalmer marked this conversation as resolved.
Show resolved Hide resolved
phongMaterial: typeof phongMaterial.props;
}>({app, lighting, phongMaterial});

Expand All @@ -161,11 +173,14 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
lighting: {
lights: [
{type: 'ambient', color: [255, 255, 255]},
{type: 'point', color: [255, 255, 255], position: [1, 2, 1]}
{type: 'point', color: [255, 120, 10], position: [2, 4, 3]},
{type: 'point', color: [0, 255, 10], position: [-2, 1, 3]}
// {type: 'directional', color: [0, 0, 255], direction: [-1, 0, -1]}
]
},
phongMaterial: {
specularColor: [255, 255, 255]
specularColor: [255, 255, 255],
shininess: 100
}
});

Expand Down
14 changes: 14 additions & 0 deletions examples/tutorials/lighting/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
<!doctype html>
<head>
<style>
body {
background: black;
margin: 0;
}

canvas {
height: 100% !important;
width: 100% !important;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<script type="module">
import {webgpuAdapter} from '@luma.gl/webgpu';
import {webgl2Adapter} from '@luma.gl/webgl';
Expand Down
4 changes: 2 additions & 2 deletions modules/shadertools/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ export {picking} from './modules/engine/picking/picking';
export type {LightingProps, LightingUniforms} from './modules/lighting/lights/lighting';
export {lighting} from './modules/lighting/lights/lighting';
export {dirlight} from './modules/lighting/no-material/dirlight';
export type {PhongMaterialUniforms as GouraudMaterialUniforms} from './modules/lighting/phong-material/phong-material';
export type {GouraudMaterialProps} from './modules/lighting/gouraud-material/gouraud-material';
export {gouraudMaterial} from './modules/lighting/gouraud-material/gouraud-material';
export type {PhongMaterialUniforms} from './modules/lighting/phong-material/phong-material';
export type {PhongMaterialProps} from './modules/lighting/phong-material/phong-material';
export {phongMaterial} from './modules/lighting/phong-material/phong-material';
// export type {PBRMaterialSettings, PBRMaterialUniforms} from './modules/lighting/pbr-material/pbr';
export {pbrMaterial} from './modules/lighting/pbr-material/pbr-material';
Expand Down
26 changes: 14 additions & 12 deletions modules/shadertools/src/modules/lighting/gouraud-material/gouraud-material.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

import {NumberArray3} from '@math.gl/types';
import {ShaderModule} from '../../../lib/shader-module/shader-module';
import {lighting} from '../lights/lighting';
import {GOURAUD_VS, GOURAUD_FS} from './gouraud-shaders-glsl';
import {PHONG_VS, PHONG_FS} from '../phong-material/phong-shaders-glsl';

export type GouraudMaterialProps = GouraudMaterialUniforms;

export type GouraudMaterialUniforms = {
export type GouraudMaterialProps = {
ambient?: number;
diffuse?: number;
/** Specularity exponent */
Expand All @@ -17,14 +16,13 @@ export type GouraudMaterialUniforms = {
};

/** In Gouraud shading, color is calculated for each triangle vertex normal, and then color is interpolated colors across the triangle */
export const gouraudMaterial = {
export const gouraudMaterial: ShaderModule<GouraudMaterialProps> = {
props: {} as GouraudMaterialProps,
uniforms: {} as GouraudMaterialUniforms,

name: 'gouraud-lighting',
name: 'gouraudMaterial',
// Note these are switched between phong and gouraud
vs: GOURAUD_VS,
fs: GOURAUD_FS,
vs: PHONG_FS.replace('phongMaterial', 'gouraudMaterial'),
fs: PHONG_VS.replace('phongMaterial', 'gouraudMaterial'),
defines: {
LIGHTING_VERTEX: 1
},
Expand All @@ -42,7 +40,11 @@ export const gouraudMaterial = {
specularColor: [0.15, 0.15, 0.15]
},

getUniforms(props: GouraudMaterialProps): GouraudMaterialUniforms {
return {...gouraudMaterial.defaultUniforms, ...props};
getUniforms(props: GouraudMaterialProps) {
const uniforms = {...props};
if (uniforms.specularColor) {
uniforms.specularColor = uniforms.specularColor.map(x => x / 255) as NumberArray3;
}
return {...gouraudMaterial.defaultUniforms, ...uniforms};
}
} as const satisfies ShaderModule<GouraudMaterialProps, GouraudMaterialUniforms>;
};
137 changes: 0 additions & 137 deletions modules/shadertools/src/modules/lighting/gouraud-material/gouraud-shaders-glsl.ts
View file
Open in desktop

This file was deleted.

47 changes: 35 additions & 12 deletions modules/shadertools/src/modules/lighting/lights/lighting-uniforms-glsl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,51 @@ struct DirectionalLight {

uniform lightingUniforms {
int enabled;
int pointLightCount;
int lightType;

int directionalLightCount;
int pointLightCount;

vec3 ambientColor;

int lightType;
vec3 lightColor;
vec3 lightDirection;
vec3 lightPosition;
vec3 lightAttenuation;

// AmbientLight ambientLight;
// PointLight pointLight[MAX_LIGHTS];
// DirectionalLight directionalLight[MAX_LIGHTS];
vec3 lightColor0;
vec3 lightPosition0;
vec3 lightDirection0;
vec3 lightAttenuation0;

vec3 lightColor1;
vec3 lightPosition1;
vec3 lightDirection1;
vec3 lightAttenuation1;

vec3 lightColor2;
vec3 lightPosition2;
vec3 lightDirection2;
vec3 lightAttenuation2;
} lighting;

PointLight lighting_getPointLight(int index) {
return PointLight(lighting.lightColor, lighting.lightPosition, lighting.lightAttenuation);
switch (index) {
case 0:
return PointLight(lighting.lightColor0, lighting.lightPosition0, lighting.lightAttenuation0);
case 1:
return PointLight(lighting.lightColor1, lighting.lightPosition1, lighting.lightAttenuation1);
case 2:
default:
return PointLight(lighting.lightColor2, lighting.lightPosition2, lighting.lightAttenuation2);
}
}

DirectionalLight lighting_getDirectionalLight(int index) {
return DirectionalLight(lighting.lightColor, lighting.lightDirection);
switch (index) {
case 0:
return DirectionalLight(lighting.lightColor0, lighting.lightDirection0);
case 1:
return DirectionalLight(lighting.lightColor1, lighting.lightDirection1);
case 2:
default:
return DirectionalLight(lighting.lightColor2, lighting.lightDirection2);
}
}

float getPointLightAttenuation(PointLight pointLight, float distance) {
Expand Down
Loading
Loading