前言
ChatGPT 近期煊赫一时，好像没有什么问题是它不能解决的。出于对 ChatGPT 的好奇，咱们决定摸索下它对于前端开发人员来讲，是作为辅助工具多一些，还是主力工具更多一些？
2D 能力测试
咱们就筛选一个驰名的递归回溯问题——“八皇后”，看看 ChatGPT 的体现如何。什么是“八皇后”首先，咱们先让它残缺介绍下“八皇后“问题。让咱们刮目相待 ChatGPT 会给出什么样的答案，沟通如下图所示：
只是要求介绍一下“八皇后”问题，它居然连解题思路也如此清晰地一并给出。编程能力既然如此，那就来考考编程能力。先要求它应用 JavaScript 求解“八皇后”问题的所有解。为了不便查看最终成果，又要求它应用 Canvas 将后果绘制进去。具体问答如图所示：
左顾右盼地凝视着屏幕中的 ChatGPT，它一行一行噼里啪啦地给出答案，且代码编写地如此整洁，不禁由衷赞叹。尽管还不确定这些代码是否真的运行起来，失去咱们想要的成果，然而从生成代码的构造和逻辑性来看，曾经足够令人震撼。
接下来，咱们来验证一下代码是否真的能够顺利运行。复制粘贴 ChatGPT 给出的答案，在未更改一行代码的状况下，页面确实运行了。一起看看运行成果：
看着实现进去的成果，我的心田开始局促不安。脑海里疯狂计算着这样一个问题：我须要破费多长时间能力解决以上问题？反正必定无奈像 ChatGPT 这样，不到 30S 就给出后果。输入所有解再回过头来看答案，却发现只打印出一个后果，所以它是否将所有的后果都打印进去呢？咱们接着提出需要，答案如图所示：
Unbelievable，居然真的能够，立刻复制粘贴操作，测验运行成果：
认真数了下，发现只输入了 16 个解，然而结尾提到总共是有 92 个解。通过认真查阅代码，发现一个小格子被定义为 40 个像素，而整个 Canvas 的大小是 1280 像素，所以这个 Canvas 最多只能画 16 个棋盘。
在此输入中，棋盘和棋盘之间没有点距离，很难分别棋盘边界，观看起来有些费劲。问题绝对简略，只需调整几个参数即可解决，咱们抉择手动调整，调整后的 drawChessboards 办法。如下所示：function drawChessboards(solutions) {
const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
const n = solutions[0].length;
const solutionsPerRow = Math.ceil(Math.sqrt(solutions.length));
const sizeWithGap = canvas.width / solutionsPerRow / n;
const size = sizeWithGap * 0.95;
for (let k = 0; k < solutions.length; k++) {const offsetX = ((k % solutionsPerRow) * n + 0.2) * sizeWithGap;
const offsetY = (Math.floor(k / solutionsPerRow) * n + 0.2) * sizeWithGap;
for (let row = 0; row < n; row++) {for (let col = 0; col < n; col++) {if ((row + col) % 2 === 0) {ctx.fillStyle = '#FFFFFF';} else {ctx.fillStyle = '#000000';}
ctx.fillRect(col * size + offsetX, row * size + offsetY, size, size);
if (solutions[k][row][col] === 'Q') {ctx.beginPath();
ctx.arc(col * size + size / 2 + offsetX, row * size + size / 2 + offsetY, size / 4, 0, 2 * Math.PI);
ctx.fillStyle = '#FF0000';
ctx.fill();}
}
}
}} 接下来再瞧瞧最终的运行成果：
这回看着难受了很多~
综上所述通过对 ChatGPT 在 2D 能力测验可知，ChatGPT 在生成 Canvas 绘制逻辑代码的能力以及解决问题逻辑解决能力上，未然与一位程序员没什么区别了，甚至可能它所具备的能力或远超一般的程序员。
3D 渲染测试
晋升维度，让 ChatGPT 将后果用 3D 的渲染形式输入看看。如图所示：
咱们再一次机械性地复制、粘贴、运行它给出的代码，后果就是——跑起来了，真的跑起来了。（ps：能够看出真的很冲动~）
但该视角太低，不适宜察看棋盘上皇后的散布状况，手动微调下场景视角高度，再来看看成果：
应用开源的 3D 渲染引擎 Three.js，实现了这样的成果，还是十分不错的。
模型格调调整测试
用简略的柱子来示意皇后，看起来太过枯燥，想看看 ChatGPT 是否真正生成粗劣的皇后模型，于是就有下图的发问:
运行成果如下：
皇后模型成果的确给出了调整，视角也有所调高，但又过于高了且皇后的地位如同有些偏差，看起来像是悬浮在地面。再让它调整看下，如下图所示：
调整后成果：
大略这样的“皇后”模型曾经是极限了，咱们就不再强求，生成的视角还是那么高，但都是小问题，微调下即可，其余的都未做调整。以上就是整个 3D 渲染成果的校验过程，再一次证实了 ChatGPT 的弱小之处，生成的代码显然曾经达到可利用级别。
WebGL 技术测试
既然会应用 Three.js，那是不是意味着曾经把握了 WebGL 技术呢？接下来问题再降级下，测试看是否用纯 WebGL 来实现 3D 的渲染，如图所示：
望着代码被一行一行急速输入时，再一次被它的强悍震得心头一紧。如果想要残缺实现的话内容会太长，所以它列举了代码的整体框架，局部代码用正文代替。
HT 渲染引擎究极测试
身边的小伙伴提到，试问下是否用图扑软件自家 HT 作为渲染引擎，让 ChatGPT 给出相应的可执行代码？答案如图所示：
乍一看输入的后果，代码仿佛写得很不错。但仔细阅读后，会发现代码中有很多中央应用谬误，比方没有应用 HT 的 3D 组件 Graph3dView，而是应用了 2D 组件 GraphView；2D 的接口和 3D 的接口混用；应用的接口不存在等多种问题。兴许是 ChatGPT 可能取得的训练数据相当无限，但它生成代码的程度曾经是十分高了，只需在原根底上稍加调整，即可顺利运行。
总体来说，ChatGPT 相较于一般程序员，在编写算法和通用渲染方面以及效率上都有着更强的实力。在一些比拟垂直的畛域，因为不足足够的训练数据，可能会导致无奈精确残缺地表白，甚至会呈现张冠李戴的状况。但它的体现在肯定水平上缩短了程序员解决问题的工夫，只有问题形容足够清晰，就能够获取到答案并间接应用。
在将来，置信 ChatGPT 会变得越来越弱小，并且会成为一款十分杰出的辅助工具，甚至可能成为次要的生产工具。