Skip to content

Graphics uniforms ​

createGraphicsUniforms() crée un bag mutable d'uniforms partagés par les shaders cloud, liquid et terrain d'un même corps. C'est le levier de réglage runtime le plus large de la lib : ~20 valeurs (toggles, bump, foam, fresnel, depth darken, edge blend…) qu'un panneau de contrôle peut écrire à n'importe quel moment, sans rebuild ni recompilation de shader.

useBody en alloue un automatiquement par corps. Pour un canal global (panneau de réglages graphiques de l'application), construisez-en un seul et passez-le à tous les useBody.

Deux usages ​

1. Par-corps (défaut) ​

ts
const mars  = useBody(marsConfig,  DEFAULT_TILE_SIZE)
const venus = useBody(venusConfig, DEFAULT_TILE_SIZE)

// Chaque corps a son propre bag — règlages indépendants.
mars.graphicsUniforms.uCloudOpacity.value  = 0.4
venus.graphicsUniforms.uWaveStrength.value = 1.6

2. Canal partagé (panneau global) ​

ts
import {
  useBody,
  createGraphicsUniforms,
  DEFAULT_TILE_SIZE,
} from '@cedric-pouilleux/stellexjs/core'

const uniforms = createGraphicsUniforms()

const mars  = useBody(marsConfig,  DEFAULT_TILE_SIZE, { graphicsUniforms: uniforms })
const venus = useBody(venusConfig, DEFAULT_TILE_SIZE, { graphicsUniforms: uniforms })

// Un seul slider, deux bodies impactés.
qualityPanel.on('cloudOpacity', v => uniforms.uCloudOpacity.value = v)
qualityPanel.on('foamThreshold', v => uniforms.uFoamThreshold.value = v)

Pourquoi { value: x } et pas x ?

Le bag stocke chaque champ comme IUniform Three.js ({ value }). Le shader lit la même référence chaque frame — il suffit de muter .value, jamais besoin de réassigner l'objet ni d'appeler une API de propagation.

Catalogue complet ​

Toggles (0 / 1) ​

UniformDéfautEffet
uWaterEnabled1.0Master du shader de vagues sur la coquille liquide. 0 désactive bump + tinting.
uTerrainBumpEnabled1.0Master du bump-mapping terrain. 0 aplatit l'éclairage hex.
uEdgeBlendEnabled1.0Master du blend de couleur inter-tuiles. 0 produit des hex à bordure dure.
uLiquidVisible1.0Quand 0, la coquille liquide discard chaque fragment — expose le fond marin.

Cloud shell ​

UniformDéfautPlage utileEffet
uCloudOpacity0.900..1Alpha de la couche nuageuse (multiplié avec la couverture par-vertex).
uCloudSpeed1.00..3Multiplicateur de vitesse de drift.
uCloudColorblancTHREE.ColorTint global appliqué aux nuages.

Liquid shell ​

UniformDéfautPlage utileEffet
uWaveStrength1.00..3Amplitude du bump des vagues.
uWaveSpeed2.80..6Vitesse d'animation.
uWaveScale5.01..15Fréquence spatiale — petit = houles, grand = clapot serré.
uSpecularIntensity0.90..2Intensité du reflet soleil.
uSpecularSharpness80.08..200Exposant Phong — fort = point spéculaire net, faible = halo diffus.
uFresnelPower5.01..12Exposant fresnel — fort = bord agressivement éclairé.
uLiquidRoughness0.350..1Override roughness PBR — 0 = miroir, 1 = mat.
uDepthDarken0.500..1Atténuation par-fragment de la profondeur.
uLiquidOpacity0.880..1Alpha — override le material.opacity (sliders sans rebuild).
uFoamThreshold1.00..1Seuil au-dessus duquel l'écume apparaît. 1 = écume désactivée.
uFoamColorblancTHREE.ColorTint de l'écume sur les crêtes.

Terrain shader ​

UniformDéfautPlage utileEffet
uBumpStrength2.00..5Amplitude du bump-mapping terrain.
uEdgeBlendStrength0.250..1Amplitude du blend de couleur inter-tuiles.

Mutation live ​

Les uniforms peuvent être mutés à tout moment depuis n'importe où — la frame suivante les lit :

ts
function onPause() {
  body.graphicsUniforms.uWaveSpeed.value = 0      // gel des vagues
  body.graphicsUniforms.uCloudSpeed.value = 0     // gel des nuages
}

function onSlowMotion() {
  body.graphicsUniforms.uWaveSpeed.value = 0.5
  body.graphicsUniforms.uCloudSpeed.value = 0.3
}

Pas besoin d'appeler material.needsUpdate ni de tick() particulier — c'est juste un changement de valeur dans un IUniform.

Vs BodyMaterial.setParams() ​

Deux canaux différents pour deux familles de paramètres :

CanalFamilleExemples
graphicsUniformsEffets partagés entre coquilles (cloud / liquid / terrain)foam, depth darken, edge blend, wave bump
body.planetMaterial.setParams()Paramètres du shader procédural par type de corpsroughness, craterCount, crackAmount, lavaColor, terrainArchetype, bandSharpness…

Règle pratique :

  • Si le réglage doit s'appliquer à plusieurs corps en même temps ou à plusieurs coquilles d'un même corps → graphicsUniforms.
  • Si le réglage est spécifique à une famille shader (LibBodyType interne : rocky / gaseous / metallic / star — distinct de la taxonomie publique BodyType + surfaceLook, cf. API avancée) ou décrit l'identité du corps → setParams.

Performance ​

Le bag est déjà alloué à useBody — il n'y a aucun coût à le récupérer ou à muter ses valeurs. Un seul bag global partagé entre N corps :

  • évite N allocations,
  • garantit la cohérence visuelle sur tout l'écran (un slider = un look),
  • reste sans coût (les uniforms sont lus dans la pipeline shader normale).

Voir aussi ​

Distribué sous la licence indiquée dans le dépôt.