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 创建于 2026年5月20日

 (2 条评论) (0 个反应) (0 位负责人)JavaScript (3,178 个派生)batch import
Area:WebGLArea:WebGPUHelp Wantedp5.js 2.0+p5.strands

仓库指标

星标
 (20,784 个星标)
PR 合并指标
 (平均合并 8天 13小时) (30 天内合并 45 个 PR)

描述

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

贡献者指南