@things-factory/weather 9.0.0-beta.55 → 9.0.0-beta.56

package/client/ol-components/webgl-image-static.ts

@@ -1,244 +0,0 @@
-import ImageStatic from 'ol/source/ImageStatic'
-import ImageWrapper from 'ol/Image'
-import { Extent } from 'ol/extent'
-import { ProjectionLike } from 'ol/proj'
-import { AttributionLike } from 'ol/source/Source'
-
-class WebGLImageStatic extends ImageStatic {
-  private canvas: HTMLCanvasElement | null = null
-  private gl: WebGLRenderingContext | null = null
-  private program: WebGLProgram | null = null
-  private texture: WebGLTexture | null = null
-  private buffer: WebGLBuffer | null = null
-  private opacity: number = 0.8
-  private blendMode: string = 'normal'
-
-  constructor(option: {
-    url: string
-    projection: ProjectionLike
-    interpolation?: boolean
-    imageExtent: Extent
-    crossOrigin?: string
-    attributions?: AttributionLike
-    opacity?: number
-    blendMode?: string
-  }) {
-    super({
-      ...option,
-      imageLoadFunction: (image, src) => this._loadImageWithWebGL(image, src)
-    })
-
-    // 옵션에서 값 설정 (기본값 제공)
-    this.opacity = option.opacity !== undefined ? option.opacity : 0.8
-    this.blendMode = option.blendMode || 'normal'
-
-    // WebGL 컨텍스트 설정
-    this.canvas = document.createElement('canvas')
-    this.gl = this.canvas.getContext('webgl', {
-      alpha: true,
-      antialias: false,
-      depth: false
-    }) as WebGLRenderingContext
-
-    if (!this.gl) {
-      throw new Error('WebGL을 초기화할 수 없습니다.')
-    }
-
-    this._initializeWebGL()
-  }
-
-  /**
-   * 투명도 설정
-   */
-  public setOpacity(opacity: number): void {
-    if (opacity !== this.opacity) {
-      this.opacity = opacity
-      if (this.texture) {
-        this._renderTexture()
-      }
-    }
-  }
-
-  /**
-   * 블렌드 모드 설정
-   */
-  public setBlendMode(blendMode: string): void {
-    if (blendMode !== this.blendMode) {
-      this.blendMode = blendMode
-      if (this.texture) {
-        this._renderTexture()
-      }
-    }
-  }
-
-  /**
-   * WebGL 초기화
-   */
-  private _initializeWebGL() {
-    this.program = this._createShaderProgram()
-
-    if (!this.program) return
-
-    this._initializeBuffers()
-  }
-
-  /**
-   * WebGL에서 사용하는 버퍼 설정
-   */
-  private _initializeBuffers() {
-    const vertices = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0])
-    const gl = this.gl!
-
-    this.buffer = gl.createBuffer()
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
-    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
-  }
-
-  /**
-   * WebGL을 사용하여 렌더링
-   */
-  private _renderTexture() {
-    if (!this.gl || !this.program || !this.texture || !this.buffer) return
-
-    this.gl.viewport(0, 0, this.canvas!.width, this.canvas!.height)
-    this.gl.clearColor(0, 0, 0, 0)
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT)
-    this.gl.useProgram(this.program)
-
-    this.gl.activeTexture(this.gl.TEXTURE0)
-    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture)
-    this.gl.uniform1i(this.gl.getUniformLocation(this.program, 'u_texture'), 0)
-
-    // 사용자 지정 투명도 사용
-    this.gl.uniform1f(this.gl.getUniformLocation(this.program, 'u_opacity'), this.opacity)
-
-    // 블렌드 모드 설정
-    let blendModeValue = 0 // normal
-    switch (this.blendMode) {
-      case 'multiply':
-        blendModeValue = 1
-        break
-      case 'screen':
-        blendModeValue = 2
-        break
-      case 'color-dodge':
-        blendModeValue = 3
-        break
-      case 'invert':
-        blendModeValue = 4
-        break
-    }
-    this.gl.uniform1i(this.gl.getUniformLocation(this.program, 'u_blendMode'), blendModeValue)
-
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer)
-    const a_position = this.gl.getAttribLocation(this.program, 'a_position')
-    const a_texCoord = this.gl.getAttribLocation(this.program, 'a_texCoord')
-
-    this.gl.enableVertexAttribArray(a_position)
-    this.gl.enableVertexAttribArray(a_texCoord)
-    this.gl.vertexAttribPointer(a_position, 2, this.gl.FLOAT, false, 16, 0)
-    this.gl.vertexAttribPointer(a_texCoord, 2, this.gl.FLOAT, false, 16, 8)
-    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4)
-  }
-
-  /**
-   * WebGL에서 기후 데이터 이미지를 로드
-   */
-  private _loadImageWithWebGL(image: ImageWrapper, src: string) {
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-
-    img.onload = () => {
-      if (!this.gl) return
-
-      // 캔버스 크기 설정
-      this.canvas!.width = img.width
-      this.canvas!.height = img.height
-
-      this.texture = this.gl.createTexture()
-      this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture)
-
-      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE)
-      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE)
-      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR)
-      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR)
-
-      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img)
-
-      this._renderTexture()
-      ;(image.getImage() as HTMLImageElement | HTMLVideoElement).src = this.canvas!.toDataURL('image/png')
-
-      this.gl = null
-      this.canvas = null
-    }
-
-    img.src = src
-  }
-
-  /**
-   * 셰이더 프로그램 생성
-   */
-  private _createShaderProgram(): WebGLProgram | null {
-    const vertexShaderSource = `
-    precision highp float;
-    attribute vec4 a_position;
-    attribute vec2 a_texCoord;
-    varying vec2 v_texCoord;
-    void main() {
-      gl_Position = a_position;
-      v_texCoord = a_texCoord;
-    }`
-
-    const fragmentShaderSource = `
-    precision highp float;
-    uniform sampler2D u_texture;
-    uniform float u_opacity;
-    uniform int u_blendMode;
-    varying vec2 v_texCoord;
-    
-    void main() {
-      vec4 texColor = texture2D(u_texture, v_texCoord);
-      
-      // 완전 투명한 픽셀은 렌더링하지 않음
-      if (texColor.a < 0.01) {
-        discard;
-      }
-      
-      float temperature = texColor.r; // 예: 빨간 채널에 온도 정보가 있다고 가정
-      vec3 color;
-
-      if (temperature < 0.3) {
-        color = mix(vec3(0.0, 0.0, 1.0), vec3(0.0, 1.0, 1.0), temperature / 0.3); // 파란색에서 청록색으로
-      } else if (temperature < 0.6) {
-        color = mix(vec3(0.0, 1.0, 1.0), vec3(0.0, 1.0, 0.0), (temperature - 0.3) / 0.3); // 청록색에서 녹색으로
-      } else {
-        color = mix(vec3(0.0, 1.0, 0.0), vec3(1.0, 0.0, 0.0), (temperature - 0.6) / 0.4); // 녹색에서 빨간색으로
-      }
-
-      gl_FragColor = vec4(color, texColor.a * u_opacity);
-    }`
-
-    const gl = this.gl!
-    const vertexShader = this._compileShader(gl.VERTEX_SHADER, vertexShaderSource)
-    const fragmentShader = this._compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource)
-    if (!vertexShader || !fragmentShader) return null
-
-    const program = gl.createProgram()!
-    gl.attachShader(program, vertexShader)
-    gl.attachShader(program, fragmentShader)
-    gl.linkProgram(program)
-
-    return gl.getProgramParameter(program, gl.LINK_STATUS) ? program : null
-  }
-
-  private _compileShader(type: number, source: string): WebGLShader | null {
-    const gl = this.gl!
-
-    const shader = gl.createShader(type)!
-    gl.shaderSource(shader, source)
-    gl.compileShader(shader)
-    return gl.getShaderParameter(shader, gl.COMPILE_STATUS) ? shader : null
-  }
-}
-
-export default WebGLImageStatic

