🍊 image3D

使用webGL绘制三维图片。📊📈🎉 Drawing three-dimensional images using webGL.

鉴于当前浏览器支持情况，本项目只支持webGL 1上下文，更高级版本未来会考虑支持！

问题或交流

使用的时候遇到任何问题或有好的建议，请点击进入issue！

如何使用？

假设我们现在需要绘制一个下面这样的图形（图形在不停的旋转）：

首先，需要安装依赖的包：

npm install --save image3d three-geometry

然后，在页面中准备好着色器片段：

<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
    attribute vec4 a_position;
    uniform mat4 u_matrix;
    void main(){
        gl_Position=u_matrix * a_position;
    }
</script>

<!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
    precision mediump float;
    uniform vec4 u_color;
    void main(){
        gl_FragColor=u_color;
    }
</script>

当然，还有画布：

 <canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>

准备好了以后，使用着色器和画布进行初始化，得到三维绘图对象：

import image3D from 'image3d';

var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
    "vertex-shader": document.getElementById("vs").innerText,
    "fragment-shader": document.getElementById("fs").innerText,
    "depth": true
});

然后，获得画笔和相机等：

var painter = image3d.Painter();
var buffer = image3d.Buffer();
var camera = image3d.Camera();

可以看到，最终的效果是一个球和一个圆柱，三维几何体的计算，这里依赖three-geometry提供，因此，我们接下来对其进行初始化：

import ThreeGeometry from 'three-geometry';

var threeGeometry = ThreeGeometry({
    precision: 0.1
});

因为最终的效果是图形在不停的旋转，因此，我们需要不停的通过相机进行旋转，就好像这样：

setInterval(function () {

    // 修改相机

    // 绘制

}, 20);

修改相机很简单：

 // 传递照相机
image3d.setUniformMatrix("u_matrix", camera.rotateBody(0.02, -1, 1, 0, 1, -1, 0).value());

绘制的话，也很简单，我们以绘制一个球为例子说明（圆柱体类似）。

首先，设置球的颜色：

 image3d.setUniformFloat("u_color", 0.1, 0.3, 0.1, 1.0);

然后，借助前面几何体的对象计算球的数据：

 threeGeometry.sphere(function (data) {

     // data中包含了绘制球需要的坐标数据

 }, 0, 0.1, 0, 0.5)

拿到球的坐标数据以后，使用image3d上的方法绘制即可：

buffer.write(new Float32Array(data.points)).use('a_position', 3, 3, 0);
painter.drawStripTriangle(0, data.length);

最终的效果，我们提供了一个在线访问地址，你可以点击此处访问。

怎么样，是不是很简单？完整的代码请点击此处进行查看。

更多细节你可以访问在线接口文档进行查阅。

开源协议

MIT

Copyright (c) 2019-2022 hai2007 走一步，再走一步。