小编LJᛃ*_*LJᛃ的帖子

JavaScript是否提供高分辨率计时器?

JavaScript是否提供高分辨率计时器?

我从头开始编写了一些游戏引擎,一些是C语言,一些是Java,一些是Flash.在动画和交互式图形方面,我总是遵循相同的基本模型.使用以下设计创建基本类/结构:

void init() { /* Called once, preload essential resources here. */ }
void update(double time) { /* Updates game/animation state using high resolution time. */ }
void render(double time) { /* Updates screen graphics using high resolution time. */ }

void run()
{
    double time;
    init();
    while (!done)
    {
        time = queryTime();
        update(time);
        render(time);
    }
}
Run Code Online (Sandbox Code Playgroud)

时间对平滑动画和游戏状态计算非常重要.在本机代码Windows中,我使用QueryPerformanceCounter()QueryPerformanceFrequency()执行queryTime()每个游戏循环中的角色并将时间传递给更新/渲染.在Java中,我使用System.nanoTime().

什么是JavaScript中的等价物?也就是说,某些函数queryTime()返回具有高精度(亚毫秒)的时间值.从我所听到的,你可以用JavaScript获得的最佳准确度大约是15毫秒......这对动画来说太可怕了.

javascript animation

40
推荐指数
4
解决办法
3万
查看次数

如何从Phaser的Sprite/Background中消除抖动

我设置了一个示例jsfiddle,用适当的资产来说明这一点.

当你的角色移动并且相机开始平移时,你会注意到背景有一个小的"抖动".可以通过设置game.camera.roundPx为true 来禁用此功能.

但是,如果禁用它并移动角色.你的角色开始抖动.我在这次冒险中发现的一些事情:

  • 这种情况只发生body.velocity.x在两者P2Arcade物理学家之间.

  • 如果你移动角色body.x或者只是x它绝对没问题.

  • 如果你移除了瓷砖贴图纹理,你可以从字面上看到在移动时发生的抖动.示例此处 - 确保您移动足够远以使相机平移.

  • 我也尝试game.renderer.renderSession.roundPixels = false;过没有优势.

  • 这在CANVAS和WEBGL渲染模式下发生

javascript phaser-framework

7
推荐指数
1
解决办法
347
查看次数

是否可以动态索引到 WebGPU 存储缓冲区?

我正在尝试编写一个 WGSL 着色器来读取存储在存储缓冲区中的八叉树。问题是,编译器不喜欢我正在计算的动态索引来访问存储缓冲区中的叶子。wgpu 产生以下验证错误:

thread 'main' panicked at 'wgpu error: Validation Error

Caused by:
    In Device::create_shader_module
    Function [1] 'get_voxel' is invalid
    Expression [68] is invalid
    The expression [67] may only be indexed by a constant
Run Code Online (Sandbox Code Playgroud)

八叉树的结构使得我可以在 GPU 上遍历它。这篇 NVIDIA 论文概述了该结构:https://developer.nvidia.com/gpugems/gpugems2/part-v-image-orient-computing/chapter-37-octree-textures-gpu

本质上,八叉树是一个由IndirectionGrids 组成的数组,每个八叉树在内存中都IndirectionGrid恰好有 8个。GridCell网格单元可以表示指向另一个网格的指针IndirectionGrid,也可以表示一些数据。

假设八叉树最深处代表 16x16x16 网格。我想在 7,7,7 点到达GridCell。我们知道 7,7,7 位于根的单元格 0 中IndirectionGrid,因为坐标的每个分量都小于中点。GridCell如果我们将坐标分量相加,我们就可以获得当前 的索引IndirectionGrid。因为我正在遍历一棵树,所以我在每个级别都执行此操作。下面是演示这一点的不完整代码。

引起问题的行是let cell = grid.cells[grid_index].data;

所以最终我的问题是,是否允许动态索引?有什么我可以改变的东西可以神奇地让它发挥作用吗?或者我需要了解更多关于 WebGPU 所做的权衡的背景信息吗?

thread 'main' …
Run Code Online (Sandbox Code Playgroud)

shader rust webgpu wgpu-rs

6
推荐指数
1
解决办法
2163
查看次数

适用于 Safari 的 iPhone 12 Pro LiDAR API 访问

我正在使用基于 WebGL 的 WebAR 现实(实时 SLAM 和跟踪)。想知道是否有任何方法可以访问 LiDAR API 并在 Safari 浏览器中使用它?

我找不到任何有用的信息。

javascript iphone augmented-reality lidar

5
推荐指数
1
解决办法
200
查看次数

云上的丑陋渲染

我正在尝试实现本教程中的代码,但比例要大得多(半径 = 100000 单位)。

我不知道大小是否重要,但在我的地球上渲染云有一个奇怪的渲染。正如教程中所做的那样,我使用两个球体和三个纹理(地球贴图、凹凸贴图、云)。

结果如下(如果云更近,情况会更糟): 地球

云层距离行星表面越近,这种故障就越明显。如果云足够远(但这不现实),问题就会完全消失。

我能做些什么?

javascript zbuffer webgl three.js

3
推荐指数
1
解决办法
354
查看次数

"实体"和"游戏对象"之间的区别是什么?

我正在研究一个3D引擎API(渲染引擎,而不是游戏引擎),并试图让类名正确.

在我的系统中,我有一些组件,如"相机","变换","灯光","材料"等,包括我称之为"对象"的另一种组件类型.

