Question

我具有以下代码，以便加载deepcopy文件

.glsl

$.getScript("path/to/file/vertexShader.glsl", function( vertexShader ) { console.log(vertexShader); });的内容是：

vertexShader.glsl

即使一切似乎都能正常工作，我也会收到以下错误消息：

#version 300 es

precision highp float;  
precision highp int;

out vec3 world_coords;
void main()
{
    world_coords = position + vec3(0.5);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

代码运行正常，但仍然出现错误。有什么想法可以摆脱它们吗？

Answer 1

$.getScript加载JavaScript脚本。与内部脚本（内容在HTML内的脚本）不同，您不能使用外部脚本加载JavaScript以外的任何内容。

要以现代简便的方式加载文本文件，请使用fetch和async / await

async function main() {
  const vertexShader = await fetch("path/to/file/vertexShader.glsl").then(req => req.text());
  ...
}
main();

或者当然将其转换为功能

async function main() {
  const vertexShader = await loadText("path/to/file/vertexShader.glsl");
  ...
}

function loadText(url) {
  return fetch("path/to/file/vertexShader.glsl").then(req => req.text());
}

main();

或没有异步/等待

fetch("path/to/file/vertexShader.glsl")
  .then(req => req.text())
  .then(function( vertexShader ) {
    console.log(vertexShader);
  });

，或者如果您希望它看起来类似于getScript

getTextFile("path/to/file/vertexShader.glsl", function( vertexShader ) {
  console.log(vertexShader);
});

function getTextFile(url, callback) {
  fetch("path/to/file/vertexShader.glsl")
    .then(req => req.text())
    .then(callback);
}

那是说，如果是我，并且我希望我的着色器位于外部，则可以像下面那样使用import / export

// myvertexshader.glsl
default export `
  attribute vec4 position
  void main() {
    gl_Position = position;
  }
`;

然后您可以import将其插入另一个javascript模块中，如

// main.js
import vertexShader from './myvertexshader.glsl';
...

main.js需要作为一个模块包含在内

<script src="main.js" type="module"></script>

import仅适用于现代浏览器（如运行WebGL2的浏览器），但您可以使用rollup之类的内容将其转换回旧式的单个文件JavaScript文件。

这样做的好处是，在开发过程中，所有文件都是单独的，但是对于生产/部署，您可以将JavaScript内置到一个大文件中，该文件的加载速度比许多小文件要快

three.js does this，如果您想查看示例

Answer 2

TBH，我还不完全了解您是否需要将DynamoDB dynamoDB = new DynamoDB(AmazonDynamoDBClientBuilder.standard().build());脚本附加到html页面的glsl上以供以后重用，但是如果您的程序实际上编译良好并且您只是需要消除这些错误，那么解决方案很简单。

head只是完整Ajax函数的简写，因此使用它并指定脚本类型：

$.getScript

顺便说一句，我对顶点着色器使用扩展名function getScript() { $.ajax({ url: "./solid.vert", dataType: "text", success: function(result){ // Inside result is the vertex shader } }); }，对于片段着色器使用扩展名.vert，由此服务器上的.frag类型设置为MIME。

即使文件已正确加载，在jQuery中加载自定义文件仍会返回错误

2 个答案: