In 2021, Vite Umbrella Company expanded its territory and once extended its influence to my city. In order to find out the true face of the mountain, we use the refining furnace provided by Vite umbrella when we cultivate webGL sunflower Treasure book. I used to use the refining furnace provided by Webpack company until now, and the function of refining and gasification form provided by Vite company flaunts the fastest in the universe. In order to speed up the progress of WebGL, I used the Vite furnace with the mentality of trying it out.

Well, it hasn’t started yet, and the drug lead can’t lead into the furnace, as follows:

Commonly used drug introductionrequireIt doesn’t work, and I’m starting to say,webpackGood solution,requireDafa good, minerequireWhere did it go? I can’t make this up. For a long time, I’ve used require to introduce text content in TXT, JSON, whatever format.

Where is require?

Require is, at its core, a function call. We can usually use the require method in webpack projects because webpack-dev-server packages the code before running the project. When it encounters require, WebPack calls nodeJS’s require method to get the local file content. Consider require as a file IO operation.

Vite does not package the code at runtime. It uses the browser type=”module” function directly. What function does the browser have? Boy, this introduced file browser doesn’t recognize its GLSL syntax.

void main() {
  // Assign the pixel size to the built-in variable gl_PointSize
  gl_PointSize = 20.0
  // Vertex position at the origin of coordinates
  gl_Positioin = vec4(0.0.0.0.0.0.1.0)}Copy the code

Take a look at the Vite documentation, the command line tool has written a recognition pattern for us, so without further ado, try it out.

Modify it and open the interface, we can see:

The fragment shader and vertex shader code has run successfully. I just don’t see the so-called simplest white dot. I forgot to draw it.

gl.drawArrays(gl.POINTS,0.1);
Copy the code

But still error:

 INVALID_OPERATION: useProgram: program not valid
Copy the code

Paste a copy of the online code debugging

  if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
    var info = gl.getProgramInfoLog(program);
    throw new Error('Could not compile WebGL program. \n\n' + info);
  }
Copy the code

The vertex shader did not compile successfully.

On closer inspection, it turned out to be apositionWritten on thepositioin

Therefore, webGL graphics do not display, a large part of the GLSL language syntax errors. However, this GLSL debugging feature is not so anti-human. Thanks for reading!