每个"对象"都有一个链接到每个其他组件类型,即.链接到"相机",链接到"材料",等等.

很标准的东西.

我的问题是 - 应该被称为"对象"或"实体",还是其他什么?

任何人都可以指点我这些概念的规范文学吗?似乎是许多人的个人品味问题,但为了最大限度地理解文档,我希望将这一微妙之处固定下来.

naming naming-conventions game-engine

3
推荐指数
1
解决办法
1301
查看次数

如何让Android WebView清除缓存?

这是我的场景。我正在使用 WebView 在应用程序中显示我的移动就绪网站。我们定期更新我们的网站并自动清除我们的网站缓存,以便访问者获得我们网站的最新版本而不是过时的版本。我注意到有时 WebView 会提供旧内容 - 它有时不会加载我们网站的新版本。因此,我正在寻找一种方法来强制 WebView 显示新内容。

我知道我可以完全禁用 WebView 缓存并强制它每次都从我们的服务器抓取页面,但这效率很低。我希望缓存页面是最新版本时使用的缓存;如果不是,则不应使用缓存。

我能想到的唯一方法是手动清除缓存,如下所示:

@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    view.clearCache(true);
}
Run Code Online (Sandbox Code Playgroud)

但是,这又是低效的——不需要在每次页面查看后清除整个缓存。我的问题是,有没有办法清除刚刚缓存的 HTML 文件并保留 CSS / JS / 等?这将是始终清除缓存和有时提供过时内容之间的一个很好的折衷方案。通过在每次页面视图后仅删除缓存的 HTML 文件,WebView 被迫从我的服务器获取最新的 HTML 页面,而无需重新加载 CSS 或 JS。

更好的是,为了节省不必要的处理能力的浪费,有没有办法从缓存中仅删除用户所在的特定页面?例如,加载 google.com 后,将删除 google.com 的缓存 HTML 页面(但不包括 CSS、JS 等),以便下次加载 google.com 时,获取最新版本。

谢谢!

android caching webview

3
推荐指数
2
解决办法
2万
查看次数

关于 gl.COLOR_BUFFER_BIT 变量的混淆

我目前正在学习Webgl,在下面的示例中,我对gl.COLOR_BUFFER_BIT的用法有一个令人困惑的点:

  const canvas = document.querySelector("#glcanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }
  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  console.log('1: ', gl.COLOR_BUFFER_BIT);

  // Clear the color buffer with specified clear color
  gl.clearColor(1, 1, 1, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  console.log('2: ', gl.COLOR_BUFFER_BIT);
Run Code Online (Sandbox Code Playgroud)

我的理解gl.clear(gl.COLOR_BUFFER_BIT)是将 的值设置gl.COLOR_BUFFER_BIT为 中设置的颜色 …

webgl

3
推荐指数
1
解决办法
2413
查看次数

如何从已创建的WebGL上下文中获取WebGLProrgram对象?

我想知道,如何WebGLProgram从任何所需的WebGL上下文中获取任何WebGL程序实例()?

获取WebGL上下文不是问题.您正在使用document.getElementsByTagName()或搜索canvas元素的当前页面的DOM document.getElementById(),如果您知道确切的画布ID:

let canvas = document.getElementById( "canvasId" );
let context = canvas.getContext( "webgl" );
Run Code Online (Sandbox Code Playgroud)

在这里我们按照我的想法获取当前上下文,但是如果我想获取一些着色器参数或从已经运行的顶点/片段着色器获得某些值 - 我需要一个WebGL程序,它与当前的WebGL渲染上下文相关联.

但我无法在WebGL API中找到任何方法,如context.getAttachedProgram()context.getActiveProgram().

那么获取用于渲染过程的活动WebGL程序的方式是什么?也许,有一些特殊的WebGL参数?

javascript webgl

1
推荐指数
2
解决办法
1310
查看次数

webgl - 试图创建我的第一个小方框

我是webGL的新手,并试图使用javascript在我的画布上显示一个简单的方框.我不知道如何调试.如果有人可以帮助我会很棒.谢谢!

    var gl,
        shaderProgram;
    initGL();
    createShaders();
    draw();
    
    function initGL() { 
      let canvas = document.getElementById("canvas");
      gl = canvas.getContext("webgl");
      gl.viewport(0.0, 0.0, canvas.width, canvas.height);
      gl.clearColor(0.0, 1.0, 1.0, 1.0);  // colors for r, g, b and alpha. these are all normalized values from 0 to 1.
    }
    
    function createShaders(){
      var vs="";
      vs+="void main(void) {";
      vs+="  gl_Position = vec4(0.0, 0.0, 0.0, 1.0)";
      vs+="  gl_PointSize = 10.0;";
      vs+="}";
      
      
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vs);
      gl.compileShader(vertexShader);
      
      var fs="";
      fs+="void main(void) {";
      fs+="  gl_FragColor = vec4(0.0, 0.0, 0.0, …
Run Code Online (Sandbox Code Playgroud)

javascript canvas webgl

1
推荐指数
1
解决办法
132
查看次数

是否可以仅使用顶点着色器创建 WebGL 程序?

当我尝试链接仅附加顶点着色器的 WebGL2 着色器程序时,出现“缺少着色器”错误。我正在尝试使用变换反馈,并且我认为由于顶点着色器的输出已写出,因此不需要片段着色器。

从这篇博文:链接看来您应该能够做到这一点。我缺少的 WebGL 有什么特别之处吗?

webgl2

0
推荐指数
1
解决办法
311
查看次数