javascript - 使用 javascript 和 html 应用多个视口

问题描述

所以我正在上计算机图形课程，我们正在学习如何使用多个视口。我的教授只使用一个视口为课程提供伪代码，该视口生成看起来像从瓶子里出来的精灵。这是它的样子：

https://i.stack.imgur.com/7f9hj.png

现在进入代码：

var gl;
var points; 
var vertices =[]; 
var size = 0.25; 

window.onload = function init(){ 
var canvas = document.getElementById( "gl-canvas" );
gl=WebGLUtils.setupWebGL(canvas); 
//For debugging 
gl = WebGLDebugUtils.makeDebugContext( canvas.getContext("webgl")); 

if (!gl ){ 
    alert( "WebGL isn't available" ); 
}

gl.viewport(0,0, canvas.width, canvas.height); // <----- pay attention to this
gl.clearColor(0.0,0.0,0.0,1.0);
//Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" ); 
gl.useProgram( program );

//Manufacture the genie points in the array vertices by calling function

genie(size);

//Load the data into the GPU

var bufferId = gl.createBuffer(); 
gl.bindBuffer( gl.ARRAY_BUFFER , bufferId );
gl.bufferData( gl.ARRAY_BUFFER , flatten(vertices), gl.STATIC_DRAW );

//Associate our shader variables with our data buffer
var vPosition = gl.getAttribLocation( program , "vPosition" );
gl.vertexAttribPointer(vPosition ,2, gl.FLOAT , false ,0,0); 
gl.enableVertexAttribArray( vPosition ); 
render();
};

function genie(size){
const NUM =300; 
var i, fact , fact_now , fact7 , fact8;
fact =(2* Math.PI)/ NUM;
for (i =0; i < NUM; ++i){ 
    fact_now = fact * i;
    fact7 = fact_now * 7;
    fact8 = fact_now * 8; 
    vertices.push( vec2(size * (Math.cos(fact_now) + Math.sin(fact8)), 
                        size * (2.0* Math.sin(fact_now) + Math.sin(fact7))));
}
};

function render(){
 gl.clear( gl.COLOR_BUFFER_BIT );
 gl.drawArrays( gl.LINE_LOOP , 0, vertices.length );
}

在具有多个视口的示例中，伪代码是相似的，但是一个很大的区别是对gl.viewport 的调用从函数 init() 移动到了渲染函数

var gl;
var points; 
var vertices =[]; 
var size = 0.25; 

window.onload = function init(){ 
var canvas = document.getElementById( "gl-canvas" );
gl=WebGLUtils.setupWebGL(canvas); 
//For debugging 
gl = WebGLDebugUtils.makeDebugContext( canvas.getContext("webgl")); 

if (!gl ){ 
    alert( "WebGL isn't available" ); 
}

// <----------------- this line of code gets moved to render function
gl.clearColor(0.0,0.0,0.0,1.0);
//Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" ); 
gl.useProgram( program );

//Manufacture the genie points in the array vertices by calling function

genie(size);

//Load the data into the GPU

var bufferId = gl.createBuffer(); 
gl.bindBuffer( gl.ARRAY_BUFFER , bufferId );
gl.bufferData( gl.ARRAY_BUFFER , flatten(vertices), gl.STATIC_DRAW );

//Associate our shader variables with our data buffer
var vPosition = gl.getAttribLocation( program , "vPosition" );
gl.vertexAttribPointer(vPosition ,2, gl.FLOAT , false ,0,0); 
gl.enableVertexAttribArray( vPosition ); 
render();
};

function genie(size){
const NUM =300; 
var i, fact , fact_now , fact7 , fact8;
fact =(2* Math.PI)/ NUM;
for (i =0; i < NUM; ++i){ 
    fact_now = fact * i;
    fact7 = fact_now * 7;
    fact8 = fact_now * 8; 
    vertices.push( vec2(size * (Math.cos(fact_now) + Math.sin(fact8)), 
                        size * (2.0* Math.sin(fact_now) + Math.sin(fact7))));
}
};

function render(){
 gl.viewport(0,0, canvas.width/2, canvas.height/2); // <---- first viewport
 gl.clear( gl.COLOR_BUFFER_BIT );
 gl.drawArrays( gl.LINE_LOOP , 0, vertices.length );

 //establishes a second viewport
 gl.viewport( canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
 gl.drawArrays( gl.LINE_LOOP ,0, vertices.length );  // <-- draws a second genie
}

我尝试在 firefox 上运行伪代码的第二个版本。当我检查显示SCRIPT5009: SCRIPT5009: 'canvas' is not defined 的元素时，我得到一个空白页和一个错误

如果有人知道我做错了什么，请告诉我！

这里是 html 文件，如果你想玩它。

<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex"> 
    //GLSLvertexshadercode 
    attribute vec4 vPosition;

    void main() { 
        gl_Position = vPosition;
        gl_PointSize = 6.0;

     } 
</script>

<script id="fragment-shader" type="x-shader/x-fragment"> 
    //GLSLfragmentshadercode
     precision mediump float;

    void main() { 
        gl_FragColor = vec4(1.0,1.0,1.0,1.0);
     } 
</script>
    <!--Include A/S WebGL support libraries--> 
    <script type="text/javascript" src="webgl-utils.js"></script> 
    <script type="text/javascript" src="initShaders.js"></script>
    <script type="text/javascript" src="MV.js"></script>
    <script type="text/javascript" src="webgl-debug.js"></script>
    <script type="text/javascript" src="gene.js"></script>
    <body>
         <canvas id="gl-canvas" width="512" height="512">
             Oops ... yourbrowserdoesnotsupporttheHTML5canvaselement 
            </canvas> 
        </body> 
</html>

这是使用多个视口时的样子：

https://i.stack.imgur.com/RygcO.png

顺便忽略运行代码片段，它不起作用

标签： javascripthtml

javascript - 使用 javascript 和 html 应用多个视口

问题描述

解决方案

推荐阅读