[英]Javascript and WebGL, external scripts
只是好奇; 如何將我的webgl着色器放在外部文件中?
目前我正在;
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void)
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void)
{
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
在我的html標題中,如何從外部文件中鏈接? - 我嘗試了通常的javascript方法;
<script type="text/javascript" src="webgl_shader.js"></script>
對於外部文件,您需要停止使用腳本標記。 我建議使用類似XMLHttpRequest的東西。 我還建議重命名你的文件,它們是着色器而不是Javascript所以使用不同的擴展名以避免混淆。 我使用類似“shiny_surface.shader”的東西。
這就是我做的:
function loadFile(url, data, callback, errorCallback) {
// Set up an asynchronous request
var request = new XMLHttpRequest();
request.open('GET', url, true);
// Hook the event that gets called as the request progresses
request.onreadystatechange = function () {
// If the request is "DONE" (completed or failed)
if (request.readyState == 4) {
// If we got HTTP status 200 (OK)
if (request.status == 200) {
callback(request.responseText, data)
} else { // Failed
errorCallback(url);
}
}
};
request.send(null);
}
function loadFiles(urls, callback, errorCallback) {
var numUrls = urls.length;
var numComplete = 0;
var result = [];
// Callback for a single file
function partialCallback(text, urlIndex) {
result[urlIndex] = text;
numComplete++;
// When all files have downloaded
if (numComplete == numUrls) {
callback(result);
}
}
for (var i = 0; i < numUrls; i++) {
loadFile(urls[i], i, partialCallback, errorCallback);
}
}
var gl;
// ... set up WebGL ...
loadFiles(['vertex.shader', 'fragment.shader'], function (shaderText) {
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, shaderText[0]);
// ... compile shader, etc ...
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, shaderText[1]);
// ... set up shader program and start render loop timer
}, function (url) {
alert('Failed to download "' + url + '"');
});
如果您使用的是像JQuery這樣的庫,它們可能具有類似於我的loadFiles的函數。
我有同樣的問題,發現這對我有用jQuery:
var fragmentShaderSRC = null,
var vertexShaderSRC = null;
...
function executeProgram(){ //main program }
...
$.get("shader.fs", function(data){
fragmentShaderSRC = data.firstChild.textContent;
$.get("shader.vs", function(data){
vertexShaderSRC = data.firstChild.textContent;
executeProgram();
});
});
shader.fs
和shader.vs
是我的着色器(包括
<script type="x-shader/x-fragment">
和<script type="x-shader/x-vertex">
聲明行)
更新使用Chrome時,智能猜測不會選擇“xml”。 以下代碼也適用於Chrome:
$.ajax({
url: 'shader.fs',
success: function(data){
fragmentShaderSRC = data.firstChild.textContent;
$.ajax({
url: 'shader.vs',
success: function(data){
vertexShaderSRC = data.firstChild.textContent;
executeProgram();
},
dataType: 'xml'
})
},
dataType: 'xml'
});
更新2:由於着色器源中的<
和&
需要轉義為以XML格式加載,所以即使使用小於比較或邏輯運算符,這也會一直有效:
var vs_source = null,
fs_source = null;
$.ajax({
async: false,
url: './my_shader.vs',
success: function (data) {
vs_source = $(data).html();
},
dataType: 'html'
});
$.ajax({
async: false,
url: './my_shader.fs',
success: function (data) {
fs_source = $(data).html();
},
dataType: 'html'
});
您可以像我一樣使用開源着色器管理庫:
https://github.com/ILOVEPIE/Shader.js
它允許您從URL加載着色器並緩存着色器源代碼,以便將來訪問該站點。 它還使得使用制服更簡單。
我不是WebGL大師,但這有用嗎?
<script id="shader-fs" type="x-shader/x-fragment" src="fragment-shader.fs" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.