SpriteJS的3D渲染能力 Up, Up, Up!

前言

本期由@月影授权分享。

正文从这开始～～

SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。

经过2个多月的紧张开发，SpriteJS的3D扩展终于完工啦。

自此，SpriteJS的渲染能力终于从2D进入3D领域。

那么SpriteJS究竟和现在流行的一些3D渲染库，比如ThreeJS、Babylon.js、claygl等库相比，用起来又有什么不一样的地方呢？

SpriteJS的3D扩展的底层是基于Ogl的，这是一个比较轻量级的库，它的作者给它的定位是：

OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

这样的库非常适合SpriteJS的二次封装，打包出来的代码足够小。

SpriteJS的3D扩展延续SpriteJS 2D几乎一样的API，而这样的API与HTML DOM的API的契合度很高。这也意味着，使用d3等对DOM API友好的库操作SpriteJS的3D元素会非常方便！另外前端工程师学习和使用上，上手门槛比较低，掌握之后也容易高效率地开发。

1. const {Scene} = spritejs;

2. const {Cube, shaders} = spritejs.ext3d;

3. const container = document.getElementById('container');

4. const scene = new Scene({container});

5. const layer = scene.layer3d('fglayer', {

6. camera: {

7. fov: 35, // Field of view

8. },

9. });

10. layer.camera.attributes.pos = [3, 3, 5];

11. const program = layer.createProgram({

12. ...shaders.NORMAL_GEOMETRY,

13. cullFace: null,

14. });

15. const cube = new Cube(program, {

16. colors: 'red red blue blue green green',

17. });

18. layer.append(cube);

19. layer.setOrbit(); // 开启旋转控制

上面很简单的代码创建了一个可用鼠标和触屏交互的立方体：

在线demo：https://spritejs.org/demo/#/3d/basic

熟悉SpriteJS的2D API的同学一定会发现这个代码几乎和2D的没有什么区别，只不过把layer换成了layer3d，而且创建3D元素的时候要传入对应的program对象而已。

SpriteJS提供了内置的一些shader供一般的应用使用，从而让我们能快速创建3D物体，不用纠结于细节。

SpriteJS还内置了一些几何体元素，包括：

• Plane 平面元素

• Cube 立方体

• Cylinder 圆柱体

• Sphere 球体

这些几何元素都有自己的属性，我们可以像操作2D的Sprite元素一样给它们赋属性值或改变他们的属性值。

另外SpriteJS还提供了这些几何体的基类Mesh3d对象，给这个对象传一组顶点数据进去即可创建和渲染我们想要绘制的任何几何体。

1. const {Scene} = spritejs;

2. const {Mesh3d, shaders} = spritejs.ext3d;

3. const container = document.getElementById('container');

4. const scene = new Scene({

5. container,

6. width: 600,

7. height: 600,

8. });

9. const layer = scene.layer3d('fglayer', {

10. camera: {

11. fov: 35,

12. z: 5,

13. },

14. });

15. const program = layer.createProgram({

16. ...shaders.NORMAL_GEOMETRY,

17. cullFace: null,

18. });

19. const p = 1 / Math.sqrt(2);

20. const model = {

21. position: [

22. -1, 0, -p,

23. 1, 0, -p,

24. 0, 1, p,

25. -1, 0, -p,

26. 1, 0, -p,

27. 0, -1, p,

28. 1, 0, -p,

29. 0, -1, p,

30. 0, 1, p,

31. -1, 0, -p,

32. 0, 1, p,

33. 0, -1, p],

34. };

35. const sprite = new Mesh3d(program, {

36. model,

37. colors: 'red blue green orange',

38. });

39. layer.append(sprite);

40. sprite.animate([

41. {rotateY: 0},

42. {rotateY: 360},

43. ], {

44. duration: 7000,

45. iterations: Infinity,

46. });

47. sprite.animate([

48. {rotateZ: 0},

49. {rotateZ: 360},

50. ], {

51. duration: 17000,

52. iterations: Infinity,

53. });

