小编ocl*_*yke的帖子

问题

应用程序需要窗口的内部大小。React 模式建议在一次性效果挂钩中注册一个事件侦听器。调用window.addEventListener似乎只发生一次，但事件侦听器堆积如山，对性能产生负面影响。

代码

这是重现此问题的精简源代码

import React, {useState, useEffect} from 'react';

const getWindowRect = () => {
  return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
}

// custom hook to track the window dimensions
const useWindowRect = () => {
  // use state for the aspect ratio
  let [rect, setRect] = useState(getWindowRect);

  // useEffect w/o deps should only be called once
  useEffect(() => {
    const resizeHandler = () => { setRect(getWindowRect()); }; 
    
    window.addEventListener('resize', resizeHandler);
    console.log('added resize listener');

    // return the …

我一直在学习像webglfundamentals这样的 WebGL 教程，但遇到了一个绊脚石 - 我相信我需要使用我创建的纹理将信息直接传递到片段着色器，但我似乎无法正确索引纹理。

目标是传递有关光源（位置和颜色）的信息，这些信息将被纳入片段颜色中。理想情况下，该信息的值和长度都是动态的。

再生产

我在这个小提琴中创建了问题的简化版本：WebGL - 数据纹理测试

这是一些代码。

在一次性设置中，我们创建一个纹理，用数据填充它，并在该纹理上应用似乎最简单的设置（没有 mips，没有字节打包问题[？]）

  // lookup uniforms
  var textureLocation = gl.getUniformLocation(program, "u_texture");

  // Create a texture.
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // fill texture with 1x3 pixels
  const level = 0;
  const internalFormat = gl.RGBA; // I've also tried to work with gl.LUMINANCE
  //   but it feels harder to debug
  const width = 1;
  const height = 3;
  const border = 0;
  const type = …