let a_Position = gl.getAttribLocation(gl.program,"a_Position"); //返回attribute变量位置,否则-1(具有webgl_或者gl_前缀或变量不存在) let u_FragColor = gl.getUniformLocation(gl.program,"u_FragColor"); //返回uniform变量位置,否则null
gl.vertexAttrib1f(a_Position,v1); gl.vertexAttrib2f(a_Position,v1,v2); gl.vertexAttrib3f(a_Position,v1,v2,v3); gl.vertexAttrib4f(a_Position,v1,v2,v3,v4); //或者用以v结尾函数版本 let position = new Float32Atrray([1.0, 2.0, 3.0, 1.0]); gl.vertexAttrib4fv(a_Position,position)
gl.uniform1f(u_FragColor,v1); gl.uniform2f(u_FragColor,v1,v2); gl.uniform3f(u_FragColor,v1,v2,v3); gl.uniform4f(u_FragColor,v1,v2,v3,v4); //或者用以v结尾函数版本 let color = new Float32Atrray([1.0, 2.0, 3.0, 1.0]); gl.uniform4fv(u_FragColor,color)
(2). 纹理压缩：纹理压缩在opengl es 3.0和webgl 2.0上有比较好的支持，经压缩后的纹理可以减少图形数据，节省宽带。常见的压缩格式为ETC，Khronos公司提供有ETC格式压缩的免费压缩包，在opengl/webgl程序中使用glCompressedTexImage2D函数加载被压缩的纹理。
// Create a texture object let texture = gl.createTexture();
加载纹理图像。使用Image对象
1 2 3 4 5 6 7 8
// Create the image object let image = new Image(); // Register the event handler to be called on loading an image image.onload = () => { loadTexture(gl, texture, u_Sampler, image); }; // Tell the browser to load an image image.src = require("@/assets/sky.jpg");
loadTexture(gl, texture, u_Sampler, image) { // Flip the image's y axis gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Enable texture unit0 gl.activeTexture(gl.TEXTURE0); // Bind the texture object to the target gl.bindTexture(gl.TEXTURE_2D, texture); // Set the texture parameters gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set the texture image gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); // Set the texture unit 0 to the sampler gl.uniform1i(u_Sampler, 0); }
var MyCustomTileLayer = BaseTileLayer.createSubclass({ // properties of the custom tile layer properties: { urlTemplate: null, }, // override getTileUrl() // generate the tile url for a given level, row and column getTileUrl: function (level, row, col) { returnthis.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row).replace("{tag}", col % 8); } }); var TDMap = new MyCustomTileLayer({ urlTemplate: "http://t{tag}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}", tint: "#71DE6E", // blue color title: "TD Map", }); var myMap = newMap({ layers: [TDMap] }); var view = new SceneView({ container: "viewDiv", map: myMap, });
var MyCustomTileLayer = BaseTileLayer.createSubclass({ // properties of the custom tile layer properties: { urlTemplate: null, }, // override getTileUrl() // generate the tile url for a given level, row and column getTileUrl: function (level, row, col) { returnthis.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row).replace("{tag}", col % 8); } });
var Tile = new MyCustomTileLayer({ urlTemplate: "http://localhost:62881/api/test?mt=测试&version=20181210&x={x}&y={y}&z={z}", title: "Tile", });
)将其与
做比较即可分出以下结果。
)·
