Skip to content

Commit 18087d5

Browse files
greggmangreggman
committed
Fix all image to texture loading to not generate warnings
All images load asynchronously which means either you should not start rendering until they are loaded or else you need to put something in the textures so you can render immediately. This patch initializes all textures to a 1x1 pixel blue texture. When the image finishes loading the code replaces that contents of that texture with the image. Until then it's free to render with the one pixel texture This gets rid of the rendering warnings from the browser in the JavaScript console.
1 parent 8544709 commit 18087d5

File tree

18 files changed

+94
-25
lines changed

18 files changed

+94
-25
lines changed

‎example01/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212

213213
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
214214

215-
gl.deleteBuffer(plotPositionBuffer)
215+
gl.deleteBuffer(plotPositionBuffer.id);
216216

217217
zoom *= 1.02;
218218
document.getElementById("zoomOutput").value = zoom;

‎example02/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@
338338
setMatrixUniforms();
339339
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
340340

341-
gl.deleteBuffer(positionBuffer);
341+
gl.deleteBuffer(positionBuffer.id);
342342
}
343343

344344

‎example03/particles-01-noenable.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,16 +147,12 @@
147147

148148
var texture;
149149
function initTexture() {
150-
<<<<<<< HEAD
151150
texture = { id: gl.createTexture() };
152-
=======
153-
texture = gl.createTexture();
154151
// Setup a single pixel texture to use while we wait for the image to load.
155-
gl.bindTexture(gl.TEXTURE_2D, texture);
152+
gl.bindTexture(gl.TEXTURE_2D, texture.id);
156153
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
157154
new Uint8Array([0, 0, 255, 255]));
158155
// Load image asynchronously.
159-
>>>>>>> greggman-fix-particle-examples
160156
texture.image = new Image();
161157
texture.image.onload = function() {
162158
handleLoadedTexture(texture)

‎example03/particles-01.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,16 +147,12 @@
147147

148148
var texture;
149149
function initTexture() {
150-
<<<<<<< HEAD
151150
texture = { id: gl.createTexture() };
152-
=======
153-
texture = gl.createTexture();
154151
// Setup a single pixel texture to use while we wait for the image to load.
155-
gl.bindTexture(gl.TEXTURE_2D, texture);
152+
gl.bindTexture(gl.TEXTURE_2D, texture.id);
156153
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
157154
new Uint8Array([0, 0, 255, 255]));
158155
// Load image asynchronously.
159-
>>>>>>> greggman-fix-particle-examples
160156
texture.image = new Image();
161157
texture.image.onload = function() {
162158
handleLoadedTexture(texture)

‎example03/particles-02.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -157,16 +157,12 @@
157157

158158
var texture;
159159
function initTexture() {
160-
<<<<<<< HEAD
161160
texture = { id: gl.createTexture() };
162-
=======
163-
texture = gl.createTexture();
164161
// Setup a single pixel texture to use while we wait for the image to load.
165-
gl.bindTexture(gl.TEXTURE_2D, texture);
162+
gl.bindTexture(gl.TEXTURE_2D, texture.id);
166163
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
167164
new Uint8Array([0, 0, 255, 255]));
168165
// Load image asynchronously.
169-
>>>>>>> greggman-fix-particle-examples
170166
texture.image = new Image();
171167
texture.image.onload = function() {
172168
handleLoadedTexture(texture)

‎example03/particles-03.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
gl.attachShader(shaderProgram.id, fragmentShader.id);
117117
gl.linkProgram(shaderProgram.id);
118118

119-
if (!gl.getProgramParameter(shaderProgram.id.id, gl.LINK_STATUS)) {
119+
if (!gl.getProgramParameter(shaderProgram.id, gl.LINK_STATUS)) {
120120
alert("Could not initialise shaders");
121121
}
122122

@@ -157,16 +157,12 @@
157157

158158
var texture;
159159
function initTexture() {
160-
<<<<<<< HEAD
161160
texture = { id: gl.createTexture() };
162-
=======
163-
texture = gl.createTexture();
164161
// Setup a single pixel texture to use while we wait for the image to load.
165-
gl.bindTexture(gl.TEXTURE_2D, texture);
162+
gl.bindTexture(gl.TEXTURE_2D, texture.id);
166163
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
167164
new Uint8Array([0, 0, 255, 255]));
168165
// Load image asynchronously.
169-
>>>>>>> greggman-fix-particle-examples
170166
texture.image = new Image();
171167
texture.image.onload = function() {
172168
handleLoadedTexture(texture)

‎lesson05/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@
130130

131131
function initTexture() {
132132
neheTexture = { id: gl.createTexture() };
133+
// Setup a single pixel texture to use while we wait for the image to load.
134+
gl.bindTexture(gl.TEXTURE_2D, neheTexture.id);
135+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
136+
new Uint8Array([0, 0, 255, 255]));
137+
// Load image asynchronously.
133138
neheTexture.image = new Image();
134139
neheTexture.image.onload = function () {
135140
handleLoadedTexture(neheTexture)

‎lesson06/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,11 @@
146146

147147
for (var i=0; i < 3; i++) {
148148
var texture = { id: gl.createTexture() };
149+
// Setup a single pixel texture to use while we wait for the image to load.
150+
gl.bindTexture(gl.TEXTURE_2D, texture.id);
151+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
152+
new Uint8Array([0, 0, 255, 255]));
153+
// Load image asynchronously.
149154
texture.image = crateImage;
150155
crateTextures.push(texture);
151156
}

‎lesson07/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,12 @@
161161

162162
function initTexture() {
163163
crateTexture = { id: gl.createTexture() };
164-
crateTexture.image = new Image();
164+
// Setup a single pixel texture to use while we wait for the image to load.
165+
gl.bindTexture(gl.TEXTURE_2D, crateTexture.id);
166+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
167+
new Uint8Array([0, 0, 255, 255]));
168+
// Load image asynchronously.
169+
crateTexture.image = new Image();
165170
crateTexture.image.onload = function () {
166171
handleLoadedTexture(crateTexture)
167172
}

‎lesson08/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,11 @@
163163

164164
function initTexture() {
165165
glassTexture = { id: gl.createTexture() };
166+
// Setup a single pixel texture to use while we wait for the image to load.
167+
gl.bindTexture(gl.TEXTURE_2D, glassTexture.id);
168+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
169+
new Uint8Array([0, 0, 255, 255]));
170+
// Load image asynchronously.
166171
glassTexture.image = new Image();
167172
glassTexture.image.onload = function () {
168173
handleLoadedTexture(glassTexture)

0 commit comments

Comments
 (0)