54. sprite.animate([

55. {rotateX: 0},

56. {rotateX: -360},

57. ], {

58. duration: 11000,

59. iterations: Infinity,

60. });

61. layer.setOrbit();

在线demo：https://spritejs.org/demo/#/3d/geometry2

与其他3D库类似，SpriteJS支持光照、阴影等效果，而且用起来更简单！

1. /* globals dat */

2. const {Scene, Color} = spritejs;

3. const {Cube, shaders} = spritejs.ext3d;

4. const container = document.getElementById('container');

5. const scene = new Scene({container});

6. const layer = scene.layer3d('fglayer', {

7. ambientColor: '#ff000080',

8. directionalLight: [1, 0, 0, 0.5],

9. pointLightColor: 'blue',

10. pointLightPosition: [5, 3, 6],

11. camera: {

12. fov: 35, // 相机的视野

13. pos: [3, 3, 5], // 相机的位置

14. },

15. });

16. const camera = layer.camera;

17. camera.lookAt([0, 0, 0]);

18. const program = layer.createProgram({

19. ...shaders.NORMAL_GEOMETRY,

20. cullFace: null,

21. });

22. const cube = new Cube(program, {

23. colors: 'grey',

24. });

25. layer.append(cube);

26. layer.setOrbit();

在线demo：https://spritejs.org/demo/#/3d/light

SpriteJS支持环境光、方向光和点光源。

SpriteJS也支持方便地绘制阴影效果：

1. const {Scene} = spritejs;

2. const {Camera, Mesh3d, Plane, shaders} = spritejs.ext3d;

3. const container = document.getElementById('container');

4. const scene = new Scene({

5. container,

6. displayRatio: 2,

7. });

8. const layer = scene.layer3d('fglayer', {

9. camera: {

10. fov: 35,

11. },

12. });

13. layer.camera.attributes.pos = [5, 4, 10];

14. layer.setOrbit();

15. const light = new Camera(layer.gl, {

16. left: -3,

17. right: 3,

18. bottom: -3,

19. top: 3,

20. near: 1,

21. far: 20,

22. });

23. light.attributes.pos = [3, 10, 3];

24. light.lookAt([0, 0, 0]);

25. const shadow = layer.createShadow({light});

26. const texture = layer.createTexture('https://p2.ssl.qhimg.com/t01155feb9a795bdd05.jpg');

27. const model = layer.loadModel('https://s0.ssl.qhres.com/static/0baccc5ad3cd5b8c.json');

28. const program = layer.createProgram({

29. ...shaders.TEXTURE_WITH_SHADOW,

30. cullFace: null,

31. texture,

32. });

33. const plane = new Mesh3d(program, {model});

34. window.plane = plane;

35. layer.append(plane);

36. const waterTexture = layer.createTexture('https://p0.ssl.qhimg.com/t01db936e50ab52f10a.jpg');

37. const program2 = layer.createProgram({

38. ...shaders.TEXTURE_WITH_SHADOW,

39. cullFace: null,

40. texture: waterTexture,

41. });

42. const ground = new Plane(program2, {

43. rotateX: 90,

44. scale: 6,

45. y: -3,

46. });

47. layer.append(ground);

48. shadow.add(plane);

49. shadow.add(ground);

50. layer.setShadow(shadow);

51. layer.tick((t) => {

52. // A bit of plane animation

53. if(plane) {

54. plane.attributes.z = Math.sin(t * 0.001);

55. plane.attributes.rotateX = Math.sin(t * 0.001 + 2) * 18;

56. plane.attributes.rotateY = Math.sin(t * 0.001 - 4) * -18;

57. }

58. });

在线demo：https://spritejs.org/demo/#/3d/shadow

我们可以使用与ThreeJS兼容的模型数据渲染各种3D模型，甚至绘制视频。

1. const {Scene} = spritejs;

2. const {Mesh3d, Cube, shaders} = spritejs.ext3d;

