【WebGL】Three.js绘制基础3D图形示例
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素可被用来通过JavaScript ...
原文：Webgl中的基础模型绘制
开篇 本篇博文对绘制webgl中基础图形做说明。阅读本文时，你需要对基本的webgl有一定认识，并且熟悉中学的基本数学公式。不过这些公式都非常简单，只要你学过，使用起来就没有问题。本文将持续更新，但是如果你需要绘制复杂的图形，我建议你使用建模软件构建完后导出到webgl中。 基础图元 我们的世界的物体都是有形状的，有些是圆的，有些是方的，还有些则是一些不规则的形状。计算机就需要用特定的绘制方法模拟 ...
2021-11-02 11:47 0 823 推荐指数：
相关推荐
初学WebGL引擎-BabylonJS：第2篇-基础模型体验
此次学习进度会比之前快很多，有了合适的学习方法后也就会有更多的乐趣产生了。 接上一章代码 上章代码 运行结果 【playground】-basic scene（基础场景） 本部分同上述代码相同。跳过 ...
原生WebGL场景中绘制多个圆锥圆柱
前几天解决了原生WebGL开发中的一个问题，就是在一个场景中绘制多个几何网格特征不同的模型，比如本文所做的绘制多个圆锥和圆柱在同一个场景中，今天抽空把解决的办法记录下来，同时也附上代码。首先声明，圆柱和圆锥的网格生成是我自己写的polyhedron.js模块，如果要加载其他模型 ...
【WebGL】一次drawcall中绘制多个不同纹理的图形
Demo： http://kenkozheng.github.io/WebGL/multi-texture-in-one-drawcall/index.html 关键点： 1、fragment shader接受参数（从vertex shader传递vary），动态指定sampler 2、设置 ...
WebGL绘制有宽度的线
WebGL中有宽度的线一直都是初学者的一道门槛，因为在windows系统中底层的渲染接口都是D3D提供的，所以无论你的lineWidth设置为多少，最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线，但是在拐弯处原生api没有做任何处理，所以往往达不到项目需求，再者比如对于虚线、导航 ...
WebGL绘制有端头的线
关于WebGL绘制线原理不明白的小伙伴，可以看看我之前的文章WebGL绘制有宽度的线。这一篇我们主要来介绍端头的绘制，先看效果图。 端头一般被称为lineCap，主要有以下三种形式： butt最简单等于没有端头，square一般是多出lineWidth/2的长度，round ...
WebGL之绘制三维地球
通过Three.js也许可以很方便的展示出3D模型，但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗？现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。 本节实现的效果: WebGL三维地球 内容大纲 构建网格 编写着色器 实现3D ...
WebGL半透明物体的绘制
WebGL 中当透明和半透明物体共存时，相关设置不正确的话，物体表面会出现破碎杂乱的断面，非常影响效果，我们接着就来解决这个问题。 完成的展示Demo请看: 半透明物体和透明物体共存 α 混合 让物体实现半透明效果需要用到颜色的α分量。该功能被称为a混合(alpha blending ...