From 7947847d937c989042fe348a360aee4ec44b9ce5 Mon Sep 17 00:00:00 2001 From: Don McCurdy Date: Thu, 18 Jan 2024 13:38:35 -0500 Subject: [PATCH] feat(examples): Port remaining shaders to GLSL 300 ES --- .../bezier-curve-layer-fragment.glsl.js | 10 +++++---- .../bezier-curve-layer-vertex.glsl.js | 15 ++++++------- showcases/ascii/ascii-layer/ascii-filter.js | 19 ++++++++++------- .../delaunay-cover-layer-fragment.glsl.js | 10 +++++---- .../delaunay-cover-layer-vertex.glsl.js | 13 ++++++------ .../delaunay-interpolation-vertex.glsl.js | 7 ++++--- .../elevation-layer-fragment.glsl.js | 11 ++++++---- .../elevation-layer-vertex.glsl.js | 11 +++++----- .../particle-layer-fragment.glsl.js | 8 ++++--- .../particle-layer-vertex.glsl.js | 15 ++++++------- .../transform-feedback-vertex.glsl.js | 9 ++++---- .../layers/wind-layer/wind-layer-fragment.js | 12 ++++++----- .../layers/wind-layer/wind-layer-vertex.js | 21 ++++++++++--------- 13 files changed, 91 insertions(+), 70 deletions(-) diff --git a/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js b/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js index ac3512e8e88..6b604157d80 100644 --- a/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js +++ b/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js @@ -19,19 +19,21 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME bezier-curve-layer-fragment-shader precision highp float; -varying vec4 vColor; +in vec4 vColor; +out vec4 fragColor; void main(void) { - gl_FragColor = vColor; + fragColor = vColor; // use highlight color if this fragment belongs to the selected object. - gl_FragColor = picking_filterHighlightColor(gl_FragColor); + fragColor = picking_filterHighlightColor(fragColor); // use picking color if rendering to picking FBO. - gl_FragColor = picking_filterPickingColor(gl_FragColor); + fragColor = picking_filterPickingColor(fragColor); } `; diff --git a/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js b/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js index 833e832487f..752b9c023cc 100644 --- a/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js +++ b/examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js @@ -19,20 +19,21 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME bezier-curve-layer-vertex-shader -attribute vec3 positions; -attribute vec3 instanceSourcePositions; -attribute vec3 instanceTargetPositions; -attribute vec3 instanceControlPoints; -attribute vec4 instanceColors; -attribute vec3 instancePickingColors; +in vec3 positions; +in vec3 instanceSourcePositions; +in vec3 instanceTargetPositions; +in vec3 instanceControlPoints; +in vec4 instanceColors; +in vec3 instancePickingColors; uniform float numSegments; uniform float strokeWidth; uniform float opacity; -varying vec4 vColor; +out vec4 vColor; // offset vector by strokeWidth pixels // offset_direction is -1 (left) or 1 (right) diff --git a/showcases/ascii/ascii-layer/ascii-filter.js b/showcases/ascii/ascii-layer/ascii-filter.js index effa9f74518..88ca8d6b71a 100644 --- a/showcases/ascii/ascii-layer/ascii-filter.js +++ b/showcases/ascii/ascii-layer/ascii-filter.js @@ -3,21 +3,22 @@ import GL from '@luma.gl/constants'; import {sortCharactersByBrightness} from './utils'; const vs = ` +#version 300 es #define SHADER_NAME feedback-vertex-shader uniform sampler2D video; uniform sampler2D pixelMapTexture; -attribute vec2 uv; +in vec2 uv; -varying vec4 instanceIconFrames; -varying vec4 instanceColors; +out vec4 instanceIconFrames; +out vec4 instanceColors; float bitColor(float x) { return floor(x * 4. + 0.5) * 64.; } void main(void) { - vec4 pixel = texture2D(video, uv); + vec4 pixel = texture(video, uv); float luminance = 0.2126 * pixel.r + 0.7152 * pixel.g + 0.0722 * pixel.b; instanceColors = vec4( @@ -27,22 +28,24 @@ void main(void) { 255.0 ); - instanceIconFrames = texture2D(pixelMapTexture, vec2(luminance + 0.5 / 256., 0.5)); + instanceIconFrames = texture(pixelMapTexture, vec2(luminance + 0.5 / 256., 0.5)); gl_Position = vec4(0.0); } `; const fs = ` +#version 300 es #define SHADER_NAME feedback-fragment-shader precision highp float; -varying vec4 instanceIconFrames; -varying vec4 instanceColors; +in vec4 instanceIconFrames; +in vec4 instanceColors; +out vec4 fragColor; void main(void) { - gl_FragColor = vec4(0.0); + fragColor = vec4(0.0); } `; diff --git a/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-fragment.glsl.js b/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-fragment.glsl.js index 370e9f37148..4a270b2dcec 100644 --- a/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-fragment.glsl.js +++ b/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-fragment.glsl.js @@ -19,14 +19,16 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME delaunay-cover-fragment-shader -varying vec4 vPosition; -varying vec4 vNormal; -varying vec4 vColor; +in vec4 vPosition; +in vec4 vNormal; +in vec4 vColor; +out vec4 fragColor; void main(void) { float lightWeight = getLightWeight(vPosition.xyz, vNormal.xzy); - gl_FragColor = vec4(vColor.xyz * lightWeight, vColor.a); + fragColor = vec4(vColor.xyz * lightWeight, vColor.a); } `; diff --git a/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-vertex.glsl.js b/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-vertex.glsl.js index 169b0a1334d..1fbe7d409fc 100644 --- a/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-vertex.glsl.js +++ b/showcases/wind/src/layers/delaunay-cover-layer/delaunay-cover-layer-vertex.glsl.js @@ -19,18 +19,19 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME delaunay-cover-vertex-shader #define HEIGHT_FACTOR 25. uniform vec2 bounds; -attribute vec3 positions; -attribute vec3 next; -attribute vec3 next2; +in vec3 positions; +in vec3 next; +in vec3 next2; -varying vec4 vPosition; -varying vec4 vNormal; -varying vec4 vColor; +out vec4 vPosition; +out vec4 vNormal; +out vec4 vColor; vec4 getWorldSpacePos(vec3 positions) { vec2 pos = project_position(positions.xy); diff --git a/showcases/wind/src/layers/delaunay-interpolation/delaunay-interpolation-vertex.glsl.js b/showcases/wind/src/layers/delaunay-interpolation/delaunay-interpolation-vertex.glsl.js index c85064c8467..2de6d75cbb1 100644 --- a/showcases/wind/src/layers/delaunay-interpolation/delaunay-interpolation-vertex.glsl.js +++ b/showcases/wind/src/layers/delaunay-interpolation/delaunay-interpolation-vertex.glsl.js @@ -19,15 +19,16 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME delaunay-vertex-shader uniform vec4 bbox; uniform vec2 size; -attribute vec3 positions; -attribute vec3 data; +in vec3 positions; +in vec3 data; -varying vec4 vColor; +out vec4 vColor; void main(void) { float posX = mix(-1., 1., (positions.x - bbox.x) / (bbox.y - bbox.x)); diff --git a/showcases/wind/src/layers/elevation-layer/elevation-layer-fragment.glsl.js b/showcases/wind/src/layers/elevation-layer/elevation-layer-fragment.glsl.js index dc860f6a96c..a1e639cd37c 100644 --- a/showcases/wind/src/layers/elevation-layer/elevation-layer-fragment.glsl.js +++ b/showcases/wind/src/layers/elevation-layer/elevation-layer-fragment.glsl.js @@ -1,11 +1,14 @@ export default `\ +#version 300 es #define SHADER_NAME elevation-layer-fragment-shader uniform vec2 elevationRange; -varying float lightWeight; -varying vec3 vNormal; -varying float vAltitude; +in float lightWeight; +in vec3 vNormal; +in float vAltitude; + +out vec4 fragColor; void main() { if (vAltitude < -90.0) { @@ -14,6 +17,6 @@ void main() { float opacity = smoothstep(elevationRange.x, elevationRange.y / 2.0, vAltitude) * 1.; - gl_FragColor = vec4(vec3(15./70., 26./70., 36./70.) * lightWeight, opacity); + fragColor = vec4(vec3(15./70., 26./70., 36./70.) * lightWeight, opacity); } `; diff --git a/showcases/wind/src/layers/elevation-layer/elevation-layer-vertex.glsl.js b/showcases/wind/src/layers/elevation-layer/elevation-layer-vertex.glsl.js index 3860c4b8854..9a16080b857 100644 --- a/showcases/wind/src/layers/elevation-layer/elevation-layer-vertex.glsl.js +++ b/showcases/wind/src/layers/elevation-layer/elevation-layer-vertex.glsl.js @@ -1,4 +1,5 @@ export default `\ +#version 300 es #define SHADER_NAME elevation-layer-vertex-shader uniform sampler2D elevationTexture; @@ -6,15 +7,15 @@ uniform vec4 elevationBounds; uniform vec2 elevationRange; uniform float zScale; -attribute vec3 positions; +in vec3 positions; -varying float lightWeight; -varying vec3 vNormal; -varying float vAltitude; +out float lightWeight; +out vec3 vNormal; +out float vAltitude; vec3 getWorldPosition(vec2 lngLat) { vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy); - vec4 elevation = texture2D(elevationTexture, texCoords); + vec4 elevation = texture(elevationTexture, texCoords); float altitude = mix(elevationRange.x, elevationRange.y, elevation.r); diff --git a/showcases/wind/src/layers/particle-layer/particle-layer-fragment.glsl.js b/showcases/wind/src/layers/particle-layer/particle-layer-fragment.glsl.js index 47cb80535a0..0530c63c7c4 100644 --- a/showcases/wind/src/layers/particle-layer/particle-layer-fragment.glsl.js +++ b/showcases/wind/src/layers/particle-layer/particle-layer-fragment.glsl.js @@ -19,12 +19,14 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME particle-layer-fragment-shader precision highp float; -varying vec4 vColor; -varying float vAltitude; +in vec4 vColor; +in float vAltitude; +out vec4 fragColor; void main(void) { // if (vColor.a < 0.07) { @@ -38,6 +40,6 @@ void main(void) { if (false && length(diff) > 0.5) { discard; } - gl_FragColor = vColor; + fragColor = vColor; } `; diff --git a/showcases/wind/src/layers/particle-layer/particle-layer-vertex.glsl.js b/showcases/wind/src/layers/particle-layer/particle-layer-vertex.glsl.js index e037338cb3f..84de3dc30c4 100644 --- a/showcases/wind/src/layers/particle-layer/particle-layer-vertex.glsl.js +++ b/showcases/wind/src/layers/particle-layer/particle-layer-vertex.glsl.js @@ -19,6 +19,7 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME particle-layer-vertex-shader #define HEIGHT_FACTOR 25. @@ -39,16 +40,16 @@ uniform vec4 elevationBounds; uniform vec2 elevationRange; uniform float zScale; -attribute vec3 positions; -attribute vec4 posFrom; -// attribute vec3 vertices; +in vec3 positions; +in vec4 posFrom; +// in vec3 vertices; -varying vec4 vColor; -varying float vAltitude; +out vec4 vColor; +out float vAltitude; float getAltitude(vec2 lngLat) { vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy); - vec4 elevation = texture2D(elevationTexture, texCoords); + vec4 elevation = texture(elevationTexture, texCoords); return mix(elevationRange.x, elevationRange.y, elevation.r); } @@ -58,7 +59,7 @@ void main(void) { float x = (posFrom.x - bbox.x) / (bbox.y - bbox.x); float y = (posFrom.y - bbox.z) / (bbox.w - bbox.z); vec2 coord = vec2(x, 1. - y); - vec4 texel = mix(texture2D(dataFrom, coord), texture2D(dataTo, coord), delta); + vec4 texel = mix(texture(dataFrom, coord), texture(dataTo, coord), delta); vAltitude = getAltitude(posFrom.xy); //float wind = (texel.y - bounds1.x) / (bounds1.y - bounds1.x); diff --git a/showcases/wind/src/layers/particle-layer/transform-feedback-vertex.glsl.js b/showcases/wind/src/layers/particle-layer/transform-feedback-vertex.glsl.js index 91d4733337d..9dfddf79483 100644 --- a/showcases/wind/src/layers/particle-layer/transform-feedback-vertex.glsl.js +++ b/showcases/wind/src/layers/particle-layer/transform-feedback-vertex.glsl.js @@ -19,6 +19,7 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME particle-feedback-vertex-shader #define PI 3.1415926535 @@ -40,8 +41,8 @@ uniform vec2 bounds0; uniform vec2 bounds1; uniform vec2 bounds2; -//attribute vec3 positions; -attribute vec4 posFrom; +//in vec3 positions; +in vec4 posFrom; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); @@ -52,8 +53,8 @@ void main(void) { float x = (posFrom.x - bbox.x) / (bbox.y - bbox.x); float y = (posFrom.y - bbox.z) / (bbox.w - bbox.z); vec2 coord = vec2(x, 1. - y); - vec4 texel1 = texture2D(dataFrom, coord); - vec4 texel2 = texture2D(dataTo, coord); + vec4 texel1 = texture(dataFrom, coord); + vec4 texel2 = texture(dataTo, coord); vec4 texel = mix(texel1, texel2, delta); // angle diff --git a/showcases/wind/src/layers/wind-layer/wind-layer-fragment.js b/showcases/wind/src/layers/wind-layer/wind-layer-fragment.js index da0e765c6a9..517853c5089 100644 --- a/showcases/wind/src/layers/wind-layer/wind-layer-fragment.js +++ b/showcases/wind/src/layers/wind-layer/wind-layer-fragment.js @@ -19,12 +19,14 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME wind-layer-fragment-shader -varying vec4 vPosition; -varying vec4 vNormal; -varying vec4 vColor; -varying float vAltitude; +in vec4 vPosition; +in vec4 vNormal; +in vec4 vColor; +in float vAltitude; +out vec4 fragColor; void main(void) { if (vColor.a == 0.) { @@ -36,6 +38,6 @@ void main(void) { // discard; // } float lightWeight = getLightWeight(vPosition.xyz, vNormal.xzy); - gl_FragColor = vec4(vColor.xyz * lightWeight, 1); + fragColor = vec4(vColor.xyz * lightWeight, 1); } `; diff --git a/showcases/wind/src/layers/wind-layer/wind-layer-vertex.js b/showcases/wind/src/layers/wind-layer/wind-layer-vertex.js index 66f6cd57616..26bdd0b79bd 100644 --- a/showcases/wind/src/layers/wind-layer/wind-layer-vertex.js +++ b/showcases/wind/src/layers/wind-layer/wind-layer-vertex.js @@ -19,6 +19,7 @@ // THE SOFTWARE. export default `\ +#version 300 es #define SHADER_NAME wind-layer-vertex-shader #define PI 3.1415926535 @@ -40,18 +41,18 @@ uniform vec2 bounds2; uniform vec4 elevationBounds; uniform vec2 elevationRange; -attribute vec3 positions; -attribute vec3 vertices; -attribute vec3 normals; +in vec3 positions; +in vec3 vertices; +in vec3 normals; -varying vec4 vPosition; -varying vec4 vNormal; -varying vec4 vColor; -varying float vAltitude; +out vec4 vPosition; +out vec4 vNormal; +out vec4 vColor; +out float vAltitude; float getAltitude(vec2 lngLat) { vec2 texCoords = (lngLat - elevationBounds.xy) / (elevationBounds.zw - elevationBounds.xy); - vec4 elevation = texture2D(elevationTexture, texCoords); + vec4 elevation = texture(elevationTexture, texCoords); return mix(elevationRange.x, elevationRange.y, elevation.r); } @@ -61,8 +62,8 @@ void main(void) { float x = (positions.x - bbox.x) / (bbox.y - bbox.x); float y = (positions.y - bbox.z) / (bbox.w - bbox.z); vec2 coord = vec2(x, 1. - y); - vec4 texel1 = texture2D(dataFrom, coord); - vec4 texel2 = texture2D(dataTo, coord); + vec4 texel1 = texture(dataFrom, coord); + vec4 texel2 = texture(dataTo, coord); vec4 texel = mix(texel1, texel2, delta); // angle