3. const container = document.getElementById('container');

4. const scene = new Scene({

5. container,

6. displayRatio: 2,

7. });

8. const layer = scene.layer3d('fglayer', {

9. camera: {

10. fov: 45,

11. },

12. });

13. layer.camera.attributes.pos = [3, 1.5, 4];

14. layer.camera.lookAt([1, 0.2, 0]);

15. const texture = layer.createTexture('https://p5.ssl.qhimg.com/t0110e2451e92de6193.jpg');

16. const program = layer.createProgram({

17. ...shaders.NORMAL_TEXTURE,

18. texture,

19. });

20. const model = layer.loadModel('https://s5.ssl.qhres.com/static/f545f86e6da07b9d.json');

21. const mesh = new Mesh3d(program, {model});

22. layer.append(mesh);

23. const videoTexture = layer.createTexture({

24. generateMipmaps: false,

25. width: 1024,

26. height: 512,

27. });

28. const video = document.createElement('video');

29. video.crossOrigin = 'anonymous';

30. video.src = 'https://s4.ssl.qhres.com/static/a2fa8e8634dd1ccb.mp4';

31. video.loop = true;

32. video.muted = true;

33. video.play();

34. const videoProgram = layer.createProgram({

35. ...shaders.NORMAL_TEXTURE,

36. texture: videoTexture,

37. cullFace: null,

38. });

39. const videoMesh = new Cube(videoProgram, {

40. width: 1.78,

41. height: 1,

42. depth: 1.78,

43. });

44. videoMesh.attributes.pos = [0, 0.5, -4];

45. videoMesh.attributes.scale = 1.5;

46. layer.append(videoMesh);

47. layer.tick((t) => {

48. // Attach video and/or update texture when video is ready

49. if(video.readyState >= video.HAVE_ENOUGH_DATA) {

50. if(!videoTexture.image) videoTexture.image = video;

51. videoTexture.needsUpdate = true;

52. }

53. if(mesh) mesh.attributes.rotateY -= 0.3;

54. videoMesh.attributes.rotateY += 0.2;

55. });

在线demo：https://spritejs.org/demo/#/3d/video

还可以随便玩全景地图：

1. const {Scene} = spritejs;

2. const {Sphere, shaders} = spritejs.ext3d;

3. const container = document.getElementById('container');

4. const scene = new Scene({

5. container,

6. displayRatio: 2,

7. });

8. const layer = scene.layer3d('fglayer', {

9. camera: {

10. fov: 45,

11. },

12. });

13. layer.camera.attributes.pos = [0, 0, 8];

14. const texture = layer.createTexture('https://p5.ssl.qhimg.com/t01e4a8428b9cc12bca.jpg');

15. const program = layer.createProgram({

16. ...shaders.GEOMETRY_WITH_TEXTURE,

17. texture,

18. // Need inside of sphere to be visible

19. cullFace: null,

20. });

21. const sphere = new Sphere(program, {radius: 1, widthSegments: 64});

22. layer.append(sphere);

23. const skyBox = sphere.cloneNode();

24. skyBox.attributes.scale = 10;

25. layer.append(skyBox);

26. layer.setOrbit();

在线demo：https://spritejs.org/demo/#/3d/skydome

SpriteJS 3D扩展还有RenderTarget、Post（后期处理通道）等黑科技，可以玩一些非常有意思的效果：

性能方面，SpriteJS的3D扩展也是很优秀的，渲染数千元素直到密集物体恐惧症，帧率轻松达到60fps毫无压力。

在线demo：https://spritejs.org/demo/#/benchmark/meshes3d

更何况还有GPGPU这样的黑科技，甚至能渲染数万至数十万的粒子：

只要能想到，没有做不到。只要有创意用SpriteJS的3D扩展可以愉快地写出各种惊艳的效果来~

项目：https://spritejs.org/#/

关于本文 作者：@月影 原文：https://zhuanlan.zhihu.com/p/103253115