TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Write shaders for the (sim) Vegas sphere

362 pointsby jjwisemanover 1 year ago

25 comments

rezmasonover 1 year ago
Got the matrix working.<p>I tried adjusting the UV so we could see the top of the sphere, but I gave up. For what it&#x27;s worth, the threejs uniforms &quot;projectionMatrix&quot; and &quot;modelViewMatrix&quot; can be referenced in the GLSL as long as you declare them up top.<p><pre><code> #define PI 3.14159265359 #define SQRT_2 1.4142135623730951 #define SQRT_5 2.23606797749979 &#x2F;&#x2F;uniform mat4 projectionMatrix, modelViewMatrix; uniform float time; varying vec2 vUv; varying vec3 vNormal; highp float randomFloat( const in vec2 uv ) { const highp float a = 12.9898, b = 78.233, c = 43758.5453; highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI ); return fract(sin(sn) * c); } float wobble(float x) { return x + 0.3 * sin(SQRT_2 * x) + 0.2 * sin(SQRT_5 * x); } float getRainBrightness(float simTime, vec2 glyphPos) { float columnTimeOffset = randomFloat(vec2(glyphPos.x, 0.)) * 1000.; float columnSpeedOffset = randomFloat(vec2(glyphPos.x + 0.1, 0.)) * 0.5 + 0.5; float columnTime = columnTimeOffset + simTime * columnSpeedOffset; float rainTime = (glyphPos.y * 0.01 + columnTime) * 350.0; rainTime = wobble(rainTime); return 1.0 - fract(rainTime); } void main(){ float t = fract(time &#x2F; 14.487); vec2 animatedUv = fract(vUv + vec2(t * 0.002, 0)); vec2 gridSize = vec2(3.14 &#x2F; 2.0, 1.0) * 100.0; vec2 glyphUv = fract(animatedUv * gridSize); vec2 gridCoord = floor(animatedUv * gridSize) &#x2F; gridSize; float brightness = getRainBrightness(t * 0.1, gridCoord); brightness = clamp(0.0, 1.0, brightness * 1.6 - 1.2); float coverage = 1.3 - length(glyphUv - 0.5) * 3.0; gl_FragColor = vec4(brightness * coverage * vec3(0.2, 1.0, 0.05), 1); }</code></pre>
vjerancrnjakover 1 year ago
Here&#x27;s a static penrose tiling.<p><a href="https:&#x2F;&#x2F;gist.github.com&#x2F;vjeranc&#x2F;265db912d4004c7c0b0f16ae5fdad327" rel="nofollow noreferrer">https:&#x2F;&#x2F;gist.github.com&#x2F;vjeranc&#x2F;265db912d4004c7c0b0f16ae5fda...</a><p>Interestingly, sphere is not infinite so having this aperiodic tiling is pointless (still looks nice).<p>Although, I never found out if there&#x27;s a similar set of tiles (or a monotile) that can tile an infinite cone.
评论 #38465566 未加载
评论 #38465609 未加载
troupoover 1 year ago
Offtopic but what fascinates me is how big of an actual <i>engineering</i> project The Sphere is.<p>From the structure itself to the syncing thousands of LED panels inside the sphere and outside the sphere, while keeping them cooled <i>in Vegas</i> while keeping it cool enough and ventilated inside for a seating capacity of 18 000 people.<p>There are run-of-the mill office buildings which fail to provide adequate ventilation.
评论 #38465873 未加载
评论 #38470839 未加载
nicbarthover 1 year ago
Fun project! Here&#x27;s a simple smiley.frag: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;nickbarth&#x2F;4ec5147bd1288fd2bcfc4c5b46c17a7d" rel="nofollow noreferrer">https:&#x2F;&#x2F;gist.github.com&#x2F;nickbarth&#x2F;4ec5147bd1288fd2bcfc4c5b46...</a>
ArekDymalskiover 1 year ago
Very nice project! It would be great to have a separate url for each code (embed it in the url perhaps?) for easy sharing.
Voltageover 1 year ago
A big smiley face. :)<p><pre><code> uniform float time; varying vec2 vUv; &#x2F;&#x2F; https:&#x2F;&#x2F;iquilezles.org&#x2F;articles&#x2F;distfunctions2d&#x2F; (Thanks IQ!) float sdRing( in vec2 p, in vec2 n, in float r, float th ) { p.x = abs(p.x); p = mat2x2(n.x,n.y,-n.y,n.x)*p; return max( abs(length(p)-r)-th*0.5, length(vec2(p.x,max(0.0,abs(r-p.y)-th*0.5)))*sign(p.x) ); } void main() { &#x2F;&#x2F; create coordinates at visual centre (y coords doubled for circles) vec2 centre = vec2(0.25, 0.25); vec2 uv = vUv * vec2(1.0, 0.5) - centre; &#x2F;&#x2F; mirror x to get both eyes for the price of one, and find eye offset float eyes = length(vec2(abs(uv.x), uv.y) - vec2(0.035, 0.03)); &#x2F;&#x2F; carve them out using smoothstep eyes = smoothstep(0.015, 0.016, eyes); float mouth = sdRing(vec2(uv.x, -uv.y + 0.03), vec2(7), 0.65, 0.1); mouth = smoothstep(0.02, 0.025, mouth); float shade = min(eyes, mouth); vec3 yellow = vec3(0.9, 0.7, 0.0); vec3 color = shade * yellow; gl_FragColor = vec4(color, 1.0); }</code></pre>
crdrostover 1 year ago
Never played with shaders before, made a spinning watermelon.<p><pre><code> uniform float time; varying vec2 vUv; void main() { vec2 st = vUv.xy; float f1 = length(abs(2.0*st)&#x2F;2.0 - .1*time); float stripe = fract(f1*10.0); float stripe2 = stripe*stripe*stripe; float stripe3 = fract(-f1*10.0); float stripe4 = stripe3*stripe3*stripe3; float f2 = length(abs(4.0*st)&#x2F;2.0 - .2*time); float stripe5 = fract(f2*10.0); float stripe6 = stripe5*stripe5*stripe5; float stripe7 = fract(-f2*10.0); float stripe8 = stripe7*stripe7*stripe7; gl_FragColor = vec4(vec3(0.02, 0.3, 0.01)+vec3(0.3, 0.02, 0.0)*(stripe2 + stripe4 + 0.5*stripe6 + 0.6*stripe8), 1.0); } </code></pre> I&#x27;m really not sure how it works? Like I gather that I&#x27;m doing something with rgb tuples and frac() appears to be a remainder operation and that&#x27;s why I square it and add it to itself to create some smooth bands, but what exactly is going on with how shaders work or what uVu is or what gl_FragColor assigns to is rather opaque to me?
评论 #38472545 未加载
评论 #38467049 未加载
andrewstuartover 1 year ago
Also check out the shaders at<p><a href="https:&#x2F;&#x2F;www.glslsandbox.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.glslsandbox.com</a><p>But beware there&#x27;s often idiot children posting NSFW shaders there, the mods don&#x27;t monitor it very closely.
评论 #38467847 未加载
评论 #38471284 未加载
评论 #38474067 未加载
atum47over 1 year ago
That&#x27;s very nice. Look at the solution a person pushed for my isocity project [1]. It enables to share a URL with your city creation<p>Maybe you can implement something like that<p>1 - <a href="https:&#x2F;&#x2F;github.com&#x2F;victorqribeiro&#x2F;isocity&#x2F;commit&#x2F;c6588171e3711c2b07261823b32fac25772cc7f3">https:&#x2F;&#x2F;github.com&#x2F;victorqribeiro&#x2F;isocity&#x2F;commit&#x2F;c6588171e37...</a>
pengaruover 1 year ago
The Sphere would be a great venue for hosting a Demo Party[0].<p>[0] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Demoscene#Parties" rel="nofollow noreferrer">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Demoscene#Parties</a>
modelessover 1 year ago
Cool idea to overlay the real time rendering on a video of the actual sphere. Someone ought to capture a gaussian splatting scene of the sphere, that would be even better.
elicashover 1 year ago
Now we need to run these on a small spherical display like the Gakken Worldeye <a href="https:&#x2F;&#x2F;youtu.be&#x2F;85rs0WHnUy0?feature=shared&amp;t=53" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;85rs0WHnUy0?feature=shared&amp;t=53</a><p>Here&#x27;s an animated eyeball (hat tip chatgpt):<p><pre><code> uniform float time; varying vec2 vUv; vec3 lighting(vec3 normal, vec3 eyeDirection, vec3 lightDirection) { float diffuse = max(dot(normal, lightDirection), 0.0); vec3 reflected = reflect(-lightDirection, normal); float specular = pow(max(dot(reflected, eyeDirection), 0.0), 16.0); return vec3(0.1) + diffuse * vec3(0.5) + specular * vec3(0.3); } void main() { float theta = vUv.x * 2.0 * 3.14159265359; float phi = (1.0 - vUv.y) * 3.14159265359; vec3 sphereCoord = vec3(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta)); vec2 irisPosition = vec2(sin(time * 0.5) * 0.1, cos(time * 0.7) * 0.1); float irisDistance = length(sphereCoord.xy - irisPosition); float irisRadius = 0.25; float pupilRadius = 0.1; float irisEdgeSoftness = 0.02; vec3 color; if (irisDistance &lt; pupilRadius) { color = vec3(0.0); } else if (irisDistance &lt; irisRadius) { float t = smoothstep(irisRadius - irisEdgeSoftness, irisRadius, irisDistance); color = mix(vec3(0.0, 0.0, 1.0), vec3(0.5, 0.25, 0.0), t); color += 0.05 * sin(20.0 * irisDistance + time); } else { color = vec3(1.0); } vec3 eyelidColor = vec3(1.4, 0.90, 0.60); float blinkSpeed = 0.5; &#x2F;&#x2F; Reduce this value to slow down the blinking float blink = abs(sin(time * 3.14159265359 * blinkSpeed)); float eyelidPosition = mix(0.4, 0.5, blink); float upperEyelid = step(eyelidPosition, vUv.y); float lowerEyelid = step(eyelidPosition, 1.0 - vUv.y); color = mix(color, eyelidColor, 1.0 - upperEyelid * lowerEyelid); vec3 normal = normalize(sphereCoord); vec3 lightDirection = normalize(vec3(0.0, 1.0, 1.0)); vec3 eyeDirection = normalize(vec3(0.0, 0.0, 1.0)); vec3 litColor = color * lighting(normal, eyeDirection, lightDirection); gl_FragColor = vec4(litColor, 1.0); }</code></pre>
评论 #38490525 未加载
评论 #38472144 未加载
CSMastermindover 1 year ago
This reminds me of when Matt Parker let his viewers control his Christmas tree lights: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;v7eHTNm1YtU?si=GqK6oSZVHBJkjcib" rel="nofollow noreferrer">https:&#x2F;&#x2F;youtu.be&#x2F;v7eHTNm1YtU?si=GqK6oSZVHBJkjcib</a>
评论 #38468099 未加载
xnxover 1 year ago
Very well done. Bright lights even bleed (not sure the right word) beyond the border of the sphere to simulate atmosphere (or lens?) effects.
评论 #38464908 未加载
slimboJoeover 1 year ago
I am learning to write shaders. I came across the Las Vegas Sphere thread on X and I love the instant feedback that Alexandre Devaux has created on his site. My attempt to create the Amiga BOING! resulted in a full sphere instead of being cut off at the base like all the other examples. Can someone clue me into why this has occurred and how to fix it? My code is very &quot;hacky&quot; and I only partially understand what I&#x27;ve done here. Any help would be appreciated.<p><pre><code> uniform float time; varying vec2 vUv; varying vec3 vNormal; float rows = 20.0, cols = 10.0; float direction = -1.0; vec4 colorOne = vec4(1.0,1.0,1.0,0.1), colorTwo = vec4(1.0,0.0,0.0,0.1); vec4 amiga = vec4(1.0,0.0,0.0,0.1); vec4 amigaMe (vec2 uv, vec4 colorOne, vec4 colorTwo); void main() { vec2 uv = vUv + (direction *(5.0*sin(time) * 0.1)); amiga = amigaMe (uv, colorOne, colorTwo); gl_FragColor = vec4(amiga.x,amiga.y,amiga.z,0.1); } vec4 amigaMe (vec2 uv, vec4 colorOne, vec4 colorTwo) { vec4 finalColor; float patternX = floor(uv.x*rows), patternY = floor(uv.y*cols); if(mod(patternX + patternY, 2.0) == 0.0) { finalColor = colorTwo; } else { finalColor = colorOne + colorTwo ; } return finalColor; }</code></pre>
jxfover 1 year ago
That&#x27;s super cool! What shader language is this using?
评论 #38464638 未加载
评论 #38464649 未加载
SuboptimalEngover 1 year ago
Here is a slowly rotating checkerboard.<p><pre><code> uniform float time; varying vec2 vUv; varying vec3 vNormal; vec2 rot(vec2 uv, float angle) { float c = cos(angle); float s = sin(angle); mat2 rot = mat2(s, -c, c, s); return uv * rot; } void main(){ vec3 black = vec3(0.0); vec3 white = vec3(1.0); vec3 color = black; vec2 uv = vUv; uv = rot(uv, sin(time) * 0.05); float boardSize = 24.0; uv = uv * boardSize; vec2 gridId = floor(uv); if (mod(gridId.x + gridId.y, 2.0) &lt;= 0.01) { color = white; } else { color = black; } gl_FragColor = vec4(color, 1.0); }</code></pre>
ddoolinover 1 year ago
The pilot on my flight to Vegas said the cost to advertise (or do whatever, I assume) was $470,000&#x2F;minute. I didn&#x27;t verify the claim but it isn&#x27;t too hard to believe and is pretty crazy, even if it&#x27;s remotely true.
评论 #38471267 未加载
评论 #38471022 未加载
aviparsover 1 year ago
Note: if you see a solid dark brown color, it means that your Shader didn&#x27;t work (that&#x27;s what OP put in the base MP4 video)
chrisallickover 1 year ago
It&#x27;s so fun to copy and paste these on the shader sim :)<p>It would be fun to make a little click and see microsite like: <a href="http:&#x2F;&#x2F;recodeproject.com&#x2F;" rel="nofollow noreferrer">http:&#x2F;&#x2F;recodeproject.com&#x2F;</a>
OutThisLifeover 1 year ago
Love this idea.
fassssstover 1 year ago
Fun with ChatGPT, just tell it to write some GLSL shader code for a shader that would look cool on the Las Vegas Sphere.
andrewstuartover 1 year ago
The sphere consumes so much solar energy that the sun dims a little when the sphere is switched on.
toddmatthewsover 1 year ago
What is a shader?
评论 #38467819 未加载
coolelectronicsover 1 year ago
really fucking cool! good job