WEBGL programming guide texture
1. Steps to create a texture object
1. Create a texture object (gl.createTexture()）
2. Turn on the texture unit (gl.activeTexture(gl.TEXTURE0)）
3. Bind the texture object to the target (gl.bindTexture(gl.TEXTURE_2D,texture)）
4. Configure texture parameters (gl.textParameteri(gl.TEXTURE_2D,gl_TEXTURE_MIN_FILTER,gl.LINEAR)）
5. Configure texture image (gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.UNSIGNED_BYTE,image)）;
2. Use of texture objects
uniform sampler2D u_sampler;
Varying vec2 v_TexCoord;//passing texture coordinates from the fragment shader
gl_FragColor=texture2D(u_sampler,v_TexCoord)；
var u_sample=gl.getUniformLocation(gl.program,'u_sample');
/ / Create a texture object
/ / Transfer texture 0 to the shader
gl.uniform1i(u_sample,0)
3. Function description
1.gl.activeTexture(gl.TEXTURE0), also gl.TEXTURE0...gl.TEXTURE7, through the texture unit mechanism to use multiple textures at the same time, by default webgl supports a minimum of 8 texture units
2.gl.bindTexture(gl.TEXTURE_2D, texture), gl.TEXTURE_2D two-dimensional texture. There are also gl.TEXTURE_CUBE_MAP cube textures
3.gl.textParameteri(gl.TEXTURE_2D, gl_TEXTURE_MIN_FILTER, gl.LINEAR), you can configure multiple parameters multiple times. The configurable parameters are: gl.TEXTURE_MAG_FILTER, magnification method, gl.TEXTURE_MAG_FILTER, reduction method, which means that the texture image size is different from the surface size to be attached. How to sample the nearest pixel value of gl.NEAREST, around gl.LINEAR Four pixel weighted average.
gl.TEXTURE_WRAP_S, texture left and right padding, gl.TEXTURE_WRAP_T, texture top and bottom padding, parameters gl.REPEAT: tile texture, gl.MIRRORED_REPEAT: mirror symmetry. gl.CLAMP_TOEDGE: use texture edge values
Intelligent Recommendation
WebGL Programming Guide (1) Introduction
In 2009, Khronos established the WebGL working group, and began to establish the WebGL specification based on OpenGL ES. In 2011, the first version of the WebGL specification was release...
Reading Note: WebGL Programming Guide
Chapter II: Getting Started Canvas label Through examples: Draw a blue rectangle on your browser, key points: Define the Canvas tab in HTML and tag it with the ID. Insert the JS script in HTML, specif...
"WebGL Programming Guide" Learning (0)
WebGL programming guide learning, Jiemingcheng, 2022-3-1 0. Webgl programming, from entering pit to giving up Knowledge path "WebGL Programming Guide" environment construction Webgl programm...
"WebGL Programming Guide" study (1)
WebGL programming guide learning, Jiemingcheng, 2022-3-1 1. It's just a simple migration -we call webgl in JavaScript in JavaScript existJavaScript calls webgl in the middleSimilar to itC ++ in the mi...
07 WebGL Shadder Programming Language GLSL ES Sampler (Texture)
One built-in type supporting GLSL ES is called a sampler (Sampler), we must access textures through this type variable. There are two basic sampler types: Sampler2D and SamplerCube. Sampler variables ...
More Recommendation
"WebGL Programming Guide" --- learn WebGL acquaintance from the sample code [2]
In the previous section, we know how to use a simple WebGL program and related functions. In this section, we learn how to draw a point with a simple shader. We first take a brief talk about the two s...
"WebGL Programming Guide" study notes-1. WebGL overview
"WebGL Programming Guide" study notes-1. WebGL overview This series is used to record my experience, key content and summary after studying the book "WebGL Programming Guide" WebGL...
"WebGL Programming Guide" study notes-3. Use WebGL in Canvas
"WebGL Programming Guide" study notes-2. Use WebGL in Canvas In the previous section, we learned to use the <canvas> element to draw two-dimensional graphics. In this section, we use W...
[Notes] "WebGL Programming Guide" learning-Chapter 1 Overview of WebGL
WebGL overview WebGL, is used toDraw and rendercomplexThree-dimensionalGraphics and allow users toInteractiveTechnology. In the traditional sense, in order to display three-dimensional graphics, devel...
Using texture maps in WebGL (texture)
Loading texture First add the code to load the texture. Now we only use a single texture to paste the 6 faces of the cube, but the same method can be used to load any number of texture maps. The code ...