processing/p5.js

[p5.js 2.0+ Bug Report]: Could use FES error when trying to access one hook's properties from within another

クローズ

#8,813 opened on 2026/05/20

 (2 件のコメント) (0 件のリアクション) (0 人の担当者)JavaScript (3,178 件のフォーク)batch import
Area:WebGLArea:WebGPUHelp Wantedp5.js 2.0+p5.strands

Repository metrics

Stars
 (20,784 個のスター)
PR merge metrics
 (平均マージ 8d 13h) (30d で 45 merged PRs)

説明

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

2.2.3

Web browser and version

All

Operating system

All

Steps to reproduce this

Steps:

  1. Start one hook, e.g. finalColor.begin()
  2. Reference a property of another, e.g. pixelInputs.normal

Currently you get an error like TypeError: can't access property "x", pixelInputs.normal is undefined

Ideally, it would tell you that you can't access one hook's properties from within another, and to use sharedVec3 or sharedFloat or something instead to pass values between.

Snippet:

function iridMaterial() {
  const uTime  = uniformFloat(() => _shaderTime);
  const uAlpha = uniformFloat(() => _shaderAlpha);
  const uC1r   = uniformFloat(() => _c1[0]);
  const uC1g   = uniformFloat(() => _c1[1]);
  const uC1b   = uniformFloat(() => _c1[2]);
  const uC2r   = uniformFloat(() => _c2[0]);
  const uC2g   = uniformFloat(() => _c2[1]);
  const uC2b   = uniformFloat(() => _c2[2]);
  const uC3r   = uniformFloat(() => _c3[0]);
  const uC3g   = uniformFloat(() => _c3[1]);
  const uC3b   = uniformFloat(() => _c3[2]);

  finalColor.begin();
  const nx = pixelInputs.normal.x;
  const ny = pixelInputs.normal.y;
  const nz = pixelInputs.normal.z;
  const fresnel = pow(1.0 - abs(nz), 2.5);
  const hueT = uTime + nx * 2.0 + ny * 1.5 + fresnel * 1.2;
  const w1 = 0.5 + 0.5 * cos(hueT);
  const w2 = 0.5 + 0.5 * cos(hueT + 2.094);
  const w3 = 0.5 + 0.5 * cos(hueT + 4.189);
  const totalW = w1 + w2 + w3 + 0.0001;
  const nw1 = w1 / totalW;
  const nw2 = w2 / totalW;
  const nw3 = w3 / totalW;
  const r = nw1 * uC1r + nw2 * uC2r + nw3 * uC3r;
  const g = nw1 * uC1g + nw2 * uC2g + nw3 * uC3g;
  const b = nw1 * uC1b + nw2 * uC2b + nw3 * uC3b;
  const bright = mix(0.7, 1.0, fresnel);
  finalColor.set([r * bright + fresnel * 0.35, g * bright + fresnel * 0.2, b * bright + fresnel * 0.3, uAlpha]);
  finalColor.end();
}

Live: https://editor.p5js.org/davepagurek/sketches/_dFJOTqoO

コントリビューターガイド