Three.js is a great open source WebGL Library, WebGL allows JavaScript to manipulate the GPU, realizing the true meaning of 3D at the browser end. But at present this technology is still in the development stage, the material is extremely scarce, the amateur learns basically to through the demo source code and three.js own source code to study.
0. Introduction
Hi, this is my first article on how to write good code. Like many developers, I learn through practice, but I also learn from other more experienced developers. In the past few months, I've spent a lot of time on the canvas tag, and I think it would be interesting to write down some of the tips you've learned about WebGL and JavaScript this time. There are some very specific, some are very general, I hope you like!
1. Write a prototype as soon as possible
Let's start with the simple. Now that you have a wonderful idea, you should write a prototype of the most complex part of the program as soon as possible to see if the technology can achieve your ideas. WebGL is very powerful because it can directly manipulate the GPU on display, but don't forget that you need JavaScript to access the graphics card, which is much less efficient than the internal operation of the graphics card. In fact, your genius idea is likely to be defeated by this simple thing.
2. Using three.js to handle 3D
Like my friend Hakim, I fully understand the underlying details of the technology we are using. It is important to understand what is underneath the surface, but if you use three.js, it frees you from so much trouble. You can use it for CANVAS,WEBGL and SVG, and you should also find a way to fit your needs.
3. Avoid setinterval
This is an important point for anyone who uses JavaScript to create animations. Why? Suppose you set a function once every 20 milliseconds, and the function takes more than 20 milliseconds, then 20ms, the browser doesn't care, it starts the next execution directly. At the very least you can use settimeout to set it up and execute it again after a function has finished executing it.
In fact, there is a more trendy but still semi-finished function, called Requestanimationframe, it's great. It's very similar to the settimeout function, except in these two ways: when the tab page loses focus, it stops running; Now the function still relies on the browser, and the criteria may change later. If you want more information, you can visit Paul Irish's blog.
4. Use reverse cycle
This is a nice little trick to make your cycle faster. Use reverse, and use a while loop. For example, this loop:
Copy Code code as follows:
for (var a = 0; a < arr.length; a++) {
Do something
}
It does not perform as well as the following loop:
Copy Code code as follows:
Assuming that the array arr exists
var alength = arr.length;
while (alength--) {
Do something
}
This may not save you much money, because the efficiency of execution depends largely on what you do in the loop body. But if you want the unnecessary overhead of a program to be reduced to the last byte, the latter loop definitely wins.
To be honest, the main impact of program execution efficiency is the length of the array cache. You can (and indeed should) look at Jsperf to understand this and other factors that affect JavaScript performance.
5. Using Textures
It looks tempting to draw any detail of an object in the WebGL, but if it is possible, you should be aware of whether you can use textures because it can greatly improve performance. In certain situations, such as shadows or blur effects, you may have to use textures, but at other times you should always be concerned about whether you can use textures.
6. Using Caching
I've tried a lot of this in my own experiment, and in the frame loop, you should avoid referencing variables, objects, or anything else. For this reason, it is worthwhile to cache your models and vertices, so that you can quickly access them when rendering animations.
7. Disable the check
I love this little piece of code and I put it in any page that contains canvas or WEBGL.
Copy Code code as follows:
Disable mouse to select DOM element
Document.onselectstart = function () {
return false;
};
You may also want to disable the check only in the canvas control. This is the code that I use in projects where the canvas occupy the entire screen.
8. Avoid defining CSS in JavaScript
Now, it's really convenient to define CSS in JavaScript, especially when you're using jquery.
Copy Code code as follows:
Try not to do that.
$ ("#someid"). CSS ({
Position: ' Relative ',
Height: ' 30px ',
Width: ' 300px ',
BackgroundColor: ' #A020F0 '
});
The problem is that after that, your JavaScript code is quickly filled with various types of CSS definitions, and you use the *.css file to define CSS, and the potential problem is hard to find. A better approach is to use class to Modularize CSS, and to define only those CSS classes that are not predictable in JavaScript.
9. Defining a callback function in an object
I love the following code, this is not my own thought out, but it is so neat and beautiful. If you have a whole bunch of callback functions to use, you might use this:
Copy Code code as follows:
$ ("#someid"). Click (function () {
callback function
Returns false in jquery to prevent message delivery and default behavior from being released
return false;
});
Or, you'll recall a loose function defined elsewhere in the code, such as
Copy Code code as follows:
$ ("#someid"). Click (mysuperfunction);
function Mysuperfunction (event) {
Do a lot of things here
return false;
}
There are some problems with doing so. In the first code, you bind an anonymous function to an event, which makes it difficult for you to remove the function from the event. You can certainly dismiss all the functions on an event, but you may have a number of functions tied to it, and you just want to release one. In the second case, your function name pollutes the global variable space, and the code maintainability is reduced. So, consider doing this:
Copy Code code as follows:
$ ("#someid"). Click (callbacks.mysuperfunction);
All of the callback functions are in the callbacks object
var callbacks = {
Mysuperfunction:function (event) {
To work more
return false;
}
}
Unbind a function
$ ("#someid"). Unbind (' click ', callbacks.mysuperfunction);
This is neat and clean, and avoids the two problems mentioned above.
10. Chain-type ternary operator
I've learned that from Paul Irish's "JQuery, 11 things you should know." It's very handy and you should like it. We often do this:
Copy Code code as follows:
Assign value to Numberbasedona according to A's value
If a is greater than 5, the assignment is 200, otherwise the value is 38.
var Numberbasedona = a > 5? 200:38;
But if you want to do this, for example, how much is the duty, how much more is the duty, and what is the greater the duty? In this case, the chain ternary operator is very useful:
Copy Code code as follows:
var Numberbasedona =
A < 5? 200:
A < 7? 38:
A < 11? 15:
A < 15? 49:
64;
It's more efficient than that.
When a >=15