package/client/ol-components/wind.ts

@@ -1,120 +0,0 @@
-import { get as getProjection, transform } from 'ol/proj.js'
-import DataTileSource from 'ol/source/DataTile.js'
-import { createXYZ, wrapX } from 'ol/tilegrid.js'
-
-const windData: Promise<{ data: ArrayBuffer; width: number; height: number }> = new Promise((resolve, reject) => {
-  const image = new Image()
-  image.onload = () => {
-    const canvas = document.createElement('canvas')
-    const width = image.width
-    const height = image.height
-    canvas.width = width
-    canvas.height = height
-
-    const context = canvas.getContext('2d')!
-    context.drawImage(image, 0, 0)
-    const data = context.getImageData(0, 0, width, height).data
-    resolve({ data, width, height })
-  }
-  image.onerror = () => {
-    reject(new Error('failed to load'))
-  }
-  image.src = '/assets/images/wind.png'
-})
-
-function bilinearInterpolation(xAlong, yAlong, v11, v21, v12, v22) {
-  const q11 = (1 - xAlong) * (1 - yAlong) * v11
-  const q21 = xAlong * (1 - yAlong) * v21
-  const q12 = (1 - xAlong) * yAlong * v12
-  const q22 = xAlong * yAlong * v22
-  return q11 + q21 + q12 + q22
-}
-
-function interpolatePixels(xAlong, yAlong, p11, p21, p12, p22) {
-  return p11.map((_, i) => bilinearInterpolation(xAlong, yAlong, p11[i], p21[i], p12[i], p22[i]))
-}
-
-const dataTileGrid = createXYZ()
-const dataTileSize = 256
-
-const inputImageProjection = getProjection('EPSG:4326')!
-const dataTileProjection = getProjection('EPSG:3857')!
-
-const inputBands = 4
-const dataBands = 3
-
-// range of wind velocities
-// these values are stretched between 0 and 255 in the png
-const minU = -21.32
-const maxU = 26.8
-const deltaU = maxU - minU
-const minV = -21.57
-const maxV = 21.42
-const deltaV = maxV - minV
-
-const wind = new DataTileSource({
-  // transition must be 0, see https://github.com/openlayers/openlayers/issues/16119
-  transition: 0,
-  wrapX: true,
-  async loader(z, x, y) {
-    const { data: inputData, width: inputWidth, height: inputHeight } = await windData
-
-    const tileCoord = wrapX(dataTileGrid, [z, x, y], dataTileProjection)
-    const extent = dataTileGrid.getTileCoordExtent(tileCoord)
-    const resolution = dataTileGrid.getResolution(z)
-    const data = new Float32Array(dataTileSize * dataTileSize * dataBands)
-    for (let row = 0; row < dataTileSize; ++row) {
-      let offset = row * dataTileSize * dataBands
-      const mapY = extent[3] - row * resolution
-      for (let col = 0; col < dataTileSize; ++col) {
-        const mapX = extent[0] + col * resolution
-        const [lon, lat] = transform([mapX, mapY], dataTileProjection, inputImageProjection)
-
-        const x = (inputWidth * (lon + 180)) / 360
-        let x1 = Math.floor(x)
-        let x2 = Math.ceil(x)
-        const xAlong = x - x1
-        if (x1 < 0) {
-          x1 += inputWidth
-        }
-        if (x2 >= inputWidth) {
-          x2 -= inputWidth
-        }
-
-        const y = (inputHeight * (90 - lat)) / 180
-        let y1 = Math.floor(y)
-        let y2 = Math.ceil(y)
-        const yAlong = y - y1
-        if (y1 < 0) {
-          y1 = 0
-        }
-        if (y2 >= inputHeight) {
-          y2 = inputHeight - 1
-        }
-
-        const corners = [
-          [x1, y1],
-          [x2, y1],
-          [x1, y2],
-          [x2, y2]
-        ]
-
-        const pixels = corners.map(([cx, cy]) => {
-          const inputOffset = (cy * 360 + cx) * inputBands
-          return [inputData[inputOffset], inputData[inputOffset + 1]]
-        })
-
-        const interpolated = interpolatePixels(xAlong, yAlong, ...(pixels as [any, any, any, any]))
-        const u = minU + (deltaU * interpolated[0]) / 255
-        const v = minV + (deltaV * interpolated[1]) / 255
-
-        data[offset] = u
-        data[offset + 1] = v
-        offset += dataBands
-      }
-    }
-    return data
-  }
-})
-
-export default wind