-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Closed
Labels
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
p5.js version
2.2 RC
Web browser and version
All
Operating system
All
Steps to reproduce this
Steps:
- Create a p5.strands shader
- Create a named global function with the shader definition
This fails in the latest RC. I guess we don't have unit tests for this specific case yet. It works if you pass it in as an anonymous function.
Snippet:
let instance
let instanceShader
let instanceStrokeShader
let cam
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL)
instance = buildGeometry(() => box(20))
instanceShader = baseMaterialShader().modify(applyInstancing)
instanceStrokeShader = baseStrokeShader().modify(applyInstancing)
cam = createCamera()
setCamera(cam)
}
function applyInstancing() {
const t = uniformFloat(() => millis())
getWorldInputs((inputs) => {
const sideLen = 10
const itemSize = 50
const col = floor(instanceID() / sideLen)
const row = floor(col / sideLen)
const i = row
const j = mod(col, sideLen)
const k = mod(instanceID(), sideLen)
const offset = i + j + k
const size = 1 + 0.8 * sin(t * 0.001 + offset)
inputs.position *= size
inputs.position += [
(i - sideLen / 2) * itemSize,
(j - sideLen / 2) * itemSize,
(k - sideLen / 2) * itemSize,
]
return inputs
})
}
function draw() {
background('#3AB08B')
cam.camera(
500 + 100 * sin(millis() * 0.0005),
-500 + 100 * sin(millis() * 0.0004),
500 + 100 * sin(millis() * 0.0003),
0,
0,
0
)
fill(255)
stroke('#7BCFB4')
orbitControl()
push()
shader(instanceShader)
strokeShader(instanceStrokeShader)
model(instance, 1000)
pop()
}