不请自来，大概有下面几个步骤，希望对你有所帮助：
1、需要在着色器里面定义

uniform float u_time

2、在webgl里面获取到u_time变量

let utime= gl.getUniformLocation(gl.program,'u_time');

3、将js里面的时间赋值给time

 gl.uniform1f(utime, time);

4、实时更新time
setTimeout();或者requestAnimationFrame去实施获取time即可

不请自来。一般有两种方案，给你提供个思路：
一、在WebGL中进行碰撞检测需要使用射线投射和包围盒检测等算法。可以将3D模型转换为包围盒或其他几何形状，然后使用射线来检测物体之间的碰撞。
二、可以使用基于物理的引擎（如Cannon.js和Physi.js）来模拟物体之间的物理运动和碰撞。

第一种方法一般我们是自行编写计算包围盒算法。计算包围盒的一种简单方法是遍历所有要渲染的对象并计算它们的边界框。边界框是一个矩形或立方体，它完全包含对象并且是最小的。对于每个对象，您可以计算它的边界框如下：
1.遍历对象的所有顶点，并将每个顶点的坐标存储在一个数组中。
2.初始化包围盒的最小和最大值，将它们设置为第一个顶点的坐标。
3.遍历剩余的顶点，并更新包围盒的最小和最大值，使其包含所有顶点。
4.使用最小和最大值来计算包围盒的中心和大小。
下面是我从网上的一个类包围盒计算方法，希望对你有启发：

function computeBoundingBox(vertices) {
  var min = [vertices[0], vertices[1], vertices[2]];
  var max = [vertices[0], vertices[1], vertices[2]];

  for (var i = 3; i < vertices.length; i += 3) {
    var x = vertices[i];
    var y = vertices[i+1];
    var z = vertices[i+2];

    if (x < min[0]) {
      min[0] = x;
    }
    if (y < min[1]) {
      min[1] = y;
    }
    if (z < min[2]) {
      min[2] = z;
    }

    if (x > max[0]) {
      max[0] = x;
    }
    if (y > max[1]) {
      max[1] = y;
    }
    if (z > max[2]) {
      max[2] = z;
    }
  }

  var center = [    (min[0] + max[0]) / 2,
    (min[1] + max[1]) / 2,
    (min[2] + max[2]) / 2
  ];

  var size = [    max[0] - min[0],
    max[1] - min[1],
    max[2] - min[2]
  ];

  return { min: min, max: max, center: center, size: size };
}

https://www.poliigon.com/
https://quixel.com/bridge
https://www.sharetextures.com/tag/cc0
https://www.arroway-textures.ch/
https://quixel.com/bridge

泻药。目前确实大屏展示的项目很多，两种技术方案居多，一种是游戏引擎（UE居多），其次是WebGL相关（ThreeJS为代表的其他框架）。其实不管游戏引擎还是WebGL核心还是图形学基础理论，只不过在其基础上又进行封装成框架。之前在直播时候给大家讲过，WebGL学习往往更容易获得收获感和成就感，并且基于WebGL的API也能够更加深刻理解图形学的美丽，除此之外，Web端的三维发展绝对是未来的主线，希望大家先部署自己的战略制高点，先发致人。接下来推荐几种学习路线：
方案一：
1、以框架学习为起点。这里还是建议ThreeJS，因为该框架结构较为清晰，成熟度也很高，社区很活跃，并且解决方案，我们俗称的轮子很多，所以就此而言你想学习三维只是ThreeJS确实是一个很好的试金石。当你可以对ThreeJS的基础API有了一定认识，至少看过一遍，并且实战过之后，你就可以进行下一个阶段的学习了。B站的课程很多关于ThreeJS学习，因为本身这块内容和传统前端没有太大区别，只需要对API熟悉你就可以掌握该知识。
2、学习WebGL。这时候你需要学习WebGL基础、中级、和高级。我推荐《Webgl编程指南》虽然该书也有一定缺点，但是市面上很多书都是靠这本书来翻版的，所以你懂得。
3、阅读ThreeJS源码。吃碎源码一直是所有程序员害怕的，也是极具挑战的内容。如果你想再深耕WebGL端三维开发，或者你想独自打造引擎，threejs源码很香。
4、学习图形学理论。我推荐《虎书》和《games》系列。课程和书籍是相辅相成的。
5、学习着色器或者尝试OpenGL或者direct3D。
当然中间还有数学学习的东西，我建议采取查漏补缺的方法，以上内容的学习不需要很高深的数学，基本都是大学数学内容，当然也有少许的重难点问题。难点问题是需要积累，当然我以后会帮你搞明白。
方案一就这些吧，方案二后面我再追加，希望对你有帮助。