shader/shadertoy移植/test.js
严争鸣 36b5eb0abb init
2024-12-09 14:57:06 +08:00

88 lines
2.1 KiB
JavaScript

const viewer = new Cesium.Viewer('cesiumContainer')
const shader = `
in vec2 v_st;
void main()
{
float iTime = czm_frameNumber/100.;
vec2 p = 2.0 * v_st - 1.;
// vec2 p = (2.0 * gl_FragCoord.xy-czm_viewport.zw)/czm_viewport.w;
float tau = 3.1415926535*2.0;
float a = atan(p.x,p.y);
float r = length(p)*0.75;
vec2 uv = vec2(a/tau,r);
//get the color
float xCol = (uv.x - (iTime / 3.0)) * 3.0;
xCol = mod(xCol, 3.0);
vec3 horColour = vec3(0.25, 0.25, 0.25);
if (xCol < 1.0) {
horColour.r += 1.0 - xCol;
horColour.g += xCol;
}
else if (xCol < 2.0) {
xCol -= 1.0;
horColour.g += 1.0 - xCol;
horColour.b += xCol;
}
else {
xCol -= 2.0;
horColour.b += 1.0 - xCol;
horColour.r += xCol;
}
// draw color beam
uv = (2.0 * uv) - 1.0;
float beamWidth = (0.7+0.5*cos(uv.x*10.0*tau*0.15*clamp(floor(5.0 + 10.0*cos(iTime)), 0.0, 10.0))) * abs(1.0 / (30.0 * uv.y));
vec3 horBeam = vec3(beamWidth);
//out_FragColor = vec4((( horBeam) * horColour), 1.0);
vec3 color = (horBeam) * horColour;
out_FragColor = vec4(color,color.r+color.g+color.b);
}`
let xMin = 115,
yMin = 39,
xMax = 117,
yMax = 41
let rect = new Cesium.Rectangle(
Cesium.Math.toRadians(xMin),
Cesium.Math.toRadians(yMin),
Cesium.Math.toRadians(xMax),
Cesium.Math.toRadians(yMax)
)
const rectangle = new Cesium.RectangleGeometry({
rectangle: rect,
height: 10000.0,
})
const geometry = Cesium.RectangleGeometry.createGeometry(rectangle)
let appearance = new Cesium.MaterialAppearance({
material: new Cesium.Material({
fabric: {
type: 'Color',
uniforms: {
color: Cesium.Color.RED,
},
},
}),
fragmentShaderSource: shader,
})
const primitive = new Cesium.Primitive({
appearance: appearance,
geometryInstances: new Cesium.GeometryInstance({
geometry: geometry,
}),
asynchronous: false,
})
viewer.scene.primitives.add(primitive)
// primitive.appearance = appearance;