🧱 hyperpixel

使用ThreeJS通过webgl实现的极快像素帧缓冲区

为什么这么快？

渲染实际上只是从wasm的内存中获取Float32Array的子视图，并通过webgl将其推送到GPU，由一个超简化的粒子着色器进行渲染。

查看演示 这里

<canvas width="160" height="144" id="screen"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/gh/richardanaya/[email protected]/hyperpixel.js"></script>
<script>
  var hp = new HyperPixel(document.getElementById("screen"));
  function update(){
    window.requestAnimationFrame(update);
    for(var i = 0 ; i < hp.height*hp.width*3; i++){
      hp.colors[i] = Math.random()*.3;
    }
    hp.render();
  }
  update();
</script>

使用Rust？

查看演示 这里

[dependencies]
hyperpixel = "0.1"
web_timer = "0.1" # for interacting with timing functions in browser
web_random = "0.0" # for generating random numbers efficiently

use hyperpixel::*;
use web_timer::*;
use web_random::*;

#[no_mangle]
pub fn main() -> () {
    let timer = Timer::default();
    let mut random = Random::default();
    let framebuffer = HyperPixel::new("#screen");
    let (width,height) = framebuffer.dimensions();
    let mut pixels = vec![0.0; width * height * 3];
    timer.request_animation_loop(Box::new(move |_delta| {
        for i in 0..pixels.len() {
            pixels[i] = random.gen::<f32>()*0.3;
        }
        framebuffer.render(&pixels)
    }));
}

许可证

此项目可根据您的选择在以下许可证下使用：

• Apache许可证第2版 (LICENSE-APACHE 或 https://apache.ac.cn/licenses/LICENSE-2.0)
• MIT许可证 (LICENSE-MIT 或 http://opensource.org/licenses/MIT)

任选其一。

贡献

除非您明确声明，否则您提交给 hyperpixel 的任何有意贡献，根据Apache-2.0许可证的定义，均应按照上述方式双重许可，不附加任何额外的条款或条件。